packages/styles/scss/utilities/_border.scss

   1 .border {
   2         border: 1px solid var(--border-norm);
   3 }
   4
   5 @each $placement in (top, right, bottom, left) {
   6         .border-#{$placement} {
   7                 #{dash-join('border', logical($placement))}: 1px solid var(--border-norm);
   8         }
   9 }
  10
  11 @each $color in (primary, norm, weak, danger, warning, success, info) {
  12         // Initialize namespace
  13         $prefix: '';
  14
  15         @if $color == 'norm' or $color == 'weak' {
  16                 $prefix: 'border';
  17         }
  18
  19         @if $color == 'danger' or $color == 'warning' or $color == 'success' or $color == 'info' {
  20                 $prefix: 'signal';
  21         }
  22
  23         .border-#{$color} {
  24                 border-color: var(--#{dash-join($prefix, $color)});
  25         }
  26 }
  27
  28 .border-currentcolor {
  29         border-color: currentcolor;
  30 }
  31
  32 .border-transparent {
  33         border-color: transparent;
  34 }
  35
  36 .border-dashed {
  37         border-style: dashed;
  38 }
  39
  40 .border-dotted {
  41         border-style: dotted;
  42 }
  43
  44 .border-collapse {
  45         border-collapse: collapse;
  46 }
  47
  48 .border-none {
  49         border: none;
  50 }
  51
  52 .border-2 {
  53         border-width: 2px;
  54 }