From 426bea2ee0a445708b167e06542000935dfe5cef Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 14 Feb 2022 08:43:12 +0100 Subject: Simplified buttons --- src/objects/_action-button.scss | 83 ++++++++++++++--------------------------- src/objects/_button.scss | 80 ++++++++++++++++----------------------- tpl/objects/action-button.pug | 1 - tpl/objects/button.pug | 3 +- 4 files changed, 61 insertions(+), 106 deletions(-) diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 08ac625..ab9e38b 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -95,11 +95,11 @@ display: inline-block; padding: fn.dim(--pad-y) fn.dim(--pad-x); overflow: hidden; - border: 1px solid fn.color(--border); + border: 1px solid fn.color(--disabled --border); border-radius: fn.dim(--rounding); - background-color: fn.color(--bg); - box-shadow: fn.color(--shadow); - color: fn.color(--label); + background-color: fn.color(--disabled --bg); + box-shadow: fn.color(--disabled --shadow); + color: fn.color(--disabled --label); line-height: 1; text-align: center; text-decoration: none; @@ -109,6 +109,11 @@ &:link, &:visited, &:enabled { + border-color: fn.color(--border); + background-color: fn.color(--bg); + box-shadow: fn.color(--shadow); + color: fn.color(--label); + &:hover { border-color: fn.color(--hover --border); background-color: fn.color(--hover --bg); @@ -134,14 +139,14 @@ } @include iro.bem-is('selected') { - border-color: fn.color(--selected --border); - background-color: fn.color(--selected --bg); - box-shadow: fn.color(--selected --shadow); - color: fn.color(--selected --label); - &:link, &:visited, &:enabled { + border-color: fn.color(--selected --border); + background-color: fn.color(--selected --bg); + box-shadow: fn.color(--selected --shadow); + color: fn.color(--selected --label); + &:hover, &:active { border-color: fn.color(--selected --hover --border); @@ -165,11 +170,16 @@ border-color: transparent; background-color: transparent; box-shadow: none; - color: fn.color(--quiet --label); + color: fn.color(--quiet --disabled --label); &:link, &:visited, &:enabled { + border-color: transparent; + background-color: transparent; + box-shadow: none; + color: fn.color(--quiet --label); + &:hover { border-color: transparent; background-color: fn.color(--quiet --hover --bg); @@ -195,14 +205,17 @@ } @include iro.bem-is('selected') { - border-color: transparent; background-color: fn.color(--quiet --selected --bg); - box-shadow: none; - color: fn.color(--quiet --selected --label); - + color: fn.color(--quiet --disabled --label); + &:link, &:visited, &:enabled { + border-color: transparent; + background-color: fn.color(--quiet --selected --bg); + box-shadow: none; + color: fn.color(--quiet --selected --label); + &:hover, &:active { border-color: transparent; @@ -228,47 +241,5 @@ padding-left: fn.dim(--pad-y); border-radius: 100em; } - - @include iro.bem-is('disabled') { - border-color: fn.color(--disabled --border); - background-color: fn.color(--disabled --bg); - box-shadow: fn.color(--disabled --shadow); - color: fn.color(--disabled --label); - - &:link, - &:visited, - &:enabled { - &:hover, - &:active { - border-color: fn.color(--disabled --border); - background-color: fn.color(--disabled --bg); - box-shadow: fn.color(--disabled --shadow); - color: fn.color(--disabled --label); - } - } - - @include iro.bem-modifier('quiet') { - border-color: transparent; - background-color: transparent; - box-shadow: none; - color: fn.color(--quiet --disabled --label); - - &:link, - &:visited, - &:enabled { - &:hover, - &:active { - border-color: transparent; - background-color: transparent; - box-shadow: none; - color: fn.color(--quiet --disabled --label); - } - } - - @include iro.bem-is('selected') { - background-color: fn.color(--quiet --selected --bg); - } - } - } } } diff --git a/src/objects/_button.scss b/src/objects/_button.scss index f93f342..15804f1 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -2,10 +2,24 @@ @use '../functions' as fn; @mixin button-variant($variant) { - border-color: fn.color(--#{$variant} --bg); - background-color: fn.color(--#{$variant} --bg); - box-shadow: fn.color(--#{$variant} --shadow); - color: fn.color(--#{$variant} --label); + &:link, + &:visited, + &:enabled { + border-color: fn.color(--#{$variant} --bg); + background-color: fn.color(--#{$variant} --bg); + box-shadow: fn.color(--#{$variant} --shadow); + color: fn.color(--#{$variant} --label); + } + + @include iro.bem-modifier('outline') { + &:link, + &:visited, + &:enabled { + background-color: transparent; + box-shadow: none; + color: fn.color(--#{$variant} --outline-label); + } + } &:link, &:visited, @@ -24,12 +38,6 @@ color: fn.color(--#{$variant} --active --label); } } - - @include iro.bem-modifier('outline') { - background-color: transparent; - box-shadow: none; - color: fn.color(--#{$variant} --outline-label); - } } @include iro.props-namespace('button') { @@ -111,24 +119,26 @@ ), 'colors'); @include iro.bem-object(iro.props-namespace()) { - display: inline-block; - padding: fn.dim(--pad-y) fn.dim(--pad-x); - border: 2px solid transparent; - border-radius: fn.dim(--rounding); - font-weight: 500; - line-height: 1; - text-align: center; - text-decoration: none; + display: inline-block; + padding: fn.dim(--pad-y) fn.dim(--pad-x); + border: 2px solid transparent; + border-radius: fn.dim(--rounding); + border-color: fn.color(--any --disabled --bg); + background-color: fn.color(--any --disabled --bg); + box-shadow: fn.color(--any --disabled --shadow); + color: fn.color(--any --disabled --label); + font-weight: 500; + line-height: 1; + text-align: center; + text-decoration: none; @include iro.bem-modifier('block') { display: block; } - @include iro.bem-modifier('native') { - @include iro.bem-modifier('block') { - box-sizing: border-box; - width: 100%; - } + @include iro.bem-modifier('outline') { + background-color: transparent; + box-shadow: none; } @include button-variant('secondary'); @@ -147,29 +157,5 @@ color: fn.color(--any --key-focus --label); } } - - @include iro.bem-is('disabled') { - border-color: fn.color(--any --disabled --bg); - background-color: fn.color(--any --disabled --bg); - box-shadow: fn.color(--any --disabled --shadow); - color: fn.color(--any --disabled --label); - - &:link, - &:visited, - &:enabled { - &:hover, - &:active { - border-color: fn.color(--any --disabled --bg); - background-color: fn.color(--any --disabled --bg); - box-shadow: fn.color(--any --disabled --shadow); - color: fn.color(--any --disabled --label); - } - } - - @include iro.bem-modifier('outline') { - background-color: transparent; - box-shadow: none; - } - } } } diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug index a695bee..d752fa6 100644 --- a/tpl/objects/action-button.pug +++ b/tpl/objects/action-button.pug @@ -7,7 +7,6 @@ mixin action-button 'o-action-button--block': attributes.block, 'o-action-button--quiet': attributes.quiet, 'o-action-button--round': attributes.round, - 'is-disabled': attributes.disabled, 'is-selected': attributes.selected } if (attributes.class) { diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index 3b10ea0..8cae2f1 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug @@ -3,8 +3,7 @@ mixin a-button let classes = { 'o-button': true, 'o-button--block': attributes.block, - 'o-button--outline': attributes.outline, - 'is-disabled': attributes.disabled + 'o-button--outline': attributes.outline } if (attributes.variant) { classes['o-button--' + attributes.variant] = true -- cgit v1.2.3-70-g09d2