From fd4e1f9aa493f16c1f98dc1115aca7d20ab4db77 Mon Sep 17 00:00:00 2001 From: Vladimir Kharlampidi Date: Tue, 27 Sep 2022 14:45:23 +0300 Subject: [PATCH] feat(button): m3 styles --- src/core/components/block/block-vars.less | 6 +-- src/core/components/button/button-vars.less | 48 ++++++++++++++------- src/core/components/link/link-vars.less | 5 +-- src/core/components/panel/panel-vars.less | 3 ++ 4 files changed, 39 insertions(+), 23 deletions(-) diff --git a/src/core/components/block/block-vars.less b/src/core/components/block/block-vars.less index d87e669fff..6cd84ff568 100644 --- a/src/core/components/block/block-vars.less +++ b/src/core/components/block/block-vars.less @@ -55,18 +55,18 @@ --f7-block-strong-text-color: var(--f7-md-on-surface); --f7-block-outline-border-color: var(--f7-md-outline); --f7-block-title-font-size: inherit; - --f7-block-title-text-color: var(--f7-md-primary); + --f7-block-title-text-color: var(--f7-theme-color); --f7-block-title-font-weight: 500; --f7-block-title-line-height: 16px; --f7-block-title-margin-bottom: 16px; --f7-block-title-medium-font-size: 16px; --f7-block-title-medium-font-weight: 500; --f7-block-title-medium-line-height: 1.3; - --f7-block-title-medium-text-color: var(--f7-md-primary); + --f7-block-title-medium-text-color: var(--f7-theme-color); --f7-block-title-large-font-size: 22px; --f7-block-title-large-font-weight: 500; --f7-block-title-large-line-height: 1.2; - --f7-block-title-large-text-color: var(--f7-md-primary); + --f7-block-title-large-text-color: var(--f7-theme-color); --f7-block-inset-border-radius: 16px; --f7-block-strong-bg-color: var(--f7-md-surface-1); --f7-block-header-text-color: var(--f7-md-on-surface-variant); diff --git a/src/core/components/button/button-vars.less b/src/core/components/button/button-vars.less index e9f270386f..f761d4ba37 100644 --- a/src/core/components/button/button-vars.less +++ b/src/core/components/button/button-vars.less @@ -3,21 +3,16 @@ --f7-button-min-width: 32px; --f7-button-bg-color: transparent; --f7-button-border-width: 0px; - --f7-button-text-transform: uppercase; - --f7-button-large-text-transform: uppercase; - --f7-button-small-text-transform: uppercase; - --f7-button-small-outline-border-width: 2px; + /* --f7-button-text-color: var(--f7-theme-color); --f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15); --f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color)); --f7-button-border-color: var(--f7-theme-color); - --f7-button-fill-text-color: #fff; --f7-button-fill-bg-color: var(--f7-theme-color); - --f7-button-outline-border-color: var(--f7-theme-color); --f7-button-padding-vertical: 0px; */ - --f7-button-outline-border-width: 2px; + --f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); --f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); @@ -27,7 +22,6 @@ --f7-segmented-strong-button-font-weight: 500; --f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25); .light-vars({ - --f7-segmented-strong-bg-color: rgba(0,0,0,0.07); --f7-segmented-strong-button-text-color: #000; --f7-segmented-strong-button-pressed-bg-color: rgba(0,0,0,0.07); --f7-segmented-strong-button-hover-bg-color: rgba(0,0,0,0.04); @@ -35,7 +29,6 @@ --f7-segmented-strong-button-active-bg-color: #fff; }); .dark-vars({ - --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1); --f7-segmented-strong-button-pressed-bg-color: rgba(255,255,255,0.04); --f7-segmented-strong-button-hover-bg-color: rgba(255,255,255,0.02); --f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14); @@ -44,42 +37,65 @@ }); } .ios-vars({ - + --f7-button-fill-text-color: #fff; + --f7-button-text-transform: uppercase; --f7-button-height: 28px; --f7-button-padding-horizontal: 10px; - --f7-button-border-radius: 5px; + --f7-button-border-radius: 4px; --f7-button-font-weight: 600; --f7-button-letter-spacing: 0; + --f7-button-outline-border-color: var(--f7-theme-color); + --f7-button-outline-border-width: 2px; /* --f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint); */ + --f7-button-large-text-transform: uppercase; --f7-button-large-height: 44px; --f7-button-large-font-size: 17px; --f7-button-large-font-weight: 500; + --f7-button-small-outline-border-width: 2px; + --f7-button-small-text-transform: uppercase; --f7-button-small-height: 26px; --f7-button-small-font-size: 13px; --f7-button-small-font-weight: 600; --f7-segmented-strong-button-text-transform: none; --f7-segmented-strong-button-active-font-weight: 600; + + .light-vars({ + --f7-segmented-strong-bg-color: rgba(0,0,0,0.07); + }); + + .dark-vars({ + --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1); + }); + }); .md-vars({ - --f7-button-height: 36px; + --f7-button-fill-text-color: var(--f7-md-on-primary); + --f7-button-text-transform: none; + --f7-button-height: 40px; --f7-button-padding-horizontal: 8px; - --f7-button-border-radius: 4px; + --f7-button-border-radius: 8px; --f7-button-font-weight: 500; - --f7-button-letter-spacing: 0.05em; + --f7-button-letter-spacing: normal; + --f7-button-outline-border-color: var(--f7-md-outline); + --f7-button-outline-border-width: 1px; /* --f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade); */ + --f7-button-large-text-transform: none; --f7-button-large-height: 48px; --f7-button-large-font-size: 14px; --f7-button-large-font-weight: 500; - --f7-button-small-height: 28px; + --f7-button-small-text-transform: none; + --f7-button-small-outline-border-width: 1px; + --f7-button-small-height: 32px; --f7-button-small-font-size: 14px; --f7-button-small-font-weight: 500; - --f7-segmented-strong-button-text-transform: uppercase; + --f7-segmented-strong-bg-color: var(--f7-md-surface-variant); + --f7-segmented-strong-button-text-transform: none; --f7-segmented-strong-button-active-font-weight: 500; }); diff --git a/src/core/components/link/link-vars.less b/src/core/components/link/link-vars.less index ed0127b6d2..82a6d6776f 100644 --- a/src/core/components/link/link-vars.less +++ b/src/core/components/link/link-vars.less @@ -2,12 +2,9 @@ --f7-link-highlight-black: rgba(0, 0, 0, 0.1); --f7-link-highlight-white: rgba(255, 255, 255, 0.15); --f7-link-highlight-color: rgba(var(--f7-theme-color-rgb), 0.15); + --f7-link-text-color: var(--f7-theme-color); } .ios-vars({ --f7-link-pressed-opacity: 0.3; - --f7-link-text-color: var(--f7-theme-color); -}); -.md-vars({ - --f7-link-text-color: var(--f7-md-primary); }); diff --git a/src/core/components/panel/panel-vars.less b/src/core/components/panel/panel-vars.less index 2d8f512a81..05433a8463 100644 --- a/src/core/components/panel/panel-vars.less +++ b/src/core/components/panel/panel-vars.less @@ -7,6 +7,9 @@ --f7-panel-right-collapsed-width: var(--f7-panel-collapsed-width); */ --f7-panel-bg-color: #fff; + .dark-vars({ + --f7-panel-bg-color: #000; + }); } .ios-vars({ --f7-panel-collapsed-width: 58px;