From 7a517353ba7f84476502aefe102b305382a09d66 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 13 Feb 2023 16:22:32 +0100 Subject: Update --- src/_declare-vars.scss | 3 +++ src/objects/_action-button.scss | 3 ++- src/objects/_avatar.scss | 10 +++++----- src/objects/_overflow-button.scss | 29 +++++++++++++++++++---------- 4 files changed, 29 insertions(+), 16 deletions(-) diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index ce91b5c..593c7e4 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -27,11 +27,14 @@ --275: iro.fn-px-to-rem(22px), --300: iro.fn-px-to-rem(24px), --325: iro.fn-px-to-rem(26px), + --350: iro.fn-px-to-rem(28px), + --375: iro.fn-px-to-rem(30px), --400: iro.fn-px-to-rem(32px), --450: iro.fn-px-to-rem(36px), --500: iro.fn-px-to-rem(40px), --550: iro.fn-px-to-rem(44px), --600: iro.fn-px-to-rem(48px), + --650: iro.fn-px-to-rem(52px), --700: iro.fn-px-to-rem(56px), --800: iro.fn-px-to-rem(64px), --900: iro.fn-px-to-rem(72px), diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 1cce94f..edb9200 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -61,6 +61,7 @@ --label: fn.global-color(--fg), --hover: ( + --bg: fn.global-color(--obj), --label: fn.global-color(--fg-lo), ), ), @@ -187,7 +188,7 @@ &:hover, &:active { border-color: transparent; - background-color: fn.color(--quiet --selected --bg); + background-color: fn.color(--quiet --selected --hover --bg); box-shadow: none; color: fn.color(--quiet --selected --hover --label); } diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index da7fdbd..51b144a 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -22,22 +22,22 @@ @include iro.props-store(( --dims: ( --150: ( - --size: fn.global-dim(--size --600), - --font-size: fn.global-dim(--font-size --150), + --size: fn.global-dim(--size --650), + --font-size: fn.global-dim(--font-size --200), --indicator-size: fn.global-dim(--size --175), ), --100: ( - --size: fn.global-dim(--size --450), + --size: fn.global-dim(--size --500), --font-size: fn.global-dim(--font-size --100), --indicator-size: fn.global-dim(--size --125), ), --75: ( - --size: fn.global-dim(--size --325), + --size: fn.global-dim(--size --375), --font-size: fn.global-dim(--font-size --75), --indicator-size: fn.global-dim(--size --100), ), --50: ( - --size: fn.global-dim(--size --225), + --size: fn.global-dim(--size --250), --font-size: fn.global-dim(--font-size --50), --indicator-size: fn.global-dim(--size --85), ), diff --git a/src/objects/_overflow-button.scss b/src/objects/_overflow-button.scss index 4a794a7..b15ea1f 100644 --- a/src/objects/_overflow-button.scss +++ b/src/objects/_overflow-button.scss @@ -27,6 +27,7 @@ --label: fn.global-color(--fg), --hover: ( + --bg: fn.global-color(--obj), --label: fn.global-color(--fg-lo), ), ), @@ -47,11 +48,13 @@ --bg: fn.global-color(--red --quiet --obj), --label: fn.global-color(--red --quiet --fg-lo), ), + --selected: ( --bg: fn.global-color(--red --quiet --bg), --label: fn.global-color(--red --quiet --fg), --hover: ( + --bg: fn.global-color(--red --quiet --obj), --label: fn.global-color(--red --quiet --fg-lo), ), ), @@ -66,11 +69,13 @@ --bg: fn.global-color(--blue --quiet --obj), --label: fn.global-color(--blue --quiet --fg-lo), ), + --selected: ( --bg: fn.global-color(--blue --quiet --bg), --label: fn.global-color(--blue --quiet --fg), --hover: ( + --bg: fn.global-color(--blue --quiet --obj), --label: fn.global-color(--blue --quiet --fg-lo), ), ), @@ -85,11 +90,13 @@ --bg: fn.global-color(--green --quiet --obj), --label: fn.global-color(--green --quiet --fg-lo), ), + --selected: ( --bg: fn.global-color(--green --quiet --bg), --label: fn.global-color(--green --quiet --fg), --hover: ( + --bg: fn.global-color(--green --quiet --obj), --label: fn.global-color(--green --quiet --fg-lo), ), ), @@ -154,18 +161,20 @@ @include iro.bem-is('selected') { @include iro.bem-elem('inside') { - border-color: fn.color(--selected --bg); - color: fn.color(--selected --label); + background-color: fn.color(--selected --bg); } &:link, &:visited, &:enabled { + @include iro.bem-elem('inside') { + color: fn.color(--selected --label); + } + &:hover, &:active { @include iro.bem-elem('inside') { - border-color: transparent; - background-color: fn.color(--selected --bg); + background-color: fn.color(--selected --hover --bg); color: fn.color(--selected --hover --label); } } @@ -202,18 +211,18 @@ } @include iro.bem-is('selected') { - @include iro.bem-elem('inside') { - border-color: fn.color(--#{$color} --selected --bg); - color: fn.color(--#{$color} --selected --label); - } - &:link, &:visited, &:enabled { + @include iro.bem-elem('inside') { + background-color: fn.color(--#{$color} --selected --bg); + color: fn.color(--#{$color} --selected --label); + } + &:hover, &:active { @include iro.bem-elem('inside') { - background-color: fn.color(--#{$color} --selected --bg); + background-color: fn.color(--#{$color} --selected --hover --bg); color: fn.color(--#{$color} --selected --hover --label); } } -- cgit v1.2.3-70-g09d2