mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
116 lines
3.1 KiB
Plaintext
116 lines
3.1 KiB
Plaintext
// Widths
|
|
@border-width-scale:
|
|
default 1px,
|
|
'2' 2px,
|
|
'4' 4px,
|
|
'8' 8px,
|
|
'0' 0,
|
|
;
|
|
|
|
// Colors
|
|
@border-dark: @color-grey-600;
|
|
@border-dark-soft: @color-grey-500;
|
|
@border-dark-softer: @color-grey-400;
|
|
|
|
@border-light: @color-white;
|
|
@border-light-soft: @color-grey-200;
|
|
@border-light-softer: @color-grey-300;
|
|
|
|
@border-dark-overlay: hsla(0, 0%, 0%, 20%);
|
|
@border-dark-overlay-soft: hsla(0, 0%, 0%, 10%);
|
|
@border-dark-overlay-softer: hsla(0, 0%, 0%, 5%);
|
|
|
|
@border-light-overlay: hsla(0, 0%, 100%, 100%);
|
|
@border-light-overlay-soft: hsla(0, 0%, 100%, 60%);
|
|
@border-light-overlay-softer: hsla(0, 0%, 100%, 35%);
|
|
|
|
@default-border-color: @border-dark-soft;
|
|
|
|
@border-colors:
|
|
'dark' @border-dark,
|
|
'dark-soft' @border-dark-soft,
|
|
'dark-softer' @border-dark-softer,
|
|
|
|
'light' @border-light,
|
|
'light-soft' @border-light-soft,
|
|
'light-softer' @border-light-softer,
|
|
|
|
'dark-overlay' @border-dark-overlay,
|
|
'dark-overlay-soft' @border-dark-overlay-soft,
|
|
'dark-overlay-softer' @border-dark-overlay-softer,
|
|
|
|
'light-overlay' @border-light-overlay,
|
|
'light-overlay-soft' @border-light-overlay-soft,
|
|
'light-overlay-softer' @border-light-overlay-softer,
|
|
|
|
'red-dark' @color-red-dark,
|
|
'red' @color-red,
|
|
'red-light' @color-red-light,
|
|
'red-lightest' @color-red-lightest,
|
|
|
|
'orange-dark' @color-orange-dark,
|
|
'orange' @color-orange,
|
|
'orange-light' @color-orange-light,
|
|
'orange-lightest' @color-orange-lightest,
|
|
|
|
'yellow-dark' @color-yellow-dark,
|
|
'yellow' @color-yellow,
|
|
'yellow-light' @color-yellow-light,
|
|
'yellow-lightest' @color-yellow-lightest,
|
|
|
|
'green-dark' @color-green-dark,
|
|
'green' @color-green,
|
|
'green-light' @color-green-light,
|
|
'green-lightest' @color-green-lightest,
|
|
|
|
'teal-dark' @color-teal-dark,
|
|
'teal' @color-teal,
|
|
'teal-light' @color-teal-light,
|
|
'teal-lightest' @color-teal-lightest,
|
|
|
|
'blue-dark' @color-blue-dark,
|
|
'blue' @color-blue,
|
|
'blue-light' @color-blue-light,
|
|
'blue-lightest' @color-blue-lightest,
|
|
|
|
'indigo-dark' @color-indigo-dark,
|
|
'indigo' @color-indigo,
|
|
'indigo-light' @color-indigo-light,
|
|
'indigo-lightest' @color-indigo-lightest,
|
|
|
|
'purple-dark' @color-purple-dark,
|
|
'purple' @color-purple,
|
|
'purple-light' @color-purple-light,
|
|
'purple-lightest' @color-purple-lightest,
|
|
|
|
'pink-dark' @color-pink-dark,
|
|
'pink' @color-pink,
|
|
'pink-light' @color-pink-light,
|
|
'pink-lightest' @color-pink-lightest,
|
|
;
|
|
|
|
// Radius
|
|
@border-radiuses:
|
|
'sm' .125rem,
|
|
default .25rem,
|
|
'lg' .5rem,
|
|
;
|
|
|
|
.define-border-widths(@border-width-scale; @default-border-color; @screens);
|
|
.define-border-colors(@border-colors; @screens);
|
|
.define-border-hover-colors(@border-colors; @screens);
|
|
.define-rounded-borders(@border-radiuses; @screens);
|
|
|
|
// Styles
|
|
.border-dashed { border-style: dashed; }
|
|
.border-dotted { border-style: dotted; }
|
|
|
|
.pill { border-radius: 9999px; }
|
|
|
|
// Responsive
|
|
.responsive({
|
|
&border-dashed { .border-dashed; }
|
|
&border-dotted { .border-dotted; }
|
|
&pill { .pill; }
|
|
});
|