arbetsformedlingen/mina-sidor-fa-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added some digi-core components and removed some old/unused css

Browse Source
This commit is contained in:
Erik Tiekstra
2021-03-23 15:47:53 +01:00
committed by Erik Tiekstra
parent 507a61a2ef
commit f7537671f3
49 changed files with 106 additions and 561 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/dafa-web/src/styles/functions/_u.scss
View File

@@ -1 +0,0 @@
@import '~@af/sass/v2/layout/functions/u';

16
apps/dafa-web/src/styles/mixins/_a11y.scss
View File

@@ -1,5 +1,13 @@
@import '~@af/sass/v2/a11y/mixins/a11y__sr-only';
@mixin af__a11y-sr-only {
@include a11y__sr-only;
@mixin dafa__a11y-sr-only {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}

49
apps/dafa-web/src/styles/mixins/_button.scss
View File

@@ -1,49 +0,0 @@
@import 'variables/colors';
@import 'variables/gutters';
@mixin dafa__base-button {
position: relative;
border-width: 0;
background-color: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
cursor: pointer;
font-size: 0.875rem;
padding: $af__gutter-xs $af__gutter-m;
}
@mixin dafa__link-as-button {
text-decoration: none !important; // Needs important to override style from default anchor tag.
&:hover {
text-decoration: none !important; // Needs important to override style from default anchor tag.
}
}
@mixin dafa__white-button-with-border {
@include dafa__base-button;
background-color: $af__color-background-white;
color: $af__color-primary !important; // Needs important to override style from default anchor tag.
border: 1px solid $af__color-primary;
border-radius: 5px;
&:hover {
background-color: #f1f8fe;
color: $af__color-primary !important; // Needs important to override style from default anchor tag.
}
}
@mixin dafa__button-as-link($dark: false) {
background-color: transparent;
border-width: 0;
padding: 0;
margin: 0;
color: if($dark, $dafa__color-link-light, $af__color-link);
&:hover {
color: if($dark, $dafa__color-link-light-active, $af__color-link-active);
text-decoration: underline;
}
}

65
apps/dafa-web/src/styles/mixins/_form.scss
View File

@@ -1,65 +0,0 @@
@import '~@af/sass/v2/form/mixins/form__checkbox';
@import '~@af/sass/v2/form/mixins/form__checkbox-check';
@import '~@af/sass/v2/form/mixins/form__checkbox-base';
@import '~@af/sass/v2/form/mixins/form__form-field--focus';
@import '~@af/sass/v2/form/mixins/form__form-field--disabled';
@import '~@af/sass/v2/form/mixins/form__select-input';
@import '~@af/sass/v2/form/mixins/form__select-arrow';
@import '~@af/sass/v2/form/mixins/form__radiobutton';
@import 'variables/colors';
@import 'variables/gutters';
@import 'variables/typography';
@mixin af__form-checkbox($secondary: false, $disabled: false) {
@include form__checkbox($secondary, $disabled);
}
@mixin af__form-checkbox-check($disabled: false) {
@include form__checkbox-check($disabled);
}
@mixin af__form-checkbox-base {
@include form__checkbox-base;
}
@mixin af__form-field-focus {
@include form__form-field--focus;
}
@mixin af__form-field-disabled {
@include form__form-field--disabled;
}
@mixin af__form-select-input {
@include form__select-input;
}
@mixin af__form-select-arrow($disabled: false) {
@include form__select-arrow($disabled);
}
@mixin af__form-radiobutton {
@include form__radiobutton;
}
@mixin dafa__fieldset-reset($legendAsHeading: true) {
margin: 0;
padding: 0;
border-width: 0;
legend {
position: relative;
text-align: left;
@if $legendAsHeading {
width: 100%;
display: flex;
align-items: center;
padding-bottom: $af__gutter-xs;
margin: 0;
font-weight: $af__font-weight-bold;
font-size: $af__font-size-s;
border-bottom: 1px solid $af__color-border-light;
}
}
}

8
apps/dafa-web/src/styles/mixins/_gutter.scss
View File

@@ -1,8 +0,0 @@
@import 'variables/gutters';
@mixin dafa__option-gutter-reset {
line-height: unset;
height: auto;
padding-top: $af__gutter-xs;
padding-bottom: $af__gutter-xs;
}

20
apps/dafa-web/src/styles/mixins/_link.scss
View File

@@ -1,20 +0,0 @@
@import 'variables/colors';
@mixin dafa__link-style($with-hover: true) {
padding: 0;
cursor: pointer;
color: $af__color-link;
text-align: left;
white-space: normal;
@if $with-hover {
&:hover {
@include dafa__link-hover-style();
}
}
}
@mixin dafa__link-hover-style {
color: $af__color-link-active;
text-decoration: underline;
}

7
apps/dafa-web/src/styles/mixins/_ribbon.scss
View File

@@ -1,7 +0,0 @@
$ribbon-position: 0.5rem;
@mixin dafa__ribbon-wrapper {
position: absolute;
top: $ribbon-position * 2;
right: -$ribbon-position;
}

23
apps/dafa-web/src/styles/mixins/_typography.scss
View File

@@ -1,23 +0,0 @@
@import '~@af/sass/v2/typography/mixins/typography__text';
@import 'functions/u';
@mixin af__typography-text {
@include typography__text($compressed: true, $unthemable: true);
}
@mixin dafa__typography-ornament {
&::after {
content: '';
display: block;
margin-top: u(6);
height: u(1.4);
max-width: u(38);
background: $ui__color--primary;
@media (min-width: $layout__breakpoint--l) {
height: u(2);
width: 100%;
max-width: u(44);
}
}
}

5
apps/dafa-web/src/styles/mixins/ie11.scss
View File

@@ -1,5 +0,0 @@
@mixin ie11 {
@media all and (-ms-high-contrast: none) {
@content;
}
}

62
apps/dafa-web/src/styles/styles.scss
View File

@@ -1,12 +1,9 @@
@import 'variables/colors';
@import 'variables/gutters';
@import 'variables/typography';
@import '~@af/digi-core/src/global/styles/digi';
@import 'mixins/a11y';
@import 'mixins/button';
@import 'mixins/icon';
* {
font-family: $af__font-family;
font-family: var(--digi--typography--font-family);
box-sizing: border-box;
::before,
@@ -17,36 +14,20 @@
body {
margin: 0;
font-weight: $af__font-weight-normal;
}
button {
@include dafa__base-button;
font-weight: var(--digi--typography--font-weight);
}
strong {
font-weight: $af__font-weight-semi-bold;
}
.af__a11y-sr-only {
@include af__a11y-sr-only;
font-weight: var(--digi--typography--font-weight--semibold);
}
.dafa {
&__digi-ng-icon {
@include dafa__digi-ng-icon;
&--right-margin {
margin-right: $af__gutter-s;
}
&--left-margin {
margin-left: $af__gutter-m;
}
&__a11y-sr-only {
@include dafa__a11y-sr-only;
}
&__highlight-characters {
background-color: transparent;
font-weight: $af__font-weight-bold;
&__digi-icon {
display: inline-flex;
}
&__link {
@@ -54,24 +35,15 @@ strong {
align-items: center;
&--with-icon {
gap: $af__gutter-xs;
}
}
}
// @af/digi-ng overrides
.digi-ng-typography-icon-text__icon {
display: inline-flex;
}
@media print {
* {
color: $af__color-text-dark !important;
}
.dafa {
&__hide-on-print {
display: none !important;
gap: var(--digi--layout--gutter--xs);
}
&--ignore-visited:visited {
color: var(--digi--typography--color--link);
&:hover {
color: var(--digi--typography--color--link--active);
}
}
}
}

3
apps/dafa-web/src/styles/variables/_border-radius.scss
View File

@@ -1,3 +0,0 @@
@import '~@af/sass/v2/ui/variables/ui__borders';
$af__border-radius: $ui__border-radius--rounded;

5
apps/dafa-web/src/styles/variables/_box-shadow.scss
View File

@@ -1,5 +0,0 @@
@import '~@af/sass/v2/ui/variables/ui__variables';
@import '~@af/sass/v2/ui/variables/ui__shadows';
$af__box-shadow: $ui__box-shadow--elevated;
$af__box-shadow-interactive-focus-outline: $ui__shadow--interactive-focus-outline;

14
apps/dafa-web/src/styles/variables/_breakpoints.scss
View File

@@ -1,13 +1 @@
@import '~@af/sass/v2/layout/variables/layout__variables';
// AF variables
$af__breakpoint-s: $layout__breakpoint--s; // 576px
$af__breakpoint-s-below: $af__breakpoint-s - 1; // 575px
$af__breakpoint-m: $layout__breakpoint--m; // 768px
$af__breakpoint-m-below: $af__breakpoint-m - 1; // 767px
$af__breakpoint-l: $layout__breakpoint--l; // 992px
$af__breakpoint-l-below: $af__breakpoint-l - 1; // 991px
$af__breakpoint-xl: $layout__breakpoint--xl; // 1200px
$af__breakpoint-xl-below: $af__breakpoint-xl - 1; // 1199px
// Local variables
@import '~@af/digi-core/src/global/styles/layout/variables/layout__variables';

71
apps/dafa-web/src/styles/variables/_colors.scss
View File

@@ -1,71 +1,6 @@
@import '~@af/sass/v2/ui/variables/ui__colors';
@import '~@af/sass/v2/typography/variables/typography__variables';
@import '~@af/digi-core/src/global/styles/ui/variables/ui__variables';
// AF variables
$af__color-primary: $ui__color--primary;
$af__color-secondary: $ui__color--secondary;
$af__color-complementary: $ui__color--complementary;
$af__color-complementary-alt: $ui__color--complementary-alt;
$af__color-interactive: $ui__color--interactive;
$af__color--background-alt-secondary: $ui__color--background-alt-secondary;
$af__color-info: $ui__color--informative;
$af__color-success: $ui__color--success;
$af__color-danger: $ui__color--danger;
$af__color-warning: $ui__color--warning;
$af__color-approved: $ui__color--approved;
$af__color-action-needed: $ui__color--action-needed;
$af__color-denied: $ui__color--denied;
$af__color-missing: $ui__color--missing;
$af__color-text-light: $typography__color--text-light;
$af__color-text-dimmed: $typography__color--text-dimmed;
$af__color-text-dimmed-alt: $typography__color--text-dimmed-alt;
$af__color-text: $typography__color--text;
$af__color-text-dark: $typography__color--text-dark;
$af__color-text-disabled: $typography__color--text-disabled;
$af__color-link: $typography__color--link;
$af__color-link-active: $typography__color--link-active;
$af__color-link-visited: $typography__color--link-visited;
$af__color-background-white: $ui__color--background;
$af__color-background-light-gray: $ui__color--background-alt;
$af__color-background-gray: $ui__color--background-alt-secondary;
$af__color-background-dark-gray: $ui__color--background-off;
$af__color-background-dark: $ui__color--background-dark;
$af__color-background-alt-tertiary: $ui__color--background-alt-tertiary;
$af__color-border: $ui__color--border;
$af__color-border-dark: $ui__color--border-dark;
$af__color-border-light: $ui__color--border-light;
$af__color-separator: $ui__color--separator;
$af__color-background-warning: $ui__color--yellow-light;
$af__color-disabled: $ui__color--disabled;
// AF DIGI Variables
$digi--ui--color--primary-light: lighten($digi--ui--color--primary, 10%);
// Local variables
$dafa__color-pink: #d43372;
$dafa__color-primary-20: #ccccde;
$dafa__color-link-light: $af__color-text-light;
$dafa__color-link-light-active: darken($af__color-text-light, 10%);
$dafa__color-fub: #666666;
$dafa__color-fub-dark: darken($dafa__color-fub, 30%);
$dafa__color-fub-text: $af__color-text-light;
$dafa__color-aub: #1616b2;
$dafa__color-aub-dark: darken($dafa__color-aub, 30%);
$dafa__color-aub-text: $af__color-text-light;
$dafa__color-aub-test: #058470;
$dafa__color-aub-test-dark: darken($dafa__color-aub-test, 30%);
$dafa__color-aub-test-text: $af__color-text-light;
$dafa__color-folkhogskola: #d43372;
$dafa__color-folkhogskola-dark: darken($dafa__color-folkhogskola, 30%);
$dafa__color-folkhogskola-text: $af__color-text-light;
$dafa__color-rek: #fddc41;
$dafa__color-rek-dark: darken($dafa__color-rek, 30%);
$dafa__color-rek-text: $af__color-text-dark;
$dafa__color-anstalt: #e21c50;
$dafa__color-anstalt-dark: darken($dafa__color-anstalt, 30%);
$dafa__color-anstalt-text: $af__color-text-light;

10
apps/dafa-web/src/styles/variables/_containers.scss
View File

@@ -1,10 +0,0 @@
@import '~@af/sass/v2/layout/variables/layout__variables';
// AF variables
$af__container-width-xs: $layout__container--width-xs;
$af__container-width-s: $layout__container--width-s;
$af__container-width-m: $layout__container--width-m;
$af__container-width-l: $layout__container--width-l;
$af__container-width-xl: $layout__container--width-xl;
// Local variables

9
apps/dafa-web/src/styles/variables/_form.scss
View File

@@ -1,9 +0,0 @@
@import '~@af/sass/v2/ui/variables/ui__variables';
// AF variables
$af__form-input-height: $ui__input-height;
$af__form-input-height-s: $ui__input-height--s;
$af__form-input-height-l: $ui__input-height--l;
$af__form-input-border: $ui__input-border; // 1px solid $ui__color--border
// Local variables

14
apps/dafa-web/src/styles/variables/_gutters.scss
View File

@@ -1,14 +0,0 @@
@import '~@af/sass/v2/layout/variables/layout__variables';
@import '~@af/sass/v2/layout/functions/u';
// AF variables
$af__gutter-goliath: u(15); // 75px
$af__gutter-xxl: u(7); // 35px
$af__gutter-xl: u(5); // 25px
$af__gutter-l: $layout__gutter--l; // 20px
$af__gutter-m: $layout__gutter; // 15px
$af__gutter-s: $layout__gutter--s; // 10px
$af__gutter-xs: $layout__gutter--xs; // 5px
$af__gutter-xxs: $layout__gutter--xxs; // 2.5px
// Local variables

4
apps/dafa-web/src/styles/variables/_shadows.scss
View File

@@ -1,4 +0,0 @@
@import '~@af/sass/v2/ui/variables/ui__shadows';
// AF variables
$af__shadow-base: $ui__shadow--shadow-base-outline;

28
apps/dafa-web/src/styles/variables/_typography.scss
View File

@@ -1,28 +0,0 @@
@import '~@af/sass/v2/typography/variables/typography__variables';
// AF variables
$af__font-weight-normal: $typography__font-weight; // 400
$af__font-weight-semi-bold: $typography__font-weight--semibold; // 600
$af__font-weight-bold: $typography__font-weight--bold; // 700
$af__font-family: $typography__font-family; // 'Open sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
$af__font-size: $typography__font-size; // 1rem
$af__font-size-xs: $typography__font-size--xs; // .875rem
$af__font-size-s: $typography__font-size--s; // .9375rem
$af__font-size-m: $typography__font-size--m; // 1.25rem
$af__font-size-heading: $typography__font-size--heading; // 1.125rem
$af__font-size-h1: $typography__font-size--h1; // 1.75rem
$af__font-size-h2: $typography__font-size--h2; // 1.375rem
$af__font-size-h3: $typography__font-size--h3; // 1.125rem
$af__font-size-desktop: $typography__font-size-desktop; // 1.125rem
$af__font-size-desktop-xs: $typography__font-size-desktop--xs; // .9375rem
$af__font-size-desktop-s: $typography__font-size-desktop--s; // 1rem
$af__font-size-desktop-heading: $typography__font-size-desktop--heading; // 1.375rem
$af__font-size-desktop-h1: $typography__font-size-desktop--h1; // 2.5rem
$af__font-size-desktop-h2: $typography__font-size-desktop--h2; // 1.75rem
$af__font-size-desktop-h3: $typography__font-size-desktop--h3; // 1.375rem
$af__font-size-desktop-compressed: $typography__font-size-desktop--compressed; // 1rem
$af__font-size-desktop-h1-compressed: $typography__font-size-desktop--h1-compressed; // 1.75rem
// Local variables
$dafa__font-size-h1: 1.5rem;