diff options
Diffstat (limited to 'templates/@theme-base')
30 files changed, 561 insertions, 187 deletions
diff --git a/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss b/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss index b48e26c..f1556e5 100644 --- a/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss +++ b/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss @@ -9,7 +9,7 @@ display: inline-block; width: 1.6rem; height: 1.6rem; - background: $pm-input-background url("#{$path-images}sprite-for-css-only.svg#css-greater") 0 0 no-repeat; + background: transparent url("#{$path-images}sprite-for-css-only.svg#css-greater") 0 0 no-repeat; background-size: 1.4rem; position: relative; top: 6px; @@ -25,6 +25,7 @@ .breadcrumb-button { padding: .4em; opacity: .3; + color: inherit; } [disabled][aria-current="step"].breadcrumb-button { font-weight: bold; diff --git a/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss b/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss new file mode 100644 index 0000000..b1e8d72 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss @@ -0,0 +1,87 @@ +// these mixins are present to be called from pm-buttons and pm-darkmode +@import "../reusable-components/design-system-config"; + + +@mixin button-disabled-state-dm { + opacity: .6; + background-color: $pm-global-grey; + color: rgba( $pm-global-muted, .6 ); + border-color: rgba( $pm-global-muted, .6 ); + pointer-events: none; +} + +@mixin pm-button-dark { + color: $white; + background-color: $pm-global-grey; + border-color: var(--bordercolor-input, $pm-global-border); + + &:focus, + &:hover, + &.is-hover { + color: $white; + background-color: rgba(0, 0, 0, 0.2); + } + &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns + &.is-active { + background: rgba(0, 0, 0, 0.5); + } + &[disabled], + &.is-disabled { + @include button-disabled-state-dm; + } + /* just to cancel examples */ + &.is-hover:hover { + background-color: rgba(0, 0, 0, 0.2); + } +} + + +@mixin pm-button-blueborder-dark { + border-color: $pm-primary-light; + color: $pm-primary-light; + background-color: $pm-global-grey; + + &:focus, + &:hover, + &:focus-within, + &.is-hover, + &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns + &.is-active { + background: rgba(0, 0, 0, 0.2); + border-color: $pm-primary-light; + color: $pm-primary-dark; + } + &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns + &.is-active { + background: rgba(0, 0, 0, 0.5); + } + &[disabled], + &.is-disabled { + @include button-disabled-state-dm; + } +} + +@mixin pv-button-greenborder-dark { + border-color: $pv-green-light; + color: $pv-green-light; + background-color: $pm-global-grey; + + &:focus, + &:hover, + &:focus-within, + &.is-hover, + &:active, + &.is-active { + background-color: rgba(0, 0, 0, 0.2); + border-color: $pv-green-dark; + color: $pv-green-dark; + } + &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns + &.is-active { + background: rgba(0, 0, 0, 0.5); + } + &[disabled], + &.is-disabled { + @include button-disabled-state-dm; + } +}
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-buttons.scss b/templates/@theme-base/pm-styles/_pm-buttons.scss index bad40a6..d206cf9 100644 --- a/templates/@theme-base/pm-styles/_pm-buttons.scss +++ b/templates/@theme-base/pm-styles/_pm-buttons.scss @@ -2,6 +2,8 @@ /* * Buttons */ +@import "pm-buttons-mixins"; + [class*="pm-button"], [class*="pv-button"] { border-radius: $global-border-radius; @@ -20,7 +22,6 @@ } } - .pm-button { border-color: $pm-global-border; background: $white; @@ -56,37 +57,16 @@ &.p0 { padding: 0; } - } -.pm-button-dark { - color: $white; - background-color: $pm-global-grey; - border-color: $pm-global-border; - &:focus, - &:hover, - &.is-hover { - color: $white; - background-color: rgba(0, 0, 0, 0.2); - } - &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns - &.is-active { - background: rgba(0, 0, 0, 0.5); - } - &[disabled], - &.is-disabled { - background-color: $pm-global-muted; - color: rgba( $pm-global-grey, .3 ); - pointer-events: none; - } - /* just to cancel examples */ - &.is-hover:hover { - background-color: rgba(0, 0, 0, 0.2); - } +.pm-button-dark { + @include pm-button-dark; } -.pm-button-blue { + +.pm-button-blue, +.pm-button.pm-button-blue { color: $white; background-color: $pm-primary; border: 1px solid $pm-primary; @@ -147,35 +127,13 @@ } } -.pm-button-blueborder-dark { - border-color: $pm-primary-light; - color: $pm-primary-light; - background-color: $pm-global-grey; - &:focus, - &:hover, - &:focus-within, - &.is-hover, - &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns - &.is-active { - background-color: rgba(0, 0, 0, 0.2); - border-color: $pm-primary-light; - color: $pm-primary-dark; - } - &:active, - &.is-active { - background: rgba(0, 0, 0, 0.5); - } - &[disabled], - &.is-disabled { - background-color: $pm-global-muted; - color: rgba( $pm-global-grey, .3 ); - border-color: $pm-global-border; - pointer-events: none; - } +.pm-button-blueborder-dark { + @include pm-button-blueborder-dark; } -.pv-button-green { +.pv-button-green, +.pm-button.pv-button-green { color: $white; background-color: $pv-green; border: 1px solid $pv-green; @@ -236,32 +194,9 @@ } } -.pv-button-greenborder-dark { - border: 1px solid $pv-green-light; - color: $pv-green-light; - background-color: $pm-global-grey; - &:focus, - &:hover, - &:focus-within, - &.is-hover, - &:active, - &.is-active { - background-color: rgba(0, 0, 0, 0.2); - border-color: $pv-green-dark; - color: $pv-green-dark; - } - &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns - &.is-active { - background: rgba(0, 0, 0, 0.5); - } - &[disabled], - &.is-disabled { - background-color: $pm-global-muted; - color: rgba( $pm-global-grey, .3 ); - border-color: $pm-global-border; - pointer-events: none; - } +.pv-button-greenborder-dark { + @include pv-button-greenborder-dark; } @@ -347,7 +282,8 @@ @extend .pv-button-greenborder-dark; } } -.pm-button--link { +.pm-button--link, +.pm-button.pm-button--link { color: $color-links; border-width: 0; box-shadow: none; @@ -366,7 +302,7 @@ } &[disabled], &.is-disabled { - color: rgba( $pm-global-grey, .5 ); + color: rgba( $pm-global-grey, .5 ); pointer-events: none; text-decoration: none; background-color: transparent; // to avoid heriting from other classes @@ -399,9 +335,9 @@ } /* other aliases requested */ -.pm-button--redborder { +.pm-button--redborder.pm-button--redborder { // for darkmode... again @extend .pm-button; - border: 1px solid $pm-global-warning; + border-color: $pm-global-warning; color: $pm-global-warning; } diff --git a/templates/@theme-base/pm-styles/_pm-circlebar.scss b/templates/@theme-base/pm-styles/_pm-circlebar.scss index 2bd7153..462ccd9 100644 --- a/templates/@theme-base/pm-styles/_pm-circlebar.scss +++ b/templates/@theme-base/pm-styles/_pm-circlebar.scss @@ -6,7 +6,7 @@ $stroke-width: 3px !default; // be careful to udpate SVG if you want to update t fill: transparent; } .circle-chart__background--bigger .circle-chart__background { - stroke: rgba($pm-global-grey, .2); + stroke: var(--bgcolor-input, rgba($pm-global-grey, .2)); opacity: .4; } diff --git a/templates/@theme-base/pm-styles/_pm-containers.scss b/templates/@theme-base/pm-styles/_pm-containers.scss index 4723e94..e027ad7 100644 --- a/templates/@theme-base/pm-styles/_pm-containers.scss +++ b/templates/@theme-base/pm-styles/_pm-containers.scss @@ -3,7 +3,7 @@ */ .bordered, .bordered-container { - border: 1px solid $pm-global-border; + border: 1px solid var(--bordercolor-input, $pm-global-border); } .bordered-container { border-radius: $global-border-radius; @@ -11,26 +11,33 @@ .dashed, .dashed-container { - border: 1px dashed $pm-global-border; + border: 1px dashed var(--bordercolor-input, $pm-global-border); } .dashed-container { border-radius: $global-border-radius; } .border-bottom { - border-bottom: 1px solid $pm-global-border; + border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); } .border-bottom--dashed { border-bottom-style: dashed; } .border-top { - border-top: 1px solid $pm-global-border; + border-top: 1px solid var(--bordercolor-input, $pm-global-border); +} +.border-top--dashed { + border-top-style: dashed; } .border-left { - border-left: 1px solid $pm-global-border; + border-left: 1px solid var(--bordercolor-input, $pm-global-border); } .border-right { - border-right: 1px solid $pm-global-border; + border-right: 1px solid var(--bordercolor-input, $pm-global-border); +} + +.border-currentColor { + border: 1px solid currentColor; } .shadow-container { @@ -46,8 +53,8 @@ $block-info-border-width: 3px !default; [class*="block-info"] { padding: 0.5em 1.2em; - color: $pm-global-grey; - background-color: $pm-global-light; + color: var(--color-main-area, $pm-global-grey); + background-color: var(--bordercolor-input, $pm-global-light); border-left-width: $block-info-border-width; border-left-style: solid; } diff --git a/templates/@theme-base/pm-styles/_pm-conversations.scss b/templates/@theme-base/pm-styles/_pm-conversations.scss index c8ee796..2e7f3d1 100644 --- a/templates/@theme-base/pm-styles/_pm-conversations.scss +++ b/templates/@theme-base/pm-styles/_pm-conversations.scss @@ -4,7 +4,8 @@ .items-column-list { width: calc( (100% + var(--width-sidebar, #{$width-sidebar}) ) * #{$conversations-column-width/1%/100} ); - border-right: 1px solid $pm-global-border; + border-right: 1px solid var(--bordercolor-input, $pm-global-border); + background: var(--bgcolor-item-column-list, $white); } .items-column-list--mobile { width: 100%; @@ -16,18 +17,32 @@ height: calc(100vh - #{$header-height} - #{$toolbar-height} ); } +.view-column-detail { + background: var(--bgcolor-view-column-detail, $white); +} + .item-container, .item-container-row { padding: em(15) em(12); - border-bottom: 1px solid $pm-global-border; + border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); + background-color: var(--bgcolor-item-column-list, $pm-global-light); } .item-container-row { padding: em(8) em(12); } +.item-container, +.item-container-row { + background: var(--bgcolor-item-column-list, $pm-global-light); +} + .item-is-selected, .item-container.active { // alias for Angular - background: $conversation-selected-bg; + background: var(--bgcolor-item-column-active, $conversation-selected-bg); +} + +.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active) { + background: var(--bgcolor-toolbar, $white); } $conversation-icon-size: 4rem !default; @@ -35,7 +50,8 @@ $conversation-icon-size: 4rem !default; width: $conversation-icon-size; height: $conversation-icon-size; font-size: 1.2rem; - border: 1px solid $pm-global-border; + border: 1px solid var(--bordercolor-input, $pm-global-border); + background-color: var(--bordercolor-input, $white); } .item-checkbox { @@ -63,7 +79,7 @@ $conversation-icon-size: 4rem !default; // hover state of checkbox & + .item-icon:hover { background-color: $white; - border-color: $pm-global-border; + border-color: var(--bordercolor-input, $pm-global-border); & > .item-abbr { display: none; } @@ -109,7 +125,7 @@ $conversation-icon-size: 4rem !default; } .starbutton { - fill: $pm-global-grey; + fill: var(--fillcolor-icons, $pm-global-grey); width: 1.6rem; height: 1.6rem; opacity: .5; @@ -140,11 +156,11 @@ $conversation-icon-size: 4rem !default; * view messages */ .message-container { - border: 1px solid $pm-global-border; + border: 1px solid var(--bordercolor-input, $pm-global-border); border-radius: $global-border-radius; } .message-header { - background-color: $pm-global-light; + background-color: var(--bgcolor-input, $pm-global-light); @extend .p1; @extend .relative; @@ -158,9 +174,9 @@ $conversation-icon-size: 4rem !default; height: 17px; transform: skewX(50deg) translateX(-10px); - border-top: 1px solid $pm-global-border; - border-left: 1px solid $pm-global-border; - background-color: $pm-global-light; + border-top: 1px solid var(--bordercolor-input, $pm-global-border); + border-left: 1px solid var(--bordercolor-input, $pm-global-border); + background-color: var(--bgcolor-input, $pm-global-light); } &.is-outbound::before { @@ -173,9 +189,9 @@ $conversation-icon-size: 4rem !default; height: 17px; transform: skewX(-50deg) translateX(10px); - border-top: 1px solid $pm-global-border; - border-right: 1px solid $pm-global-border; - background-color: $pm-global-light; + border-top: 1px solid var(--bordercolor-input, $pm-global-border); + border-right: 1px solid var(--bordercolor-input, $pm-global-border); + background-color: var(--bgcolor-input, $pm-global-light); } } @@ -184,7 +200,7 @@ $conversation-icon-size: 4rem !default; .message-container.is-opened { > .message-header { - border-bottom: 1px solid $pm-global-border; + border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); } } @@ -196,13 +212,13 @@ $conversation-icon-size: 4rem !default; .message-expand { padding: 0 .5em .6em; // centers - background-color: $pm-global-light; + background-color: var(--bgcolor-input, $pm-global-light); line-height: .75; } .message-attachments { @extend .p1; - border-top: 1px solid $pm-global-border; + border-top: 1px solid var(--bordercolor-input, $pm-global-border); font-size: 1.4rem; } @@ -217,15 +233,23 @@ $conversation-icon-size: 4rem !default; } .message-attachmentIcon { width: 2.6em; + svg:not([class*="fill-"]) { + fill: var(--color-main-area, $black); + } } + + .message-attachmentInfo { - border-left: 1px solid $pm-global-border; + border-left: 1px solid var(--bordercolor-input, $pm-global-border); padding: .3em .7em; } .message-attachmentSize { font-size: 1.2rem; opacity: .5; } +.message-infobox { + background: var(--bgcolor-main-area, $white); +} .container-to { min-width: 3em; @@ -249,6 +273,6 @@ $conversation-icon-size: 4rem !default; } .protonmail_quote { - border-left: 1px solid $pm-global-border; + border-left: 1px solid var(--bordercolor-input, $pm-global-border); padding-left: 1rem; }
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-dark-theme.scss b/templates/@theme-base/pm-styles/_pm-dark-theme.scss new file mode 100644 index 0000000..02f2d80 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-dark-theme.scss @@ -0,0 +1,139 @@ +/* dark-mode + * Come to the Dark Mode, we have wookies + */ + +@import "./pm-buttons-mixins"; + +// forms/buttons +.pm-button { + @include pm-button-dark; +} +.pm-button-blueborder { + @include pm-button-blueborder-dark; +} +.pv-button-greenborder { + @include pv-button-greenborder-dark; +} + +.pm-button-blue, +.pm-button.pm-button-blue, +.pv-button-green, +.pm-button.pv-button-green { + &[disabled], + &.is-disabled { + @include button-disabled-state-dm; + } +} + +.pm-button--link, +a, .link, +.pm-button.pm-button--link { + &:focus, + &:hover, + &:not(div):active, + &:active { + color: currentColor; + } + &[disabled], + &.is-disabled { + color: rgba( $white, .5 ); + } +} + + +.pm-field { + &[type="search"] { + background-image: url("#{$path-images}sprite-for-css-only.svg#css-search-white"); + } +} +@if $rtl-option == true { + [dir="rtl"] { + [type="search"].pm-field { + background-image: url("#{$path-images}sprite-for-css-only.svg#css-search-rtl-white"); + } + } +} + +.pm-field[disabled] { + color: rgba( $white, .5); + opacity: .6; +} + + +select.pm-field { + background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret-white"); +} +.pm-checkbox { + &:indeterminate + .pm-checkbox-fakecheck { + background-image: url("#{$path-images}sprite-for-css-only.svg#css-dash-white"); + } +} +.pm-toggle-checkbox { + &[aria-busy="true"] + .pm-toggle-label { + &::before { + background-image: url(#{$path-images}loading-atom-smaller-dark.svg); + } + } + &[disabled] + .pm-toggle-label { + background-color: transparent; + opacity: .6; + } +} + + +.searchbox-field[type="search"] { + background-image: none; +} + +// loading +[aria-busy="true"] { + background-image: url(#{$path-images}loading-atom-smaller-dark.svg); +} + +button[aria-busy="true"] { + background-image: url(#{$path-images}loading-atom-smaller-disabled-dark.svg); +} + + + +td[aria-busy="true"] { + position: relative; + background-image: none; + &::before { + background-image: url(#{$path-images}loading-atom-smaller-dark.svg); + } +} + +// others +details { + &[open] > summary { + background-image: url(#{$path-images}sprite-for-css-only.svg#css-caret-close-white); + } +} +summary { + background-image: url(#{$path-images}sprite-for-css-only.svg#css-caret-white); +} + + + +// quick and dirty +.fill-global-grey, +.fill-black { fill: $white; } // dirty, I know + + +// global +:root { + --bgcolor-item-column-list: #{$pm-global-grey}; + --bgcolor-view-column-detail: #{$pm-secondary-grey}; + --bgcolor-main-area: #{$pm-secondary-grey}; + --bgcolor-subnav: #{$pm-global-grey}; + --bgcolor-toolbar: #{$pm-global-altgrey}; + --color-subnav-link: #{$white}; + --color-main-area: #{$white}; + --fillcolor-icons: #{$white}; + --bgcolor-disabled-checkboxes-radios: #{$pm-global-altgrey}; + --bgcolor-item-column-active: #{$pm-blue-dark}; + --bordercolor-input: #{$pm-tertiary-grey}; + --bgcolor-input: #{$pm-global-altgrey}; + --color-input: #{$white}; +}
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss b/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss index 28a7fbe..33b2b2f 100644 --- a/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss +++ b/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss @@ -19,6 +19,10 @@ } } } + +.dropDown-logout-displayName { + max-width: 15em; +} .dropDown-logout-email { font-size: 1rem; } diff --git a/templates/@theme-base/pm-styles/_pm-dropdown.scss b/templates/@theme-base/pm-styles/_pm-dropdown.scss index 7ab0fe7..77569d7 100644 --- a/templates/@theme-base/pm-styles/_pm-dropdown.scss +++ b/templates/@theme-base/pm-styles/_pm-dropdown.scss @@ -20,10 +20,10 @@ $dropDown-narrow-width: 8em !default; visibility: visible; transition-delay: 0s; width: $dropDown-width; - background: $white; + background: var(--bgcolor-main-area, $white); border-radius: $global-border-radius; box-shadow: 0 0 16px 3px rgba(0, 0, 0, 0.16); - color: $pm-global-grey; + color: var(--color-main-area, $pm-global-grey); } .dropDown-content--narrow { @@ -76,8 +76,8 @@ $dropDown-narrow-width: 8em !default; padding: 0; // no padding for the drop shadow :-\ margin: 0 0 0 1em; - background: $white no-repeat; - background-image: radial-gradient(farthest-side at 50% 0,#acb0bf,transparent),radial-gradient(farthest-side at 50% 100%,#acb0bf,transparent); + background: var(--bgcolor-main-area, $white) no-repeat; + background-image: radial-gradient(farthest-side at 50% 0,var(--bordercolor-input, #acb0bf),transparent),radial-gradient(farthest-side at 50% 100%,var(--bordercolor-input, #acb0bf),transparent); background-position: 50% 0, 0 100%; background-size: calc(100% - 20px) 3px; @@ -93,7 +93,7 @@ $dropDown-narrow-width: 8em !default; position: relative; display: block; z-index: 1; - background: $white; + background: var(--bgcolor-main-area, $white); height: 10px; } } @@ -129,7 +129,7 @@ $dropDown-narrow-width: 8em !default; width: 1rem; height: 1rem; border: 1rem solid transparent; - border-bottom: 1rem solid $white; + border-bottom: 1rem solid var(--bgcolor-main-area, $white); } .dropDown--leftArrow .dropDown-content::before { @@ -145,7 +145,7 @@ $dropDown-narrow-width: 8em !default; left: -2rem; bottom: 1rem; border: 1rem solid transparent; - border-right: 1rem solid $white; + border-right: 1rem solid var(--bgcolor-main-area, $white); } @if $rtl-option == true { @@ -168,15 +168,19 @@ $dropDown-narrow-width: 8em !default; left: 100%; right: auto; border: 1rem solid transparent; - border-left: 1rem solid $white; + border-left: 1rem solid var(--bgcolor-main-area, $white); } } } +.dropDown-link { + color: currentColor; +} + /* border on items */ .dropDown-item + .dropDown-item { - border-top: 1px solid $pm-global-border; + border-top: 1px solid var(--bordercolor-input, $pm-global-border); } /* pagination caret */ diff --git a/templates/@theme-base/pm-styles/_pm-forms.scss b/templates/@theme-base/pm-styles/_pm-forms.scss index 5b6fc67..c01ba51 100644 --- a/templates/@theme-base/pm-styles/_pm-forms.scss +++ b/templates/@theme-base/pm-styles/_pm-forms.scss @@ -1,12 +1,12 @@ /* input design */ ::placeholder { - color: rgba($pm-global-grey, .65); + color: var(--color-input, rgba($pm-global-grey, .65)); font-style: italic; } // fix "autofill state" input:-webkit-autofill{ - box-shadow: 200px 200px 100px $pm-input-background inset; + box-shadow: 200px 200px 100px var(--bgcolor-input, $pm-input-background) inset; } /* removes X in input when typing in IE/EDGE */ @@ -31,15 +31,16 @@ $field-container: 26rem !default; .pm-field { filter: none; // fixes Firefox autofill color - border: $input-defaut-border; + border: 1px solid var(--bordercolor-input, $input-defaut-border); padding: em(6) em(16); // design want 34px height (actually 35 to avoid .5px) - background-color: $pm-input-background; + background-color: var(--bgcolor-input, $pm-input-background); border-radius: $global-border-radius; + color: var(--color-input, $pm-global-grey); outline: 0; &:focus, &.focus, &:focus-within { - background-color: $white; + background-color: var(--bgcolor-main-area, $white); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); } &[aria-invalid="true"]:not(:focus), @@ -81,7 +82,7 @@ $field-container: 26rem !default; } select.pm-field { - background: $pm-input-background url("#{$path-images}sprite-for-css-only.svg#css-caret") calc(100% - 6px) 50% no-repeat; + background: var(--bgcolor-input, $pm-input-background) url("#{$path-images}sprite-for-css-only.svg#css-caret") calc(100% - 6px) 50% no-repeat; background-size: 1.5rem; padding-left: 1em; height: 3.5rem; @@ -146,8 +147,9 @@ textarea[required].pm-field.field-pristine:invalid { /* checkboxes */ .pm-checkbox-fakecheck { display: inline-flex; - border: 1px solid $pm-global-border; + border: 1px solid var(--bordercolor-input, $pm-global-border); border-radius: 2px; + min-width: 1.6rem; width: 1.6rem; height: 1.6rem; margin: auto .5rem auto 0; @@ -170,7 +172,7 @@ textarea[required].pm-field.field-pristine:invalid { } &[disabled] + .pm-checkbox-fakecheck, &:indeterminate + .pm-checkbox-fakecheck { - background: $pm-global-muted; + background: var(--bgcolor-disabled-checkboxes-radios, $pm-global-muted); } &:indeterminate + .pm-checkbox-fakecheck { content: ''; @@ -184,7 +186,7 @@ textarea[required].pm-field.field-pristine:invalid { // exception for toolbar .pm-select-all { .pm-checkbox-fakecheck { - border: 1px solid var(--fillcolor-icons, #585C67); + border: 1px solid #585C67; background-color: var(--bgcolor-aside-link, #484E59); } .pm-checkbox-fakecheck-img { @@ -218,7 +220,7 @@ textarea[required].pm-field.field-pristine:invalid { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); } &[disabled] + .pm-radio-fakeradio { - background: $pm-global-muted; + background: var(--bgcolor-disabled-checkboxes-radios, $pm-global-muted); } } @@ -230,8 +232,8 @@ $width: 5.5em !default; // height: 2em; width: $width; display: inline-flex; - border: 1px solid $pm-global-border; - background: #fcfdff; + border: 1px solid var(--bordercolor-input, $pm-global-border); + background: var(--bgcolor-input, #fcfdff); border-radius: 2rem; padding: 2px; position: relative; @@ -241,12 +243,12 @@ $width: 5.5em !default; width: calc( #{$width/2} - 2px); transition: transform .25s ease, background-color .25s ease, border-color .25s linear; border-radius: 2rem; - background: $pm-global-muted; + background: var(--bgcolor-input, $pm-global-muted); top: 2px; left: 0; bottom: 2px; transform: translateX(2px); - border: 1px solid $pm-global-border; + border: 1px solid var(--bordercolor-input, $pm-global-border); } & > .pm-toggle-label-text { align-self: center; @@ -356,6 +358,12 @@ $pm-label-width: 18em !default; } } +// case for forms labelled only with icons (calendar popover, etc.) +$pm-label-icon-width: 2em !default; +.pm-form--iconLabels .pm-label { + width: $pm-label-icon-width; +} + /* container address */ .pm-field-container--address { margin-top: -1.6em; diff --git a/templates/@theme-base/pm-styles/_pm-layout.scss b/templates/@theme-base/pm-styles/_pm-layout.scss index 43ecc66..d459ad2 100644 --- a/templates/@theme-base/pm-styles/_pm-layout.scss +++ b/templates/@theme-base/pm-styles/_pm-layout.scss @@ -17,6 +17,6 @@ hr { kbd { @extend .rounded; - @extend .bg-global-light; - border: 1px solid $pm-global-border; + background-color: var(--bgcolor-main-area, $pm-global-light); + border: 1px solid var(--bordercolor-input, $pm-global-border); }
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-loader-animation.scss b/templates/@theme-base/pm-styles/_pm-loader-animation.scss index 67fd7c0..be2e286 100644 --- a/templates/@theme-base/pm-styles/_pm-loader-animation.scss +++ b/templates/@theme-base/pm-styles/_pm-loader-animation.scss @@ -20,7 +20,7 @@ $stroke-width-big: 4 !default; .loadingAnimation-circle { fill: transparent; - stroke: $pm-global-grey; + stroke: var(--fillcolor-icons, $pm-global-grey); stroke-width: $stroke-width-big; transform-origin: 50%; will-change: transform; diff --git a/templates/@theme-base/pm-styles/_pm-loadingcontent.scss b/templates/@theme-base/pm-styles/_pm-loadingcontent.scss index abffaaf..bafb0e6 100644 --- a/templates/@theme-base/pm-styles/_pm-loadingcontent.scss +++ b/templates/@theme-base/pm-styles/_pm-loadingcontent.scss @@ -8,6 +8,7 @@ button[aria-busy="true"] { background-image: url(#{$path-images}loading-atom-smaller-disabled.svg); background-position: calc(100% - 4px) 50%; background-size: 10px 10px; + background-repeat: no-repeat; } tr[aria-busy="true"] { diff --git a/templates/@theme-base/pm-styles/_pm-meterbar.scss b/templates/@theme-base/pm-styles/_pm-meterbar.scss index 4798eb2..0e395ef 100644 --- a/templates/@theme-base/pm-styles/_pm-meterbar.scss +++ b/templates/@theme-base/pm-styles/_pm-meterbar.scss @@ -71,7 +71,7 @@ $meterbar-height: 6px !default; /* autoprefixer: ignore next */ appearance: none; height: 1.5rem; - background: $pm-global-muted; + background: var(--bordercolor-input, $pm-global-muted); box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); &::-webkit-meter-bar { diff --git a/templates/@theme-base/pm-styles/_pm-mini-calendar.scss b/templates/@theme-base/pm-styles/_pm-mini-calendar.scss index f8bccfb..5ec5071 100644 --- a/templates/@theme-base/pm-styles/_pm-mini-calendar.scss +++ b/templates/@theme-base/pm-styles/_pm-mini-calendar.scss @@ -2,6 +2,7 @@ $minicalendar-day-color: $black !default; $minicalendar-day-color-on-dark-background: $white !default; $minicalendar-fontsize: 1.2rem !default; $minicalendar-cell-size: 2em !default; +$minicalendar-bg-color-range-selection: #51555F !default; .minicalendar { font-size: $minicalendar-fontsize; @@ -27,24 +28,16 @@ $minicalendar-cell-size: 2em !default; .minicalendar-days { display: grid; grid-template-columns: repeat( var(--minicalendar-days-numberOfDays, 7), 1fr); - grid-template-rows: repeat( var(----minicalendar-days-numberOfWeeks, 4), 1fr) + grid-template-rows: repeat( var(----minicalendar-days-numberOfWeeks, 4), 1fr); + grid-gap: 1px 0px; } .minicalendar-day { - color: $minicalendar-day-color; + color: var(--color-main-area, $minicalendar-day-color); } .minicalendar-icon { fill: $minicalendar-day-color; } -.minicalendar--onDarkBackground { - .minicalendar-day { - color: $minicalendar-day-color-on-dark-background; - } - .minicalendar-icon { - fill: $minicalendar-day-color-on-dark-background; - } -} - .minicalendar-days { user-select: none; } @@ -72,22 +65,57 @@ $minicalendar-cell-size: 2em !default; position: relative; min-width: #{$minicalendar-cell-size + 0.35em}; min-height: #{$minicalendar-cell-size + 0.35em}; + border-radius: 50%; + &:focus, + &:hover { + background: rgba($minicalendar-bg-color-range-selection, .25); + } } .minicalendar-grid--displayWeekNumber .minicalendar-day { min-width: $minicalendar-cell-size; min-height: $minicalendar-cell-size; } -.minicalendar-day[aria-current="date"] { +.minicalendar-day[aria-current="date"]::before { + content: attr(data-current-day); + speak: none; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + line-height: 2.3; // check modifier below when no week displayed + color: $white; font-weight: bold; background: $pm-primary-dark; border-radius: 50%; } + +.minicalendar-grid--displayWeekNumber .minicalendar-day { + &[aria-current="date"]::before { + line-height: 2; + } +} + +.minicalendar--onDarkBackground { + .minicalendar-day { + color: $minicalendar-day-color-on-dark-background; + &:focus, + &:hover { + background: rgba($minicalendar-bg-color-range-selection, .8); + } + } + .minicalendar-icon { + fill: $minicalendar-day-color-on-dark-background; + } +} + .minicalendar-day[aria-pressed=true] { - color: $white; - font-weight: bold; - background: $pm-primary; + color: $white; + font-weight: bold; + background: $pm-primary; + border-radius: 50%; } $minicalendar-day-marker-size: 3px !default; @@ -114,6 +142,30 @@ $minicalendar-day-marker-size: 3px !default; .minicalendar-day--range-bound { background: $pm-primary; } -.minicalendar-day--range { - background: $pm-primary-light; -}
\ No newline at end of file + +.minicalendar-day--range[aria-pressed=true], +.minicalendar-day--range[aria-pressed=true]:hover, +.minicalendar-day--range[aria-pressed=true]:focus { + background: $minicalendar-bg-color-range-selection; + border-radius: 0; +} + +// ranges +.minicalendar { + .minicalendar-day--range-bound-begin, + .minicalendar-day--range-bound-begin:hover, + .minicalendar-day--range-bound-begin:focus { + border-top-left-radius: 40%; + border-bottom-left-radius: 40%; + } + .minicalendar-day--range-bound-end, + .minicalendar-day--range-bound-end:hover, + .minicalendar-day--range-bound-end:focus { + border-top-right-radius: 40%; + border-bottom-right-radius: 40%; + } + .minicalendar-day--range-bound-begin.minicalendar-day--range-bound-end { + border-radius: 50%; + } +} + diff --git a/templates/@theme-base/pm-styles/_pm-modal.scss b/templates/@theme-base/pm-styles/_pm-modal.scss index e991ba0..f7414bc 100644 --- a/templates/@theme-base/pm-styles/_pm-modal.scss +++ b/templates/@theme-base/pm-styles/_pm-modal.scss @@ -3,15 +3,18 @@ */ /* overlay covers everything */ $modal-width: 50% !default; -$modal-max-width: 70rem; +$modal-max-width: 70rem !default; $modal-breakpoint-width: 52em !default; $modal-breakpoint-height: 22em !default; +$breakpoint-low-height-modal: em(500, 16) !default; $modal-max-height: 80% !default; $modal-wider-width: 70% !default; -$modal-wider-max-width: 100rem; +$modal-wider-max-width: 100rem !default; + +$modal-full-dimension: 98% !default; $modal-smaller-width: 28em !default; @@ -23,7 +26,6 @@ $modal-smaller-width: 28em !default; left: 0; background: rgba( 0, 0, 0, .4 ); z-index: 666; - cursor: pointer; animation: pm-modalOverlayIn ease .5s 1 normal ; } @@ -33,7 +35,6 @@ $modal-smaller-width: 28em !default; display: flex; justify-content: center; flex-direction: column; - cursor: pointer; z-index: 666; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } @@ -68,11 +69,11 @@ $modal-smaller-width: 28em !default; .pm-modal { position: relative; - width: $modal-width; + width: $modal-max-width; max-height: $modal-max-height; max-width: $modal-max-width; - background: $white; - color: $pm-global-grey; + background: var(--bgcolor-main-area, $white); + color: var(--color-main-area, $pm-global-grey); padding: 0; overflow: hidden; border-radius: $global-border-radius; @@ -120,14 +121,22 @@ $modal-smaller-width: 28em !default; width: $modal-wider-width; max-width: $modal-wider-max-width; } +.pm-modal--full { + width: $modal-full-dimension; + max-width: $modal-full-dimension; + height: $modal-full-dimension; + max-height: $modal-full-dimension; + margin: 1%; +} .pm-modalClose { position: absolute; + @extend .flex; right: .5rem; - top: .2rem; + top: 1rem; background: transparent; border-radius: 1em; color: $pm-global-grey; @@ -137,6 +146,9 @@ $modal-smaller-width: 28em !default; line-height: 1; cursor: pointer; } +.pm-modalClose-icon { + fill: $pm-global-grey; +} // not defined, left this in case of // .pm-modalClose:focus, // .pm-modalClose:hover, @@ -185,8 +197,8 @@ $modal-smaller-width: 28em !default; flex: 1 1 auto; padding: 0 rem(30); - background: $white no-repeat; - background-image: radial-gradient(farthest-side at 50% 0,#acb0bf,transparent),radial-gradient(farthest-side at 50% 100%,#acb0bf,transparent); + background: var(--bgcolor-main-area, $white) no-repeat; + background-image: radial-gradient(farthest-side at 50% 0,var(--bordercolor-input, #acb0bf),transparent),radial-gradient(farthest-side at 50% 100%,var(--bordercolor-input, #acb0bf),transparent); background-position: 50% 0, 0 100%; background-size: calc(100% - 20px) 3px; } @@ -197,7 +209,7 @@ $modal-smaller-width: 28em !default; position: relative; display: block; z-index: 1; - background: $white; + background: var(--bgcolor-main-area, $white); height: 10px; } } @@ -216,6 +228,12 @@ $pm-label-shorter-width: 10em !default; width: var(--label-shorter-width, $pm-label-shorter-width); } +@include respond-to($breakpoint-small) { + .pm-modal--shorterLabels .onmobile-flex-column .pm-label { + width: 100%; + } +} + // single button on right .pm-modalFooter [class*="pm-button"]:only-child { margin-left: auto; @@ -229,6 +247,21 @@ $pm-label-shorter-width: 10em !default; } } + +@media (max-height: $breakpoint-low-height-modal) { + .pm-modal { + max-height: $modal-full-dimension; + } + .pm-modalFooter { + padding-bottom: 1rem; + } + .pm-modalHeader { + padding-top: 1rem; + padding-bottom: .5rem; + } +} + + // small viewports @media (max-width: $modal-breakpoint-width) { .pm-modal { @@ -241,3 +274,4 @@ $pm-label-shorter-width: 10em !default; } } + diff --git a/templates/@theme-base/pm-styles/_pm-panels.scss b/templates/@theme-base/pm-styles/_pm-panels.scss index 89d52c0..4016245 100644 --- a/templates/@theme-base/pm-styles/_pm-panels.scss +++ b/templates/@theme-base/pm-styles/_pm-panels.scss @@ -7,9 +7,10 @@ height: 36px; top: 19px; left: -12px; - border: 1px solid $pm-global-border; + border: 1px solid var(--bordercolor-input, $pm-global-border); border-radius: $global-border-radius; border-bottom-left-radius: 0; + background-color: var(--bgcolor-main-area, $pm-global-light); &::before { content: ''; @@ -20,8 +21,8 @@ top: calc(100% + 1px); left: -1px; border: 6px solid transparent; - border-top: 6px solid $pm-global-border; - border-right: 6px solid $pm-global-border; + border-top: 6px solid var(--bordercolor-input, $pm-global-border); + border-right: 6px solid var(--bordercolor-input, $pm-global-border); } } @@ -29,6 +30,10 @@ margin: 1.6rem 2.3rem 1.6rem 5.1rem; } +.information-panel-icon { + fill: var(--fillcolor-icons, $black); +} + @if $rtl-option == true { [dir="rtl"] { .information-panel-image { @@ -38,8 +43,8 @@ left: auto; right: -1px; border: 6px solid transparent; - border-top: 6px solid $pm-global-border; - border-left: 6px solid $pm-global-border; + border-top: 6px solid var(--bordercolor-input, $pm-global-border); + border-left: 6px solid var(--bordercolor-input, $pm-global-border); } } .information-panel-content { diff --git a/templates/@theme-base/pm-styles/_pm-progress-contact.scss b/templates/@theme-base/pm-styles/_pm-progress-contact.scss index 326c70c..eb4beff 100644 --- a/templates/@theme-base/pm-styles/_pm-progress-contact.scss +++ b/templates/@theme-base/pm-styles/_pm-progress-contact.scss @@ -7,7 +7,7 @@ $progress-contact-height: 6px !default; -ms-appearance: none; appearance: none; - background: $pm-global-border; + background: var(--bordercolor-input, $pm-global-border); // for Edge/IE color: $pm-primary; @@ -15,7 +15,7 @@ $progress-contact-height: 6px !default; height: $progress-contact-height; &::-webkit-progress-bar { - background-color: $pm-global-border; + background-color: var(--bordercolor-input, $pm-global-border); border-radius: #{$progress-contact-height/2}; } diff --git a/templates/@theme-base/pm-styles/_pm-sticky-header.scss b/templates/@theme-base/pm-styles/_pm-sticky-header.scss index c6e8fd2..c478872 100644 --- a/templates/@theme-base/pm-styles/_pm-sticky-header.scss +++ b/templates/@theme-base/pm-styles/_pm-sticky-header.scss @@ -10,7 +10,7 @@ $sticky-title-height: 10rem !default; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1); padding: .5em .75em; background: inherit; - z-index: 9; + z-index: 11; } .sticky-title--onTop { box-shadow: none; @@ -42,7 +42,7 @@ $sticky-title-height: 10rem !default; // not sticky on mobile @include respond-to($breakpoint-small) { - .sticky-title { + .sticky-title:not(.onmobile-remain-sticky) { position: static; box-shadow: none; } diff --git a/templates/@theme-base/pm-styles/_pm-subnav.scss b/templates/@theme-base/pm-styles/_pm-subnav.scss index 6d6a1b9..7d78646 100644 --- a/templates/@theme-base/pm-styles/_pm-subnav.scss +++ b/templates/@theme-base/pm-styles/_pm-subnav.scss @@ -4,6 +4,7 @@ .subnav { width: var(--width-subnav, $subnav-width); + background: var(--bgcolor-subnav, $pm-global-light); } .subnav-inner { position: -webkit-sticky; @@ -13,7 +14,11 @@ } .subnav-link { @extend .nodecoration; - @extend .color-global-grey; + color: var(--color-subnav-link, $pm-global-grey); + &:focus, + &:hover { + color: var(--color-subnav-link, $pm-global-grey); + } } [aria-current="true"].subnav-link { font-weight: bold; diff --git a/templates/@theme-base/pm-styles/_pm-table-plans.scss b/templates/@theme-base/pm-styles/_pm-table-plans.scss index cbe7f3e..1158f29 100644 --- a/templates/@theme-base/pm-styles/_pm-table-plans.scss +++ b/templates/@theme-base/pm-styles/_pm-table-plans.scss @@ -140,6 +140,10 @@ $nb-plans-max: 4 !default; border-radius: $global-border-radius $global-border-radius 0 0; } } + & tr td:nth-child(#{$i+2}), + & tr th:nth-child(#{$i+2}) { + border-left: 0; + } } }
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-table.scss b/templates/@theme-base/pm-styles/_pm-table.scss index 3da4237..e17e38f 100644 --- a/templates/@theme-base/pm-styles/_pm-table.scss +++ b/templates/@theme-base/pm-styles/_pm-table.scss @@ -12,7 +12,7 @@ .pm-simple-table td, .pm-simple-table th { padding: em(9); - border-bottom: 1px solid $pm-global-border; + border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); } .pm-simple-table th:not(.pm-simple-table-row-th) { @extend .uppercase; @@ -25,6 +25,14 @@ } } +.pm-plans-table-row--highlighted { + background-color: var(--bgcolor-input, $pm-global-light); +} + +/* alternate bg for rows */ +.pm-simple-table--alternate-bg-row tbody tr:nth-child(odd){ + background-color: var(--bgcolor-input, $pm-global-light); +} .pm-simple-table--has-actions { td:last-child, diff --git a/templates/@theme-base/pm-styles/_pm-tabs.scss b/templates/@theme-base/pm-styles/_pm-tabs.scss index f3da22d..8f60520 100644 --- a/templates/@theme-base/pm-styles/_pm-tabs.scss +++ b/templates/@theme-base/pm-styles/_pm-tabs.scss @@ -3,7 +3,7 @@ padding: 0; @extend .unstyled; @extend .flex; - border-bottom: 1px solid $pm-global-border; + border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); } .tabs-list-item { @@ -12,14 +12,15 @@ .tabs-list-link { @extend .flex; - color: $pm-global-grey; - border-bottom: 2px solid $pm-global-border; + color: var(--color-main-area, $pm-global-grey); + border-bottom: 2px solid var(--bordercolor-input, $pm-global-border); padding: .5em; @extend .nodecoration; @extend .relative; top: 1px; &:focus, &:hover { + color: var(--color-main-area, $pm-global-grey); font-weight: bold; @extend .nodecoration; } diff --git a/templates/@theme-base/pm-styles/_pm-toolbar.scss b/templates/@theme-base/pm-styles/_pm-toolbar.scss index 90e733b..ce06ffa 100644 --- a/templates/@theme-base/pm-styles/_pm-toolbar.scss +++ b/templates/@theme-base/pm-styles/_pm-toolbar.scss @@ -7,7 +7,8 @@ border-radius: 4px 4px 0 0; box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2); } -.toolbar-button { +.toolbar-button, +.pm-button.toolbar-button { // to avoid issues in darkmode // resets to avoid pm-button styles padding: unset; background: unset; @@ -57,6 +58,9 @@ color: var(--fillcolor-icons, $white); background: url("#{$path-images}sprite-for-css-only.svg#css-caret-white") calc(100% - 6px) 50% no-repeat; } +.toolbar-select option { + color: $black; // for Chrome bug +} @include respond-to($breakpoint-small) { diff --git a/templates/@theme-base/pm-styles/_pm-wizard.scss b/templates/@theme-base/pm-styles/_pm-wizard.scss index cb0b54a..85204dc 100644 --- a/templates/@theme-base/pm-styles/_pm-wizard.scss +++ b/templates/@theme-base/pm-styles/_pm-wizard.scss @@ -32,7 +32,7 @@ $size-current-pin: 16px !default; .wizard-item { - background: $pm-global-border; + background: var(--bordercolor-input, $pm-global-border); &:not(:last-child) { @extend .flex-item-fluid; @@ -41,11 +41,11 @@ $size-current-pin: 16px !default; // positionned first element always with a aria-current/is-complete &:first-child { background: none; - background-image: linear-gradient(to left, $pm-global-border 0, $pm-global-border calc(100% - #{$height-wizard/2}), transparent calc(100% - #{$height-wizard/2}) ); + background-image: linear-gradient(to left, var(--bordercolor-input, $pm-global-border) 0, var(--bordercolor-input, $pm-global-border) calc(100% - #{$height-wizard/2}), transparent calc(100% - #{$height-wizard/2}) ); } &:last-child { background: none; - background-image: linear-gradient(to right, $pm-global-border 0, $pm-global-border 50%, transparent 50%); + background-image: linear-gradient(to right, var(--bordercolor-input, $pm-global-border) 0, var(--bordercolor-input, $pm-global-border) 50%, transparent 50%); &.is-complete::after { content: none; } diff --git a/templates/@theme-base/reusable-components/_design-system-colors.scss b/templates/@theme-base/reusable-components/_design-system-colors.scss index 0263daf..3dfeda4 100644 --- a/templates/@theme-base/reusable-components/_design-system-colors.scss +++ b/templates/@theme-base/reusable-components/_design-system-colors.scss @@ -36,6 +36,11 @@ background-color: $pm-blue-light; } +.bg-global-highlight { + background-color: var(--bgcolor-input, $pm-global-light); +} + + .bg-pv-green { background-color: $pv-green; } @@ -53,6 +58,10 @@ background-color: $black; } +.bg-white-dm { + background-color: var(--bgcolor-main-area, $white); +} + .bg-visionary { background-color: $visionary; } @@ -71,6 +80,9 @@ .bg-primary { background-color: $pm-primary; } +.bg-inherit { + background: inherit; +} .fill-global-grey { fill: $pm-global-grey; diff --git a/templates/@theme-base/reusable-components/_design-system-config.scss b/templates/@theme-base/reusable-components/_design-system-config.scss index 05a4265..6502e2f 100644 --- a/templates/@theme-base/reusable-components/_design-system-config.scss +++ b/templates/@theme-base/reusable-components/_design-system-config.scss @@ -60,6 +60,10 @@ $pm-input-background : #fcfdff !default; $plan-logo-color : #8ed60f !default; $conversation-selected-bg: #e3e7f6 !default; +// needed for darkmode +$pm-secondary-grey : #2e323d !default; +$pm-tertiary-grey : #505560 !default; // border input + // colors $color-links : $pm-primary !default; $color-hover : $black !default; @@ -72,13 +76,13 @@ $color-txt-button : $black !default; $global-border-radius : 3px !default; // inputs -$input-defaut-border : 1px solid $pm-global-border !default; +$input-defaut-border : $pm-global-border !default; // main breakpoints $breakpoint-large : 1500 !default; $breakpoint-medium : 910 !default; $breakpoint-small : 680 !default; -$breakpoint-tiny : 320 !default; +$breakpoint-tiny : 450 !default; // RTL $rtl-option : false !default; diff --git a/templates/@theme-base/reusable-components/_design-system-layout-modules.scss b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss index 2fbc591..ce68eb0 100644 --- a/templates/@theme-base/reusable-components/_design-system-layout-modules.scss +++ b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss @@ -130,6 +130,9 @@ svg { .alignbaseline { vertical-align: baseline; } +.alignsub { + vertical-align: sub; +} /* block */ .bl { @@ -200,6 +203,10 @@ svg { } } +.fixed { + position: fixed; +} + /* hardware-acceleration activation */ .hardware-accelerated { @include vendor-prefix(transform, translateZ(0)); @@ -269,6 +276,9 @@ svg { .w90 { width: 90%; } +.w95 { + width: 95%; +} .w100 { width: 100%; } @@ -534,6 +544,11 @@ $list-paddings-values: 0, 0.25, 0.5, 0.75, 1, 1.25, 2, 3 !default; // specify 2. -ms-flex-pack: end; justify-content: flex-end; } +.flex-justify-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} .flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; diff --git a/templates/@theme-base/reusable-components/_design-system-responsive.scss b/templates/@theme-base/reusable-components/_design-system-responsive.scss index a22d1f5..5acf8e5 100644 --- a/templates/@theme-base/reusable-components/_design-system-responsive.scss +++ b/templates/@theme-base/reusable-components/_design-system-responsive.scss @@ -43,6 +43,13 @@ } .ontablet- { + &flex-column { + flex-direction: column; + & > * { + width: 100%; + flex-basis: auto; + } + } &w100 { width: 100%; } &mw100 { max-width: 100% } } @@ -128,6 +135,12 @@ &min-w100 { min-width: 100%; } + &w100 { + width: 100%; + } + &static { + position: static; + } } diff --git a/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss b/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss index 61a82f0..fe793a3 100644 --- a/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss +++ b/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss @@ -171,6 +171,12 @@ abbr[title] { text-overflow: ellipsis; white-space: nowrap; } +.ellipsis-four-lines { + display: -webkit-box; + -webkit-line-clamp: 4; + -webkit-box-orient: vertical; + overflow: hidden; +} .uppercase { text-transform: uppercase; |