Skip to content

Commit

Permalink
fix(core): 🐛 avoid sr-only text clipping during transform
Browse files Browse the repository at this point in the history
  • Loading branch information
@alistair3149
alistair3149 committed Jul 3, 2024
1 parent 3bbe2f4 commit 111607e
Showing 1 changed file with 56 additions and 51 deletions.
107 changes: 56 additions & 51 deletions resources/mixins.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,25 @@

@import 'variables.less';

.citizen-card( @border-radius: true ) {
background-color: var( --color-surface-1 );
border: 1px solid var( --border-color-base );
box-shadow: var( --box-shadow-dialog );
.citizen-card(@border-radius: true) {
background-color: var(--color-surface-1);
border: 1px solid var(--border-color-base);
box-shadow: var(--box-shadow-dialog);

& when ( @border-radius ) {
border-radius: var( --border-radius--medium );
& when (@border-radius ) {
border-radius: var(--border-radius--medium);
}
}

// Collaspe animation setup
.citizen-card-hide( @position, @axis: '', @fadeChildren: true ) {
.citizen-card-hide(@position, @axis: '', @fadeChildren: true) {
pointer-events: none;
opacity: 0;
transform: ~'scale@{axis}( 0 )';
transform:~'scale@{axis}( 0 )';
transform-origin: @position;

& when ( @fadeChildren ) {
> * {
& when (@fadeChildren ) {
>* {
opacity: 0;
}
}
Expand All @@ -32,16 +32,16 @@
// Expand animiation setup
// When using fadeChildren, the child elements need to have
// opacity: 0 set manually
.citizen-card-show( @fadeChildren: true ) {
.citizen-card-show(@fadeChildren: true) {
z-index: @z-index-overlay;
pointer-events: auto;
opacity: 1;
// HACK: So that visiblity won't wait 250ms to become visible
transition-delay: 0ms;
transform: none;

& when ( @fadeChildren ) {
> * {
& when (@fadeChildren ) {
>* {
.citizen-card-content-show;
}
}
Expand All @@ -51,58 +51,59 @@
// But GTFO instantly when they close the menu
.citizen-card-content-show() {
opacity: 1;
transition: var( --transition-menu );
transition: var(--transition-menu);
transition-property: opacity;
}

// Transition animation
.citizen-card-transition() {
transition: var( --transition-menu );
transition: var(--transition-menu);
transition-property: transform, opacity;
}

// Header card popups
.citizen-header-card( @position ) {
.citizen-header-card(@position ) {
position: absolute;
right: 0;
bottom: 100%;
left: 0;
max-height: var( --header-card-maxheight );
max-height: var(--header-card-maxheight);

@media ( min-width: @min-width-breakpoint-tablet ) {
& when ( @position = start ) {
@media (min-width: @min-width-breakpoint-tablet ) {
& when (@position =start) {
right: unset;
}

& when ( @position = end ) {
& when (@position =end) {
left: unset;
}
}

@media ( min-width: @min-width-breakpoint-desktop ) {
@media (min-width: @min-width-breakpoint-desktop ) {
right: unset;
left: 100%;
& when ( @position = start ) {

& when (@position =start) {
top: 0;
bottom: unset;
}

& when ( @position = end ) {
& when (@position =end) {
bottom: 0;
}
}
}

.citizen-sticky-header( @topOffset: 0, @bottomBorder: true, @zIndex: true ) {
.citizen-sticky-header(@topOffset: 0, @bottomBorder: true, @zIndex: true) {
position: -webkit-sticky;
position: sticky;
top: @topOffset;

& when ( @bottomBorder ) {
border-bottom: 1px solid var( --border-color-base );
& when (@bottomBorder ) {
border-bottom: 1px solid var(--border-color-base);
}

& when ( @zIndex ) {
& when (@zIndex ) {
z-index: @z-index-page-header;
}

Expand All @@ -116,21 +117,25 @@
z-index: -1;
height: 100%;
content: '';
background-color: var( --color-surface-0 );
filter: opacity( 0.9 );
backdrop-filter: saturate( 50% ) blur( 16px );
background-color: var(--color-surface-0);
filter: opacity(0.9);
backdrop-filter: saturate(50%) blur(16px);
}
}

// To hide objects, but keep them accessible for screen-readers
.sr-only() {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
transform: scale( 0 );
white-space: nowrap;
width: 1px;
}

// Set content to be at the center
.content-center() {
max-width: var( --width-layout );
max-width: var(--width-layout);
margin-right: auto;
margin-left: auto;
}
Expand Down Expand Up @@ -167,54 +172,54 @@

// Button Styles
.button-blue() {
color: var( --color-inverted-primary ) !important;
background-color: var( --color-progressive );
color: var(--color-inverted-primary) !important;
background-color: var(--color-progressive);

.citizen-ui-icon::before {
filter: var( --filter-invert-primary );
filter: var(--filter-invert-primary);
opacity: 1;
}
}

.button-blue-hover() {
background-color: var( --color-progressive--hover );
background-color: var(--color-progressive--hover);
}

.button-blue-active() {
background-color: var( --color-progressive--active );
background-color: var(--color-progressive--active);
}

.button-red() {
color: var( --color-inverted-fixed ) !important;
background-color: var( --color-destructive );
color: var(--color-inverted-fixed) !important;
background-color: var(--color-destructive);

.citizen-ui-icon::before {
filter: var( --filter-invert-fixed );
filter: var(--filter-invert-fixed);
opacity: 1;
}
}

.button-red-hover() {
background-color: var( --color-destructive--hover );
background-color: var(--color-destructive--hover);
}

.button-red-active() {
background-color: var( --color-destructive--active );
background-color: var(--color-destructive--active);
}

// 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 );
.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 );
@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}' );
}
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}');
}

0 comments on commit 111607e

Please sign in to comment.