Skip to content

Commit

Permalink
Merge pull request StartBootstrap#242 from JohanLopes/master
Browse files Browse the repository at this point in the history
Use bootstrap variables in borders and backgrounds utilities classes
  • Loading branch information
davidtmiller authored May 17, 2019
2 parents 5ad6666 + b6fcd9f commit a372e9a
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 100 deletions.
72 changes: 10 additions & 62 deletions scss/utilities/_background.scss
Original file line number Diff line number Diff line change
@@ -1,69 +1,17 @@
// Background Gradient Utilities

.bg-gradient-primary {
background-color: $primary;
background-image: linear-gradient(180deg, $primary 10%, darken($primary, 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;
@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;
}
}

// Grayscale Background Utilities

.bg-gray-100 {
background-color: $gray-100 !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;
@each $level, $value in $grays {
.bg-gray-#{$level} {
background-color: $value !important;
}
}
44 changes: 6 additions & 38 deletions scss/utilities/_border.scss
Original file line number Diff line number Diff line change
@@ -1,39 +1,7 @@
.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;
@each $color, $value in $theme-colors {
@each $position in ['left', 'bottom'] {
.border-#{$position}-#{$color} {
border-#{$position}: .25rem solid $value !important;
}
}
}

0 comments on commit a372e9a

Please sign in to comment.