thelilfrog/startbootstrap-sb-admin-2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

version 4.0 udpate

Browse Source 
Complete refactor! Main layout changed, new pages added, build system changed, now uses Gulp 4, Bootstrap SCSS, custom SCSS, new design, dropped Morris and Flot Charts, added Chart.js for charts, new example pages, and more...
This commit is contained in:
David Miller
2019-01-29 14:15:29 -05:00
parent 86d352e36b
commit 7ef57a9999
43 changed files with 7511 additions and 1648 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
scss/_buttons.scss Normal file
View File

@@ -0,0 +1,52 @@
.btn-circle {
border-radius: 100%;
height: 2.5rem;
width: 2.5rem;
font-size: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
&.btn-sm {
height: 1.8rem;
width: 1.8rem;
font-size: 0.75rem;
}
&.btn-lg {
height: 3.5rem;
width: 3.5rem;
font-size: 1.35rem;
}
}
.btn-icon-split {
padding: 0;
overflow: hidden;
display: inline-flex;
align-items: stretch;
justify-content: center;
.icon {
background: fade-out($black, .85);
display: inline-block;
padding: $btn-padding-y $btn-padding-x;
}
.text {
display: inline-block;
padding: $btn-padding-y $btn-padding-x;
}
&.btn-sm {
.icon {
padding: $btn-padding-y-sm $btn-padding-x-sm;
}
.text {
padding: $btn-padding-y-sm $btn-padding-x-sm;
}
}
&.btn-lg {
.icon {
padding: $btn-padding-y-lg $btn-padding-x-lg;
}
.text {
padding: $btn-padding-y-lg $btn-padding-x-lg;
}
}
}

20
scss/_charts.scss
View File

@@ -7,3 +7,23 @@
height: 20rem;
}
}
// Bar Chart
.chart-bar {
position: relative;
height: 10rem;
width: 100%;
@include media-breakpoint-up(md) {
height: 20rem;
}
}
// Pie Chart
.chart-pie {
position: relative;
height: 15rem;
width: 100%;
@include media-breakpoint-up(md) {
height: calc(20rem - 43px) !important;
}
}

52
scss/_error.scss Normal file
View File

@@ -0,0 +1,52 @@
// Lucas Bebber's Glitch Effect
// Tutorial and CSS from CSS Tricks
// https://css-tricks.com/glitch-effect-text-images-svg/
.error {
color: $gray-800;
font-size: 7rem;
position: relative;
line-height: 1;
width: 12.5rem;
}
@keyframes noise-anim {
$steps: 20;
@for $i from 0 through $steps {
#{percentage($i*(1/$steps))} {
clip: rect(random(100)+px,9999px,random(100)+px,0);
}
}
}
.error:after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 $red;
top: 0;
color: $gray-800;
background: $gray-100;
overflow: hidden;
clip: rect(0,900px,0,0);
animation: noise-anim 2s infinite linear alternate-reverse;
}
@keyframes noise-anim-2 {
$steps: 20;
@for $i from 0 through $steps {
#{percentage($i*(1/$steps))} {
clip: rect(random(100)+px,9999px,random(100)+px,0);
}
}
}
.error:before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 1px 0 $blue;
top: 0;
color: $gray-800;
background: $gray-100;
overflow: hidden;
clip: rect(0,900px,0,0);
animation: noise-anim-2 3s infinite linear alternate-reverse;
}

29
scss/_global.scss
View File

@@ -9,6 +9,12 @@ body {
height: 100%;
}
a {
&:focus {
outline: none;
}
}
// Main page wrapper
#wrapper {
display: flex;
@@ -29,29 +35,6 @@ body {
padding-right: $grid-gutter-width;
}
// Fixed Nav Option
body.fixed-nav {
#content-wrapper {
margin-top: $navbar-base-height;
padding-left: $sidebar-collapsed-width;
}
&.sidebar-toggled {
#content-wrapper {
padding-left: 0;
}
}
@include media-breakpoint-up(md) {
#content-wrapper {
padding-left: $sidebar-base-width;
}
&.sidebar-toggled {
#content-wrapper {
padding-left: $sidebar-collapsed-width;
}
}
}
}
// Scroll to top button
.scroll-to-top {
position: fixed;

97
scss/_login.scss
View File

@@ -1,69 +1,50 @@
:root {
--input-padding-x: 0.75rem;
--input-padding-y: 0.75rem;
// Pulling these images from Unsplash
// Toshi the dog from https://unsplash.com/@charlesdeluvio - what a funny dog...
.bg-login-image {
background: url('https://source.unsplash.com/K4mSJ7kc0As/600x800');
background-position: center;
background-size: cover;
}
.card-login {
max-width: 25rem;
.bg-register-image {
background: url('https://source.unsplash.com/Mv9hjnEUHR4/600x800');
background-position: center;
background-size: cover;
}
.card-register {
max-width: 40rem;
.bg-password-image {
background: url('https://source.unsplash.com/oWTW-jNGl9I/600x800');
background-position: center;
background-size: cover;
}
.form-label-group {
position: relative;
form.user {
.custom-checkbox.small {
label {
line-height: 1.5rem;
}
}
.form-control-user {
font-size: 0.8rem;
border-radius: 10rem;
padding: 1.5rem 1rem;
}
.btn-user {
font-size: 0.8rem;
border-radius: 10rem;
padding: 0.75rem 1rem;
}
}
.form-label-group > input,
.form-label-group > label {
padding: var(--input-padding-y) var(--input-padding-x);
height: auto;
.btn-google {
@include button-variant($brand-google, $white);
}
.form-label-group > label {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0;
/* Override default `<label>` margin */
line-height: 1.5;
color: #495057;
border: 1px solid transparent;
border-radius: 0.25rem;
transition: all 0.1s ease-in-out;
}
.form-label-group input::-webkit-input-placeholder {
color: transparent;
}
.form-label-group input:-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-ms-input-placeholder {
color: transparent;
}
.form-label-group input::-moz-placeholder {
color: transparent;
}
.form-label-group input::placeholder {
color: transparent;
}
.form-label-group input:not(:placeholder-shown) {
padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
padding-bottom: calc(var(--input-padding-y) / 3);
}
.form-label-group input:not(:placeholder-shown) ~ label {
padding-top: calc(var(--input-padding-y) / 3);
padding-bottom: calc(var(--input-padding-y) / 3);
font-size: 12px;
color: #777;
.btn-facebook {
@include button-variant($brand-facebook, $white);
}

4
scss/_mixins.scss
View File

@@ -1,3 +1 @@
@mixin rotate {
transform: rotate(-15deg);
}

1
scss/_navs.scss
View File

@@ -1,4 +1,3 @@
@import "navs/global.scss";
@import "navs/topbar.scss";
@import "navs/sidebar.scss";
@import "navs/fixed.scss";

3
scss/_utilities.scss
View File

@@ -2,3 +2,6 @@
@import "utilities/background.scss";
@import "utilities/display.scss";
@import "utilities/text.scss";
@import "utilities/border.scss";
@import "utilities/progress.scss";
@import "utilities/rotate.scss";

21
scss/_variables.scss
View File

@@ -1,3 +1,6 @@
// Override Bootstrap default variables here
// Do not edit any of the files in /vendor/bootstrap/scss/!
// Color Variables
// Bootstrap Color Overrides
@@ -24,6 +27,10 @@ $green: #1cc88a !default;
$teal: #20c9a6 !default;
$cyan: #36b9cc !default;
// Custom Colors
$brand-google: #ea4335;
$brand-facebook: #3b5998;
// Set Contrast Threshold
$yiq-contrasted-threshold: 195 !default;
@@ -41,20 +48,21 @@ $box-shadow-sm: 0 0.125rem 0.25rem 0 rgba($gray-900, .2) !default;
$box-shadow: 0 0.15rem 1.75rem 0 rgba($gray-900, .15) !default;
// $box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
// Border Radius
// Borders Radius
$border-radius: 0.35rem !default;
$border-color: darken($gray-200, 2%);
// Spacing Variables
// Change below variable if the height of the navbar changes
$topbar-base-height: 70px;
$navbar-base-height: 56px;
$topbar-base-height: 4.375rem;
// Change below variable to change the width of the sidenav
$sidebar-base-width: 250px;
$sidebar-base-width: 14rem;
// Change below variable to change the width of the sidenav when collapsed
$sidebar-collapsed-width: 115px;
$sidebar-collapsed-width: 6.5rem;
// Card
$card-cap-bg: $gray-100;
$card-border-color: $border-color;
// Adjust column spacing for symmetry
$spacer: 1rem;
@@ -63,5 +71,6 @@ $grid-gutter-width: $spacer * 1.5;
// Transitions
$transition-collapse: height .15s ease !default;
// Dropdown Font Font Size
// Dropdowns
$dropdown-font-size: 0.85rem;
$dropdown-border-color: $border-color;

8
scss/navs/fixed.scss
View File

@@ -1,8 +0,0 @@
// Fixed Nav Option
// Add .fixed-top class to top .navbar-nav and to .sidebar - add .fixed-nav to body
.sidebar.fixed-top {
// top: $navbar-base-height;
// height: calc(100vh - #{$navbar-base-height});
// overflow-y: auto;
}

5
scss/navs/sidebar.scss
View File

@@ -68,6 +68,10 @@
&:active {
background-color: $gray-300;
}
&.active {
color: $primary;
font-weight: 700;
}
}
}
}
@@ -113,7 +117,6 @@
.sidebar-brand-icon i {
font-size: 2rem;
@include rotate;
}
.sidebar-brand-text {
display: none;

85
scss/navs/topbar.scss
View File

@@ -1,12 +1,40 @@
// Topbar
.topbar {
height: $topbar-base-height;
#sidebarToggleTop {
height: 2.5rem;
width: 2.5rem;
&:hover {
background-color: $gray-200;
}
&:active {
background-color: $gray-300;
}
}
.navbar-search {
width: 25rem;
input {
font-size: 0.85rem;
}
}
.topbar-divider {
width: 0;
border-right: 1px solid $border-color;
height: calc(#{$topbar-base-height} - 2rem);
margin: auto 1rem;
}
.nav-item {
.nav-link {
height: $topbar-base-height;
display: flex;
align-items: center;
padding: 0 0.75rem;
&:focus {
outline: none;
}
}
&:focus {
outline: none;
}
}
.dropdown {
@@ -16,7 +44,54 @@
right: $grid-gutter-width / 2;
}
}
@include media-breakpoint-up(md) {
.dropdown-list {
padding: 0;
border: none;
overflow: hidden;
.dropdown-header {
background-color: $primary;
border: 1px solid $primary;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: $white;
}
.dropdown-item {
white-space: normal;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-left: 1px solid $border-color;
border-right: 1px solid $border-color;
border-bottom: 1px solid $border-color;
line-height: 1.3rem;
.dropdown-list-image {
position: relative;
height: 2.5rem;
width: 2.5rem;
img {
height: 2.5rem;
width: 2.5rem;
}
.status-indicator {
background-color: $gray-200;
height: 0.75rem;
width: 0.75rem;
border-radius: 100%;
position: absolute;
bottom: 0;
right: 0;
border: .125rem solid $white;
}
}
.text-truncate {
max-width: 10rem;
}
&:active {
background-color: $gray-200;
color: $gray-900;
}
}
}
@include media-breakpoint-up(sm) {
.dropdown {
position: relative;
.dropdown-menu {
@@ -24,6 +99,14 @@
right: 0;
}
}
.dropdown-list {
width: 20rem !important;
.dropdown-item {
.text-truncate {
max-width: 13.375rem;
}
}
}
}
}

2
scss/sb-admin-2.scss
View File

@@ -12,7 +12,9 @@
// Custom Components
@import "dropdowns.scss";
@import "navs.scss";
@import "buttons.scss";
@import "cards.scss";
@import "charts.scss";
@import "login.scss";
@import "error.scss";
@import "footer.scss";

39
scss/utilities/_border.scss Normal file
View File

@@ -0,0 +1,39 @@
.border-left-primary {
border-left: .25rem solid $primary !important;
}
.border-left-success {
border-left: .25rem solid $success !important;
}
.border-left-info {
border-left: .25rem solid $info !important;
}
.border-left-warning {
border-left: .25rem solid $warning !important;
}
.border-left-danger {
border-left: .25rem solid $danger !important;
}
.border-bottom-primary {
border-bottom: .25rem solid $primary !important;
}
.border-bottom-success {
border-bottom: .25rem solid $success !important;
}
.border-bottom-info {
border-bottom: .25rem solid $info !important;
}
.border-bottom-warning {
border-bottom: .25rem solid $warning !important;
}
.border-bottom-danger {
border-bottom: .25rem solid $danger !important;
}

3
scss/utilities/_progress.scss Normal file
View File

@@ -0,0 +1,3 @@
.progress-sm {
height: .5rem;
}

7
scss/utilities/_rotate.scss Normal file
View File

@@ -0,0 +1,7 @@
.rotate-15 {
transform: rotate(15deg);
}
.rotate-n-15 {
transform: rotate(-15deg);
}

17
scss/utilities/_text.scss
View File

@@ -1,5 +1,13 @@
// Grayscale Text Utilities
.text-xs {
font-size: .7rem;
}
.text-lg {
font-size: 1.2rem;
}
.text-gray-100 {
color: $gray-100 !important;
}
@@ -35,3 +43,12 @@
.text-gray-900 {
color: $gray-900 !important;
}
.icon-circle {
height: 2.5rem;
width: 2.5rem;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}