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

Use bootstrap variables in borders and backgrounds utilities classes

Browse Source
This commit is contained in:
Johan Lopes
2019-04-24 17:08:12 +02:00
parent ddfaceb4a8
commit b6fcd9f6da
2 changed files with 16 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
scss/utilities/_background.scss
View File

@@ -1,69 +1,17 @@
// Background Gradient Utilities
.bg-gradient-primary {
background-color: $primary;
background-image: linear-gradient(180deg, $primary 10%, darken($primary, 15%) 100%);
@each $color, $value in $theme-colors {
.bg-gradient-#{$color} {
background-color: $value;
background-image: linear-gradient(180deg, $value 10%, darken($value, 15%) 100%);
background-size: cover;
}
.bg-gradient-success {
background-color: $success;
background-image: linear-gradient(180deg, $success 10%, darken($success, 15%) 100%);
background-size: cover;
}
.bg-gradient-info {
background-color: $info;
background-image: linear-gradient(180deg, $info 10%, darken($info, 15%) 100%);
background-size: cover;
}
.bg-gradient-warning {
background-color: $warning;
background-image: linear-gradient(180deg, $warning 10%, darken($warning, 15%) 100%);
background-size: cover;
}
.bg-gradient-danger {
background-color: $danger;
background-image: linear-gradient(180deg, $danger 10%, darken($danger, 15%) 100%);
background-size: cover;
}
// Grayscale Background Utilities
.bg-gray-100 {
background-color: $gray-100 !important;
@each $level, $value in $grays {
.bg-gray-#{$level} {
background-color: $value !important;
}
.bg-gray-200 {
background-color: $gray-200 !important;
}
.bg-gray-300 {
background-color: $gray-300 !important;
}
.bg-gray-400 {
background-color: $gray-400 !important;
}
.bg-gray-500 {
background-color: $gray-500 !important;
}
.bg-gray-600 {
background-color: $gray-600 !important;
}
.bg-gray-700 {
background-color: $gray-700 !important;
}
.bg-gray-800 {
background-color: $gray-800 !important;
}
.bg-gray-900 {
background-color: $gray-900 !important;
}

40
scss/utilities/_border.scss
View File

@@ -1,39 +1,7 @@
.border-left-primary {
border-left: .25rem solid $primary !important;
@each $color, $value in $theme-colors {
@each $position in ['left', 'bottom'] {
.border-#{$position}-#{$color} {
border-#{$position}: .25rem solid $value !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;
}