diff options
Diffstat (limited to 'pyblackbird_cc/static/scss/_utilities.scss')
| -rw-r--r-- | pyblackbird_cc/static/scss/_utilities.scss | 806 |
1 files changed, 806 insertions, 0 deletions
diff --git a/pyblackbird_cc/static/scss/_utilities.scss b/pyblackbird_cc/static/scss/_utilities.scss new file mode 100644 index 0000000..696f906 --- /dev/null +++ b/pyblackbird_cc/static/scss/_utilities.scss @@ -0,0 +1,806 @@ +// Utilities + +$utilities: () !default; +// stylelint-disable-next-line scss/dollar-variable-default +$utilities: map-merge( + ( + // scss-docs-start utils-vertical-align + "align": ( + property: vertical-align, + class: align, + values: baseline top middle bottom text-bottom text-top + ), + // scss-docs-end utils-vertical-align + // scss-docs-start utils-float + "float": ( + responsive: true, + property: float, + values: ( + start: left, + end: right, + none: none, + ) + ), + // scss-docs-end utils-float + // Object Fit utilities + // scss-docs-start utils-object-fit + "object-fit": ( + responsive: true, + property: object-fit, + values: ( + contain: contain, + cover: cover, + fill: fill, + scale: scale-down, + none: none, + ) + ), + // scss-docs-end utils-object-fit + // Opacity utilities + // scss-docs-start utils-opacity + "opacity": ( + property: opacity, + values: ( + 0: 0, + 25: .25, + 50: .5, + 75: .75, + 100: 1, + ) + ), + // scss-docs-end utils-opacity + // scss-docs-start utils-overflow + "overflow": ( + property: overflow, + values: auto hidden visible scroll, + ), + "overflow-x": ( + property: overflow-x, + values: auto hidden visible scroll, + ), + "overflow-y": ( + property: overflow-y, + values: auto hidden visible scroll, + ), + // scss-docs-end utils-overflow + // scss-docs-start utils-display + "display": ( + responsive: true, + print: true, + property: display, + class: d, + values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none + ), + // scss-docs-end utils-display + // scss-docs-start utils-shadow + "shadow": ( + property: box-shadow, + class: shadow, + values: ( + null: var(--#{$prefix}box-shadow), + sm: var(--#{$prefix}box-shadow-sm), + lg: var(--#{$prefix}box-shadow-lg), + none: none, + ) + ), + // scss-docs-end utils-shadow + // scss-docs-start utils-focus-ring + "focus-ring": ( + css-var: true, + css-variable-name: focus-ring-color, + class: focus-ring, + values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring") + ), + // scss-docs-end utils-focus-ring + // scss-docs-start utils-position + "position": ( + property: position, + values: static relative absolute fixed sticky + ), + "top": ( + property: top, + values: $position-values + ), + "bottom": ( + property: bottom, + values: $position-values + ), + "start": ( + property: left, + class: start, + values: $position-values + ), + "end": ( + property: right, + class: end, + values: $position-values + ), + "translate-middle": ( + property: transform, + class: translate-middle, + values: ( + null: translate(-50%, -50%), + x: translateX(-50%), + y: translateY(-50%), + ) + ), + // scss-docs-end utils-position + // scss-docs-start utils-borders + "border": ( + property: border, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + 0: 0, + ) + ), + "border-top": ( + property: border-top, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + 0: 0, + ) + ), + "border-end": ( + property: border-right, + class: border-end, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + 0: 0, + ) + ), + "border-bottom": ( + property: border-bottom, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + 0: 0, + ) + ), + "border-start": ( + property: border-left, + class: border-start, + values: ( + null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), + 0: 0, + ) + ), + "border-color": ( + property: border-color, + class: border, + local-vars: ( + "border-opacity": 1 + ), + values: $utilities-border-colors + ), + "subtle-border-color": ( + property: border-color, + class: border, + values: $utilities-border-subtle + ), + "border-width": ( + property: border-width, + class: border, + values: $border-widths + ), + "border-opacity": ( + css-var: true, + class: border-opacity, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ) + ), + // scss-docs-end utils-borders + // Sizing utilities + // scss-docs-start utils-sizing + "width": ( + property: width, + class: w, + values: ( + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100%, + auto: auto + ) + ), + "max-width": ( + property: max-width, + class: mw, + values: (100: 100%) + ), + "viewport-width": ( + property: width, + class: vw, + values: (100: 100vw) + ), + "min-viewport-width": ( + property: min-width, + class: min-vw, + values: (100: 100vw) + ), + "height": ( + property: height, + class: h, + values: ( + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100%, + auto: auto + ) + ), + "max-height": ( + property: max-height, + class: mh, + values: (100: 100%) + ), + "viewport-height": ( + property: height, + class: vh, + values: (100: 100vh) + ), + "min-viewport-height": ( + property: min-height, + class: min-vh, + values: (100: 100vh) + ), + // scss-docs-end utils-sizing + // Flex utilities + // scss-docs-start utils-flex + "flex": ( + responsive: true, + property: flex, + values: (fill: 1 1 auto) + ), + "flex-direction": ( + responsive: true, + property: flex-direction, + class: flex, + values: row column row-reverse column-reverse + ), + "flex-grow": ( + responsive: true, + property: flex-grow, + class: flex, + values: ( + grow-0: 0, + grow-1: 1, + ) + ), + "flex-shrink": ( + responsive: true, + property: flex-shrink, + class: flex, + values: ( + shrink-0: 0, + shrink-1: 1, + ) + ), + "flex-wrap": ( + responsive: true, + property: flex-wrap, + class: flex, + values: wrap nowrap wrap-reverse + ), + "justify-content": ( + responsive: true, + property: justify-content, + values: ( + start: flex-start, + end: flex-end, + center: center, + between: space-between, + around: space-around, + evenly: space-evenly, + ) + ), + "align-items": ( + responsive: true, + property: align-items, + values: ( + start: flex-start, + end: flex-end, + center: center, + baseline: baseline, + stretch: stretch, + ) + ), + "align-content": ( + responsive: true, + property: align-content, + values: ( + start: flex-start, + end: flex-end, + center: center, + between: space-between, + around: space-around, + stretch: stretch, + ) + ), + "align-self": ( + responsive: true, + property: align-self, + values: ( + auto: auto, + start: flex-start, + end: flex-end, + center: center, + baseline: baseline, + stretch: stretch, + ) + ), + "order": ( + responsive: true, + property: order, + values: ( + first: -1, + 0: 0, + 1: 1, + 2: 2, + 3: 3, + 4: 4, + 5: 5, + last: 6, + ), + ), + // scss-docs-end utils-flex + // Margin utilities + // scss-docs-start utils-spacing + "margin": ( + responsive: true, + property: margin, + class: m, + values: map-merge($spacers, (auto: auto)) + ), + "margin-x": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: map-merge($spacers, (auto: auto)) + ), + "margin-y": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: map-merge($spacers, (auto: auto)) + ), + "margin-top": ( + responsive: true, + property: margin-top, + class: mt, + values: map-merge($spacers, (auto: auto)) + ), + "margin-end": ( + responsive: true, + property: margin-right, + class: me, + values: map-merge($spacers, (auto: auto)) + ), + "margin-bottom": ( + responsive: true, + property: margin-bottom, + class: mb, + values: map-merge($spacers, (auto: auto)) + ), + "margin-start": ( + responsive: true, + property: margin-left, + class: ms, + values: map-merge($spacers, (auto: auto)) + ), + // Negative margin utilities + "negative-margin": ( + responsive: true, + property: margin, + class: m, + values: $negative-spacers + ), + "negative-margin-x": ( + responsive: true, + property: margin-right margin-left, + class: mx, + values: $negative-spacers + ), + "negative-margin-y": ( + responsive: true, + property: margin-top margin-bottom, + class: my, + values: $negative-spacers + ), + "negative-margin-top": ( + responsive: true, + property: margin-top, + class: mt, + values: $negative-spacers + ), + "negative-margin-end": ( + responsive: true, + property: margin-right, + class: me, + values: $negative-spacers + ), + "negative-margin-bottom": ( + responsive: true, + property: margin-bottom, + class: mb, + values: $negative-spacers + ), + "negative-margin-start": ( + responsive: true, + property: margin-left, + class: ms, + values: $negative-spacers + ), + // Padding utilities + "padding": ( + responsive: true, + property: padding, + class: p, + values: $spacers + ), + "padding-x": ( + responsive: true, + property: padding-right padding-left, + class: px, + values: $spacers + ), + "padding-y": ( + responsive: true, + property: padding-top padding-bottom, + class: py, + values: $spacers + ), + "padding-top": ( + responsive: true, + property: padding-top, + class: pt, + values: $spacers + ), + "padding-end": ( + responsive: true, + property: padding-right, + class: pe, + values: $spacers + ), + "padding-bottom": ( + responsive: true, + property: padding-bottom, + class: pb, + values: $spacers + ), + "padding-start": ( + responsive: true, + property: padding-left, + class: ps, + values: $spacers + ), + // Gap utility + "gap": ( + responsive: true, + property: gap, + class: gap, + values: $spacers + ), + "row-gap": ( + responsive: true, + property: row-gap, + class: row-gap, + values: $spacers + ), + "column-gap": ( + responsive: true, + property: column-gap, + class: column-gap, + values: $spacers + ), + // scss-docs-end utils-spacing + // Text + // scss-docs-start utils-text + "font-family": ( + property: font-family, + class: font, + values: (monospace: var(--#{$prefix}font-monospace)) + ), + "font-size": ( + rfs: true, + property: font-size, + class: fs, + values: $font-sizes + ), + "font-style": ( + property: font-style, + class: fst, + values: italic normal + ), + "font-weight": ( + property: font-weight, + class: fw, + values: ( + lighter: $font-weight-lighter, + light: $font-weight-light, + normal: $font-weight-normal, + medium: $font-weight-medium, + semibold: $font-weight-semibold, + bold: $font-weight-bold, + bolder: $font-weight-bolder + ) + ), + "line-height": ( + property: line-height, + class: lh, + values: ( + 1: 1, + sm: $line-height-sm, + base: $line-height-base, + lg: $line-height-lg, + ) + ), + "text-align": ( + responsive: true, + property: text-align, + class: text, + values: ( + start: left, + end: right, + center: center, + ) + ), + "text-decoration": ( + property: text-decoration, + values: none underline line-through + ), + "text-transform": ( + property: text-transform, + class: text, + values: lowercase uppercase capitalize + ), + "white-space": ( + property: white-space, + class: text, + values: ( + wrap: normal, + nowrap: nowrap, + ) + ), + "word-wrap": ( + property: word-wrap word-break, + class: text, + values: (break: break-word), + rtl: false + ), + // scss-docs-end utils-text + // scss-docs-start utils-color + "color": ( + property: color, + class: text, + local-vars: ( + "text-opacity": 1 + ), + values: map-merge( + $utilities-text-colors, + ( + "muted": var(--#{$prefix}secondary-color), // deprecated + "black-50": rgba($black, .5), // deprecated + "white-50": rgba($white, .5), // deprecated + "body-secondary": var(--#{$prefix}secondary-color), + "body-tertiary": var(--#{$prefix}tertiary-color), + "body-emphasis": var(--#{$prefix}emphasis-color), + "reset": inherit, + ) + ) + ), + "text-opacity": ( + css-var: true, + class: text-opacity, + values: ( + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ) + ), + "text-color": ( + property: color, + class: text, + values: $utilities-text-emphasis-colors + ), + // scss-docs-end utils-color + // scss-docs-start utils-links + "link-opacity": ( + css-var: true, + class: link-opacity, + state: hover, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ) + ), + "link-offset": ( + property: text-underline-offset, + class: link-offset, + state: hover, + values: ( + 1: .125em, + 2: .25em, + 3: .375em, + ) + ), + "link-underline": ( + property: text-decoration-color, + class: link-underline, + local-vars: ( + "link-underline-opacity": 1 + ), + values: map-merge( + $utilities-links-underline, + ( + null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)), + ) + ) + ), + "link-underline-opacity": ( + css-var: true, + class: link-underline-opacity, + state: hover, + values: ( + 0: 0, + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ), + ), + // scss-docs-end utils-links + // scss-docs-start utils-bg-color + "background-color": ( + property: background-color, + class: bg, + local-vars: ( + "bg-opacity": 1 + ), + values: map-merge( + $utilities-bg-colors, + ( + "transparent": transparent, + "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)), + "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)), + ) + ) + ), + "bg-opacity": ( + css-var: true, + class: bg-opacity, + values: ( + 10: .1, + 25: .25, + 50: .5, + 75: .75, + 100: 1 + ) + ), + "subtle-background-color": ( + property: background-color, + class: bg, + values: $utilities-bg-subtle + ), + // scss-docs-end utils-bg-color + "gradient": ( + property: background-image, + class: bg, + values: (gradient: var(--#{$prefix}gradient)) + ), + // scss-docs-start utils-interaction + "user-select": ( + property: user-select, + values: all auto none + ), + "pointer-events": ( + property: pointer-events, + class: pe, + values: none auto, + ), + // scss-docs-end utils-interaction + // scss-docs-start utils-border-radius + "rounded": ( + property: border-radius, + class: rounded, + values: ( + null: var(--#{$prefix}border-radius), + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius), + 3: var(--#{$prefix}border-radius-lg), + 4: var(--#{$prefix}border-radius-xl), + 5: var(--#{$prefix}border-radius-xxl), + circle: 50%, + pill: var(--#{$prefix}border-radius-pill) + ) + ), + "rounded-top": ( + property: border-top-left-radius border-top-right-radius, + class: rounded-top, + values: ( + null: var(--#{$prefix}border-radius), + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius), + 3: var(--#{$prefix}border-radius-lg), + 4: var(--#{$prefix}border-radius-xl), + 5: var(--#{$prefix}border-radius-xxl), + circle: 50%, + pill: var(--#{$prefix}border-radius-pill) + ) + ), + "rounded-end": ( + property: border-top-right-radius border-bottom-right-radius, + class: rounded-end, + values: ( + null: var(--#{$prefix}border-radius), + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius), + 3: var(--#{$prefix}border-radius-lg), + 4: var(--#{$prefix}border-radius-xl), + 5: var(--#{$prefix}border-radius-xxl), + circle: 50%, + pill: var(--#{$prefix}border-radius-pill) + ) + ), + "rounded-bottom": ( + property: border-bottom-right-radius border-bottom-left-radius, + class: rounded-bottom, + values: ( + null: var(--#{$prefix}border-radius), + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius), + 3: var(--#{$prefix}border-radius-lg), + 4: var(--#{$prefix}border-radius-xl), + 5: var(--#{$prefix}border-radius-xxl), + circle: 50%, + pill: var(--#{$prefix}border-radius-pill) + ) + ), + "rounded-start": ( + property: border-bottom-left-radius border-top-left-radius, + class: rounded-start, + values: ( + null: var(--#{$prefix}border-radius), + 0: 0, + 1: var(--#{$prefix}border-radius-sm), + 2: var(--#{$prefix}border-radius), + 3: var(--#{$prefix}border-radius-lg), + 4: var(--#{$prefix}border-radius-xl), + 5: var(--#{$prefix}border-radius-xxl), + circle: 50%, + pill: var(--#{$prefix}border-radius-pill) + ) + ), + // scss-docs-end utils-border-radius + // scss-docs-start utils-visibility + "visibility": ( + property: visibility, + class: null, + values: ( + visible: visible, + invisible: hidden, + ) + ), + // scss-docs-end utils-visibility + // scss-docs-start utils-zindex + "z-index": ( + property: z-index, + class: z, + values: $zindex-levels, + ) + // scss-docs-end utils-zindex + ), + $utilities +); |