Page MenuHomeWickedGov Phorge
Files F4141093

mixins.less
No OneTemporary
Actions

Size
7 KB
Referenced Files
None
Subscribers
None

mixins.less
View Options

/*
* Citizen - Mixins
* https://starcitizen.tools
*/
@import 'variables.less';
.mixin-citizen-opaque-background( @surface: 1 ) {
background: ~'oklch( var( --color-surface-@{surface}-oklch__l ) var( --color-surface-@{surface}-oklch__c ) var( --color-progressive-oklch__h ) / var( --opacity-glass ) )';
@supports not ( color: oklch( 100% 0 0 ) ) {
background: ~'hsl( var( --color-surface-@{surface}-hsl__h ), var( --color-surface-@{surface}-hsl__s ), var( --color-surface-@{surface}-hsl__l ) / var( --oapcity-glass ) )';
}
}
.mixin-citizen-frosted-glass-simple( @surface: 1 ) {
.mixin-citizen-opaque-background( @surface );
@supports ( backdrop-filter: blur( 16px ) ) or ( -webkit-backdrop-filter: blur( 16px ) ) {
-webkit-backdrop-filter: var( --backdrop-filter-frosted-glass );
backdrop-filter: var( --backdrop-filter-frosted-glass );
}
}
/**
* Frosted glass effect
* @see https://www.joshwcomeau.com/css/backdrop-filter
*/
.mixin-citizen-frosted-glass( @backdropClass, @surface: 1 ) {
.mixin-citizen-opaque-background( @surface );
.@{backdropClass} {
position: absolute;
inset: 0;
z-index: @z-index-bottom;
overflow: hidden;
pointer-events: none;
transition: none !important; // cancel out card content transition
}
@supports ( backdrop-filter: blur( 16px ) ) or ( -webkit-backdrop-filter: blur( 16px ) ) {
.@{backdropClass} {
// Backdrop
&::before {
position: absolute;
inset: 0;
content: '';
background: ~'linear-gradient( to bottom, var( --color-surface-@{surface} ), transparent 50% )';
-webkit-backdrop-filter: var( --backdrop-filter-frosted-glass );
backdrop-filter: var( --backdrop-filter-frosted-glass );
}
}
}
@supports ( mask-image: none ) or ( -webkit-mask-image: none ) {
.@{backdropClass} {
&::before {
height: 200%;
-webkit-mask-image: linear-gradient( to bottom, #000 0% 50%, transparent 50% 100% );
mask-image: linear-gradient( to bottom, #000 0% 50%, transparent 50% 100% );
}
}
}
}
// Header card popups
.mixin-citizen-header-card( @position ) {
right: 0;
bottom: 100%;
left: 0;
max-height: var( --header-card-maxheight );
@media ( min-width: @min-width-breakpoint-tablet ) {
& when (@position =start) {
right: unset;
}
& when (@position =end) {
left: unset;
}
}
@media ( min-width: @min-width-breakpoint-desktop ) {
right: unset;
left: 100%;
& when (@position =start) {
top: 0;
bottom: unset;
}
& when (@position =end) {
bottom: 0;
}
}
}
.mixin-citizen-sticky-header-element() {
top: var( --height-sticky-header ) !important;
transition-timing-function: var( --transition-timing-function-ease );
transition-duration: var( --transition-duration-medium );
transition-property: top;
}
.mixin-citizen-sticky-header-background() {
&::before {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: @z-index-bottom;
display: block;
height: 100%;
content: '';
background-color: var( --color-surface-0 );
filter: opacity( 0.9 );
-webkit-backdrop-filter: var( --backdrop-filter-frosted-glass );
backdrop-filter: var( --backdrop-filter-frosted-glass );
}
}
.mixin-citizen-sticky-header(@bottomBorder: true, @zIndex: true) {
position: -webkit-sticky;
position: sticky;
.mixin-citizen-sticky-header-element;
.mixin-citizen-sticky-header-background;
& when (@bottomBorder ) {
box-shadow: 0 1px 0 0 var( --border-color-base );
}
& when (@zIndex ) {
z-index: @z-index-sticky;
}
}
// To hide objects, but keep them accessible for screen-readers
.mixin-citizen-screen-reader-only() {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
white-space: nowrap;
clip-path: inset( 50% );
}
// Button Styles
.mixin-citizen-button-progressive() {
color: var( --color-inverted-primary ) !important;
background-color: var( --background-color-progressive );
&:hover {
background-color: var( --background-color-progressive--hover );
}
&:active {
background-color: var( --background-color-progressive--active );
}
}
.mixin-citizen-button-destructive() {
color: var( --color-inverted-fixed ) !important;
background-color: var( --background-color-destructive );
&:hover {
background-color: var( --background-color-destructive--hover );
}
&:active {
background-color: var( --background-color-destructive--active );
}
}
// This is used to override MW dark mode styles
// if they have hardcoded value instead of CSS variable
.mixin-citizen-css-theme-clientpref-all( @prop, @value ) {
@{prop}: @value;
@media screen {
html.skin-theme-clientpref-night & {
@{prop}: @value;
}
}
@media screen and ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os & {
@{prop}: @value;
}
}
}
// Transform black into given color
// From https://stackoverflow.com/a/73390109/10624167
.recolor(@color ) {
@r: red(@color ) / 255;
@g: green(@color ) / 255;
@b: blue(@color ) / 255;
@a: alpha(@color );
// grayscale fallback if SVG from data url is not supported
@lightness: lightness(@color );
filter: saturate( 0% ) brightness( 0% ) invert( @lightness ) opacity( @a );
// color filter
@svg-filter-id: 'recolor';
filter: url( ';data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="@{svg-filter-id}" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="0 0 0 0 @{r} 0 0 0 0 @{g} 0 0 0 0 @{b} 0 0 0 @{a} 0"/></filter></svg> #@{svg-filter-id}' );
}
.citizen-cdx-mixin-link-base-overrides() {
// We don't want to use color-progressive for link colors
color: var( --color-link );
&:hover {
color: var( --color-link--hover );
}
&:active {
color: var( --color-link--active );
}
// FIX: Visited hover color is missing in MW 1.43
&:visited:hover {
color: var( --color-visited--hover );
}
&:visited:active {
color: var( --color-visited--active );
}
}
// Based on Codex 2.0 typography tokens from T363845
// TODO: Revisit when T333890 is resolved
.mixin-citizen-font-styles( @type ) {
& when ( @type = 'heading-1' ) {
font-size: var( --font-size-xxx-large );
font-weight: var( --font-weight-semi-bold );
line-height: var( --line-height-xxx-large );
}
& when ( @type = 'heading-2' ) {
font-size: var( --font-size-xx-large );
font-weight: var( --font-weight-semi-bold );
line-height: var( --line-height-xx-large );
}
& when ( @type = 'heading-3' ) {
font-size: var( --font-size-x-large );
font-weight: var( --font-weight-semi-bold );
line-height: var( --line-height-x-large );
}
& when ( @type = 'heading-4' ) {
font-size: var( --font-size-large );
font-weight: var( --font-weight-semi-bold );
line-height: var( --line-height-large );
}
& when ( @type = 'body' ) {
font-size: var( --font-size-medium );
// font-weight: var( --font-weight-normal ); - No need to specify
line-height: var( --line-height-medium );
}
& when ( @type = 'small' ) {
font-size: var( --font-size-small );
// font-weight: var( --font-weight-normal ); - No need to specify
line-height: var( --line-height-small );
}
& when ( @type = 'overline' ) {
font-family: var( --font-family-overline );
font-size: var( --font-size-overline );
font-weight: var( --font-weight-overline );
line-height: var( --line-height-overline );
text-transform: var( --text-transform-overline );
letter-spacing: var( --letter-spacing-overline );
}
}
// Used to retrofit input element into Codex styles
.mixin-citizen-cdx-input() {
min-height: @min-size-interactive-pointer;
padding: @spacing-25 @spacing-50;
font-size: @font-size-medium;
line-height: @line-height-small;
border-radius: @border-radius-base;
box-shadow: @box-shadow-inset-small @box-shadow-color-transparent;
transition-duration: @transition-duration-medium;
transition-property: @transition-property-base;
&:focus {
outline: @outline-base--focus;
border-color: @border-color-progressive--focus;
box-shadow: @box-shadow-inset-small @box-shadow-color-progressive--focus;
}
}

File Metadata

Mime Type
text/plain
Expires
Wed, Aug 19, 15:48 (3 w, 6 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
71/f1/458727525e9f26ad58fe59dfbb09
Default Alt Text
mixins.less (7 KB)

Event Timeline