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 ++++++++++++++--------------------------- 1 file changed, 27 insertions(+), 56 deletions(-) (limited to 'src/objects/_action-button.scss') 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); - } - } - } } } -- cgit v1.2.3-54-g00ecf