0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Bootstrap/scss/utilities/_borders.scss
envolute eeb1ccab9b Change border class
The class ".border" (css/utilities/_borders.scss) is set the border-color to "$gray-200".
So I see that it would be nice to create a variable for the border color "$border-color". Because the default border should not always be "gray-200".
Another thing, there is a "$border-width" variable. Would not it be better to use this variable to set the default width of the border?
2017-08-10 22:48:26 -07:00

53 lines
1.1 KiB
SCSS

//
// Border
//
.border { border: $border-width solid $border-color !important; }
.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; }
@each $color, $value in $theme-colors {
.border-#{$color} {
border-color: $value !important;
}
}
.border-white {
border-color: $white !important;
}
//
// Border-radius
//
.rounded {
border-radius: $border-radius !important;
}
.rounded-top {
border-top-left-radius: $border-radius !important;
border-top-right-radius: $border-radius !important;
}
.rounded-right {
border-top-right-radius: $border-radius !important;
border-bottom-right-radius: $border-radius !important;
}
.rounded-bottom {
border-bottom-right-radius: $border-radius !important;
border-bottom-left-radius: $border-radius !important;
}
.rounded-left {
border-top-left-radius: $border-radius !important;
border-bottom-left-radius: $border-radius !important;
}
.rounded-circle {
border-radius: 50%;
}
.rounded-0 {
border-radius: 0;
}