184 lines
3.1 KiB
SCSS
184 lines
3.1 KiB
SCSS
.border {
|
|
border: 1px solid var(--border-color) !important;
|
|
}
|
|
|
|
.border-start {
|
|
border-inline-start: 1px solid var(--border-color) !important;
|
|
}
|
|
|
|
.border-end {
|
|
border-inline-end: 1px solid var(--border-color) !important;
|
|
}
|
|
.border-bottom {
|
|
border-bottom: 1px solid var(--border-color) !important;
|
|
}
|
|
|
|
@each $property, $value in $border-light-colors {
|
|
.border-#{$property} {
|
|
border-color: var(--#{$property}) !important;
|
|
}
|
|
}
|
|
|
|
|
|
.br-success {
|
|
border-color: var(--success-border) !important;
|
|
}
|
|
|
|
.br-white {
|
|
border-color: var(--base) !important;
|
|
}
|
|
|
|
.border-light-white {
|
|
border-color: rgba(255, 255, 255, 0.38) !important;
|
|
}
|
|
|
|
.input-form-light {
|
|
border-color: var(--input-form-light) !important;
|
|
}
|
|
|
|
.input-form-dark {
|
|
border-color: var(--input-form-dark) !important;
|
|
}
|
|
|
|
// border hover
|
|
.br-hover-primary {
|
|
@include transition(all 0.3s);
|
|
&:hover {
|
|
border-color: var(--primary-600) !important;
|
|
}
|
|
}
|
|
|
|
.br-hover-success {
|
|
@include transition(all 0.3s);
|
|
&:hover {
|
|
border-color: var(--success-main) !important;
|
|
}
|
|
}
|
|
|
|
.br-hover-info {
|
|
@include transition(all 0.3s);
|
|
&:hover {
|
|
border-color: var(--info-main) !important;
|
|
}
|
|
}
|
|
|
|
.br-hover-warning {
|
|
@include transition(all 0.3s);
|
|
&:hover {
|
|
border-color: var(--warning-main) !important;
|
|
}
|
|
}
|
|
|
|
.br-hover-danger {
|
|
@include transition(all 0.3s);
|
|
&:hover {
|
|
border-color: var(--danger-main) !important;
|
|
}
|
|
}
|
|
|
|
|
|
@each $color, $shades in $colors {
|
|
@each $shade, $value in $shades {
|
|
.border-#{$color}-#{$shade} {
|
|
border-color: var(--#{$color}-#{$shade}) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $color, $shades in $semantic-colors {
|
|
@each $shade, $value in $shades {
|
|
.border-#{$color}-#{$shade} {
|
|
border-color: var(--#{$color}-#{$shade}) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@each $property, $value in $extra-colors {
|
|
.border-#{$property} {
|
|
border-color: var(--#{$property}) !important;
|
|
}
|
|
}
|
|
|
|
.border-width {
|
|
&-2-px {
|
|
border-width: 2px !important;
|
|
}
|
|
&-3-px {
|
|
border-width: 3px !important;
|
|
}
|
|
&-4-px {
|
|
border-width: 4px !important;
|
|
}
|
|
&-5-px {
|
|
border-width: 5px !important;
|
|
}
|
|
}
|
|
|
|
.border-start-width {
|
|
&-2-px {
|
|
border-inline-start-width: 2px !important;
|
|
}
|
|
&-3-px {
|
|
border-inline-start-width: 3px !important;
|
|
}
|
|
&-4-px {
|
|
border-inline-start-width: 4px !important;
|
|
}
|
|
&-5-px {
|
|
border-inline-start-width: 5px !important;
|
|
}
|
|
}
|
|
|
|
.border-end-width {
|
|
&-2-px {
|
|
border-inline-end-width: 2px !important;
|
|
}
|
|
&-3-px {
|
|
border-inline-end-width: 3px !important;
|
|
}
|
|
&-4-px {
|
|
border-inline-end-width: 4px !important;
|
|
}
|
|
&-5-px {
|
|
border-inline-end-width: 5px !important;
|
|
}
|
|
&-6-px {
|
|
border-inline-end-width: 6px !important;
|
|
}
|
|
}
|
|
|
|
.border-top-0 {
|
|
border-top: 0!important;
|
|
}
|
|
|
|
.border-end-0 {
|
|
border-right: 0!important;
|
|
}
|
|
|
|
.border-start-0 {
|
|
border-left: 0!important;
|
|
}
|
|
|
|
.border-bottom-0 {
|
|
border-bottom: 0!important;
|
|
}
|
|
|
|
|
|
.border-dashed {
|
|
border-style: dashed !important;
|
|
}
|
|
|
|
.center-border {
|
|
position: relative;
|
|
&::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 1px;
|
|
height: calc(100% - 9px);
|
|
background-color: var(--neutral-300);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|