EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3442 from NoelDeMartin/MOBILE-4081 

MOBILE-4081: Hide network error title
main
Dani Palou 2022-11-14 12:28:36 +01:00 committed by GitHub
parent a1dc1ec631 ead429afaf
commit 58cf25135c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 67 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/core/components/combobox/combobox.scss
View File

@ -121,15 +121,7 @@ ion-button {
text-overflow: ellipsis;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
@include sr-only();
}
&.ion-activated {

11
src/theme/bootstrap.scss
View File

@ -1,14 +1,7 @@
// Text for accessibility, hidden from the view.
.sr-only, .accesshide {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
@include sr-only();
display: block !important;
}

109
src/theme/helpers/custom.mixins.scss
View File

@ -11,63 +11,62 @@
// --------------------------------------------------------------------------------------------
@function get-color-shade-percent($color, $percent: 48%) {
@return mix(#000, $color, $percent);
}
}
// Mixes a color with white to create its tint.
// Default to bootstrap level -10.
// --------------------------------------------------------------------------------------------
@function get-color-tint-percent($color, $percent: 80%) {
// Mixes a color with white to create its tint.
// Default to bootstrap level -10.
// --------------------------------------------------------------------------------------------
@function get-color-tint-percent($color, $percent: 80%) {
@return mix(#fff, $color, $percent);
}
}
// Ionic Colors
// --------------------------------------------------
// Generates the color classes and variables based on the
// colors map
// Ionic Colors
// --------------------------------------------------
// Generates the color classes and variables based on the
// colors map
@mixin generate-color($color-name, $colors, $theme) {
$color-themes: map-get($colors, $color-name);
$base: map-get($color-themes, $theme);
@mixin generate-color($color-name, $colors, $theme) {
$color-themes: map-get($colors, $color-name);
$base: map-get($color-themes, $theme);
@if $theme == 'dark' {
$base: mix(map-get($color-themes, 'light'), white, 80%) !default;
}
@if $theme == 'dark' {
$base: mix(map-get($color-themes, 'light'), white, 80%) !default;
}
@include generate-color-variants($color-name, $base);
}
@include generate-color-variants($color-name, $base);
}
@mixin generate-color-variants($color-name, $base) {
$contrast: get_contrast_color($base);
$shade: get-color-shade-percent($base);
$tint: get-color-tint-percent($base);
@mixin generate-color-variants($color-name, $base) {
$contrast: get_contrast_color($base);
$shade: get-color-shade-percent($base);
$tint: get-color-tint-percent($base);
--#{$color-name}: #{$base};
--#{$color-name}-shade: #{$shade};
--#{$color-name}-tint: #{$tint};
--#{$color-name}-contrast: #{$contrast};
--#{$color-name}: #{$base};
--#{$color-name}-shade: #{$shade};
--#{$color-name}-tint: #{$tint};
--#{$color-name}-contrast: #{$contrast};
// Internal ionic use only.
--ion-color-#{$color-name}: var(--#{$color-name});
--ion-color-#{$color-name}-base: var(--ion-color-#{$color-name});
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)};
--ion-color-#{$color-name}-contrast: #{$contrast};
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
--ion-color-#{$color-name}-shade: #{$shade};
--ion-color-#{$color-name}-tint: #{$tint};
// Internal ionic use only.
--ion-color-#{$color-name}: var(--#{$color-name});
--ion-color-#{$color-name}-base: var(--ion-color-#{$color-name});
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list($base)};
--ion-color-#{$color-name}-contrast: #{$contrast};
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list($contrast)};
--ion-color-#{$color-name}-shade: #{$shade};
--ion-color-#{$color-name}-tint: #{$tint};
.ion-color-#{$color-name} {
--ion-color: var(--ion-color-#{$color-name});
--ion-color-base: var(--ion-color-#{$color-name}-base);
--ion-color-rgb: var(--ion-color-#{$color-name}-rgb);
--ion-color-contrast: var(--ion-color-#{$color-name}-contrast);
--ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb);
--ion-color-shade: var(--ion-color-#{$color-name}-shade);
--ion-color-tint: var(--ion-color-#{$color-name}-tint);
}
}
.ion-color-#{$color-name} {
--ion-color: var(--ion-color-#{$color-name});
--ion-color-base: var(--ion-color-#{$color-name}-base);
--ion-color-rgb: var(--ion-color-#{$color-name}-rgb);
--ion-color-contrast: var(--ion-color-#{$color-name}-contrast);
--ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb);
--ion-color-shade: var(--ion-color-#{$color-name}-shade);
--ion-color-tint: var(--ion-color-#{$color-name}-tint);
}
}
@mixin core-focus() {
@mixin core-focus() {
outline: none;
position: relative;
&::after {
@ -78,9 +77,9 @@
z-index: 1;
@include core-focus-style();
}
}
}
@mixin core-focus-style() {
@mixin core-focus-style() {
box-shadow: inset 0 0 var(--a11y-focus-width) 1px var(--a11y-focus-color);
// Thicker option:
// border: var(--a11y-focus-width) solid var(--a11y-focus-color);
@ -96,6 +95,18 @@
transition: $transitions;
}
@mixin sr-only() {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/**
* Same as item-push-svg-url but admits flip-rtl
*/
@ -262,7 +273,7 @@
@return if($yiq >= 128, $dark, $light);
}
// WCAG contrast algorythm
// WCAG contrast algorithm
@function check-contrast($foreground, $background) {
$foregroundLumiance: luminance($foreground);
$backgroundLuminance: luminance($background);

4
src/theme/theme.base.scss
View File

@ -436,6 +436,10 @@ div.core-iframe-network-error {
background: url("/assets/fonts/font-awesome/solid/wifi.svg") no-repeat 50% 50%;
margin: 25px auto;
h2 {
@include sr-only();
}
&::after {
content: " ";
position: absolute;