diff --git a/src/utilities/borders.less b/src/utilities/borders.less index 9423c3f8c..463d3f9eb 100644 --- a/src/utilities/borders.less +++ b/src/utilities/borders.less @@ -1,7 +1,8 @@ @border-default-color: @border-dark-soft; -@border-radius-1: .25rem; -@border-radius-2: .5rem; +@border-radius-1: .1rem; +@border-radius-2: .15rem; +@border-radius-3: .5rem; @border-width-1: 1px; @border-width-2: 2px; @@ -33,6 +34,11 @@ .border-l-4 { border-left: @border-width-4 solid @border-default-color; } .border-r-4 { border-right: @border-width-4 solid @border-default-color; } +// Styles +.border-dashed { border-style: dashed; } +.border-dotted { border-style: dotted; } + +// Disablers .border-0 { border-style: none; } .border-t-0 { border-top-style: none; } .border-b-0 { border-bottom-style: none; } @@ -84,22 +90,28 @@ .hover-border-invisible { &:hover { .border-invisible; } } // Radius -.rounded { border-radius: @border-radius-1; } -.rounded-t { border-top-left-radius: @border-radius-1; border-top-right-radius: @border-radius-1; } -.rounded-r { border-top-right-radius: @border-radius-1; border-bottom-right-radius: @border-radius-1; } -.rounded-b { border-bottom-left-radius: @border-radius-1; border-bottom-right-radius: @border-radius-1; } -.rounded-l { border-top-left-radius: @border-radius-1; border-bottom-left-radius: @border-radius-1; } +.rounded-sm { border-radius: @border-radius-1; } +.rounded-t-sm { border-top-left-radius: @border-radius-1; border-top-right-radius: @border-radius-1; } +.rounded-r-sm { border-top-right-radius: @border-radius-1; border-bottom-right-radius: @border-radius-1; } +.rounded-b-sm { border-bottom-left-radius: @border-radius-1; border-bottom-right-radius: @border-radius-1; } +.rounded-l-sm { border-top-left-radius: @border-radius-1; border-bottom-left-radius: @border-radius-1; } -.rounded-lg { border-radius: @border-radius-2; } -.rounded-t-lg { border-top-left-radius: @border-radius-2; border-top-right-radius: @border-radius-2; } -.rounded-r-lg { border-top-right-radius: @border-radius-2; border-bottom-right-radius: @border-radius-2; } -.rounded-b-lg { border-bottom-left-radius: @border-radius-2; border-bottom-right-radius: @border-radius-2; } -.rounded-l-lg { border-top-left-radius: @border-radius-2; border-bottom-left-radius: @border-radius-2; } +.rounded { border-radius: @border-radius-2; } +.rounded-t { border-top-left-radius: @border-radius-2; border-top-right-radius: @border-radius-2; } +.rounded-r { border-top-right-radius: @border-radius-2; border-bottom-right-radius: @border-radius-2; } +.rounded-b { border-bottom-left-radius: @border-radius-2; border-bottom-right-radius: @border-radius-2; } +.rounded-l { border-top-left-radius: @border-radius-2; border-bottom-left-radius: @border-radius-2; } + +.rounded-lg { border-radius: @border-radius-3; } +.rounded-t-lg { border-top-left-radius: @border-radius-3; border-top-right-radius: @border-radius-3; } +.rounded-r-lg { border-top-right-radius: @border-radius-3; border-bottom-right-radius: @border-radius-3; } +.rounded-b-lg { border-bottom-left-radius: @border-radius-3; border-bottom-right-radius: @border-radius-3; } +.rounded-l-lg { border-top-left-radius: @border-radius-3; border-bottom-left-radius: @border-radius-3; } .pill { border-radius: 9999px; } // Responsive -.generate-responsive-versions({ +.responsive({ &border { .border; } &border-t { .border-t; } &border-b { .border-b; } @@ -120,6 +132,8 @@ &border-b-4 { .border-b-4; } &border-l-4 { .border-l-4; } &border-r-4 { .border-r-4; } + &border-dashed { .border-dashed; } + &border-dotted { .border-dotted; } &border-0 { .border-0; } &border-t-0 { .border-t-0; } &border-b-0 { .border-b-0; } @@ -155,6 +169,15 @@ &border-l-light { .border-l-light; } &border-l-light-soft { .border-l-light-soft; } &border-l-light-softer { .border-l-light-softer; } + &border-brand { .border-brand; } + &border-danger { .border-danger; } + &border-danger-soft { .border-danger-soft; } + &border-invisible { .border-invisible; } + &rounded-sm { .rounded-sm; } + &rounded-t-sm { .rounded-t-sm; } + &rounded-r-sm { .rounded-r-sm; } + &rounded-b-sm { .rounded-b-sm; } + &rounded-l-sm { .rounded-l-sm; } &rounded { .rounded; } &rounded-t { .rounded-t; } &rounded-r { .rounded-r; }