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

feature(digi-ng-migrering: Flyttat digi-button till vår egen kod (TV-865)

Browse Source 
Merge in TEA/mina-sidor-fa-web from feature/TV-865-link-button to develop

Squashed commit of the following:

commit 45f3795aff7883c66302f27faf4b63ebf37f6041
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Nov 19 11:13:33 2021 +0100

    Update _buttons.scss

commit 586e84e689719c0be5a675a262b12fdb075fe6af
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Nov 19 11:05:01 2021 +0100

    wip

commit 62bf98e55a83d2bae91ddaa7ce9c95a8db725c20
Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se>
Date:   Fri Nov 19 10:54:34 2021 +0100

    simplify backlink class

commit a7d230b246b175f18c8aa156ec4bb90078618987
Merge: 0792de12 c6bbfb1b
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 14:33:49 2021 +0100

    Merged develop and fixed conflicts

commit 0792de125e6d74d2f56674ec757033634b3d2fcc
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 11:24:06 2021 +0100

    Added support for service-style link-buttons and replaced digi-ng-link-button

commit 3e9136806a4fc71b1ebcf75163698a9c3a5c7601
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 09:29:33 2021 +0100

    Removed unused imports inside modules

commit c1c93e405c545d033c7f8904fae21721b8b1d7ae
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 09:18:51 2021 +0100

    Added back-link component inside ui-libs

commit 4dd32d2b4b981d5e3337b19b8d144994a5f60468
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Nov 18 06:56:32 2021 +0100

    changed links styled as button to link-button component
This commit is contained in:
Daniel Appelgren
2021-11-19 11:19:40 +01:00
parent fbd04112fb
commit 86e3d533c2
63 changed files with 292 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
libs/styles/src/mixins/_buttons.scss
View File

@@ -1,9 +1,12 @@
@import '~@digi/core/dist/collection/components/_button/button/button.css';
@import 'variables/colors';
@import 'variables/gutters';
@import 'functions/rem';
@mixin msfa__button($type: 'primary') {
padding: var(--digi-button--padding);
border-radius: var(--digi-button--border-radius);
transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
transition: all 0.2s;
text-decoration: none;
font-weight: var(--digi-button--font-weight);
font-size: var(--digi-button--font-size);
@@ -40,6 +43,7 @@
&:focus {
background-color: var(--digi-button--background--secondary--hover);
color: var(--digi-button--color--secondary);
border-color: var(--digi-button--border-color);
}
}
&--tertiary {
@@ -62,3 +66,78 @@
font-size: var(--digi-button--font-size--l);
}
}
@mixin ui__rounded-button() {
display: inline-flex;
align-items: center;
text-decoration: none;
border-radius: 2rem;
gap: 1rem;
font-weight: var(--digi-button--font-weight);
font-size: var(--digi-button--font-size);
padding: rem(12) rem(16);
transition: all 0.2s;
border: rem(2) solid var(--digi-button--border-color);
outline: var(--digi-button--outline);
&:hover,
&:focus {
outline: var(--digi-button--outline--focus);
border-color: var(--digi-button--border-color--hover);
}
&--rounded-primary {
background-color: var(--digi-button--background);
color: var(--digi-button--color);
&:hover,
&:focus {
background-color: var(--digi-button--background--hover);
color: var(--digi-button--color--hover);
}
}
&--rounded-secondary {
background-color: var(--digi-button--background--secondary);
color: var(--digi-button--color--secondary);
&:hover,
&:focus {
background-color: var(--digi-button--background--secondary--hover);
color: var(--digi-button--color--secondary);
border-color: var(--digi-button--border-color);
}
}
&--rounded-primary-alt {
background-color: $digi--color--profile--secondary;
color: $digi--color--profile;
border-color: $digi--color--profile--secondary;
&:hover,
&:focus {
background-color: $digi--color--profile--secondary--light;
border-color: $digi--color--profile--secondary--light;
}
}
&--rounded-secondary-alt {
background-color: transparent;
color: $digi--color--profile--secondary;
border-color: $digi--color--profile--secondary;
&:hover,
&:focus {
color: $digi--color--profile;
border-color: $digi--color--profile--secondary--light;
background-color: $digi--color--profile--secondary--light;
}
}
&--s {
padding: rem(10) rem(14);
font-size: var(--digi-button--font-size--s);
}
&--l {
padding: rem(16) rem(20);
}
}

4
libs/styles/src/variables/_colors.scss
View File

@@ -4,4 +4,8 @@
$digi--ui--color--primary-light: lighten($digi--ui--color--primary, 10%);
$digi--ui--color--primary: $digi--ui--color--stratos;
$digi--color--profile: var(--digi--ui--color--primary);
$digi--color--profile--secondary: var(--digi--ui--color--secondary);
$digi--color--profile--secondary--light: #abff5c;
// Local variables