diff --git a/assets/components/atoms/button/button-tertiary-states.twig b/assets/components/atoms/button/button-tertiary-states.twig new file mode 100644 index 00000000..f18ad545 --- /dev/null +++ b/assets/components/atoms/button/button-tertiary-states.twig @@ -0,0 +1,4 @@ + + + + diff --git a/assets/components/atoms/button/button-tertiary.twig b/assets/components/atoms/button/button-tertiary.twig new file mode 100644 index 00000000..12e7af20 --- /dev/null +++ b/assets/components/atoms/button/button-tertiary.twig @@ -0,0 +1 @@ + diff --git a/assets/components/atoms/button/button.scss b/assets/components/atoms/button/button.scss index 87ce98b9..493dbe2e 100644 --- a/assets/components/atoms/button/button.scss +++ b/assets/components/atoms/button/button.scss @@ -123,6 +123,47 @@ input[type="button"] { } } +.btn-tertiary { + background: $leman; + font-weight: $font-weight-bold; + color: $white; + + &:hover, + &.hover { + background: $canard; + border-color: $canard; + color: $white; + } + + &:focus, + &:focus-visible, + &.focus { + outline-color: $canard !important; + color: $white; + } + + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active { + // ugly ↓ + // background: linear-gradient(to bottom, $canard 0%, $red 100%); + background: color.adjust($canard, $lightness: -10%); + border-color: color.adjust($canard, $lightness: -10%); + } + + &:disabled, + &.disabled { + background: $gray-100; + border-color: $gray-300; + color: $gray-300; + + .bg-dark & { + background: $black; + border-color: $gray-600; + color: $gray-600; + } + } +} + .btn-light { &, &:hover { diff --git a/assets/components/atoms/button/button.yml b/assets/components/atoms/button/button.yml index e3ec2e73..0cf882fc 100644 --- a/assets/components/atoms/button/button.yml +++ b/assets/components/atoms/button/button.yml @@ -22,6 +22,14 @@ variants: title: Secondary states preview notes: | *For previewing purposes only. **Do not use in production!*** + - name: tertiary + title: Button tertiary + notes: | + For less aggressive buttons that are still in line with the EPFL graphic charter. + - name: tertiary-states + title: Tertiary states preview + notes: | + *For previewing purposes only. **Do not use in production!*** notes: | Button is your interaction friend when you want people to complete an action. By clicking a button, people expect to trigger an event, confirm a form or load a new page. Don't put many buttons on one single page. The primary action should be obvious for people. diff --git a/assets/config/bootstrap-variables.scss b/assets/config/bootstrap-variables.scss index 12e4f195..bc0d09a5 100644 --- a/assets/config/bootstrap-variables.scss +++ b/assets/config/bootstrap-variables.scss @@ -17,6 +17,8 @@ $gray-300: #c1c1c1 !default; $gray-500: #8e8e8e !default; $gray-600: #707070 !default; $black: #212121 !default; +$leman: #00A79F !default; +$canard: #007480 !default; $grays: () !default; $grays: map-merge((