diff options
Diffstat (limited to 'templates/@theme-base')
55 files changed, 3972 insertions, 1486 deletions
diff --git a/templates/@theme-base/pm-styles/_pm-apps-dropdown.scss b/templates/@theme-base/pm-styles/_pm-apps-dropdown.scss new file mode 100644 index 0000000..2df125e --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-apps-dropdown.scss @@ -0,0 +1,59 @@ +.appsDropdown { + &.dropDown { + --min-width: 13em; + --max-width: 15.5em; // Be carefull to not exceed the nav bar + --max-height: 25em; + + --dropdown-border-color: #{$pm-tertiary-grey}; + --dropdown-bg-color: #{$pm-secondary-grey}; + + color: $pm-global-light; + + @include respond-to($breakpoint-small, 'min') { + box-shadow: 0 .5rem 1.5rem 0 rgba(black, .75); + } + + a { + &, + &:hover, + &:focus { + color: $white; + } + } + } + + &-button { + border-radius: $global-border-radius; + padding: .25em; + + &:hover, + &:focus, + &[aria-expanded="true"] { + background-color: $navigation-hover-bg-color; + } + & &-icon { // override icon-16p + width: 1em; + height: 1em; + font-size: 2em; + } + } + + /* No border for now + &-item.dropDown-item { + --bordercolor-input: #{$pm-tertiary-grey}; + } + */ + + &-link { + &, + &:hover, + &:focus { + text-decoration: none; + } + + &:hover, + &:focus { + background-color: rgba(white, .05); + } + } +} diff --git a/templates/@theme-base/pm-styles/_pm-aside.scss b/templates/@theme-base/pm-styles/_pm-aside.scss index 77ac6c6..b20a714 100644 --- a/templates/@theme-base/pm-styles/_pm-aside.scss +++ b/templates/@theme-base/pm-styles/_pm-aside.scss @@ -1,39 +1,29 @@ /* * aside bar */ -.aside { - background: var(--main-bg-color, $pm-global-grey); - width: $aside-bar-width; - min-height: 100vh; - color: $pm-global-light; - flex-shrink: 0; - position: relative; - z-index: 5; - padding-top: 1.7em; -} -.aside-link { - border-radius: 50%; - width: 32px; - height: 32px; - padding: 7px; - background: var(--bgcolor-aside-link, $pm-global-altgrey); + .aside-link { + border-radius: 50%; + width: 32px; + height: 32px; + padding: 7px; + background: var(--bgcolor-aside-link, $pm-global-altgrey); - &:focus, - &:hover, - &:active, - &[aria-current="true"] { - background: $white; - color: $pm-primary; + &:focus, + &:hover, + &:active, + &[aria-current="true"] { + background: $white; + color: $pm-primary; - .aside-linkIcon { - fill: $pm-primary; - } + .aside-linkIcon { + fill: $pm-primary; + } + } + } + .aside-linkIcon { + width: 17px; + height: 17px; + fill: var(--fillcolor-icons, $pm-global-light); } -} -.aside-linkIcon { - width: 17px; - height: 17px; - fill: var(--fillcolor-icons, $pm-global-light); -}
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-badges.scss b/templates/@theme-base/pm-styles/_pm-badges.scss index 2690c6f..897fb50 100644 --- a/templates/@theme-base/pm-styles/_pm-badges.scss +++ b/templates/@theme-base/pm-styles/_pm-badges.scss @@ -1,29 +1,34 @@ /* - * badges/labels + * badges/labels */ +$border-width: 2px !default; [class*="badgeLabel"] { @extend .uppercase; @extend .color-white; - @extend .inbl; + @extend .inline-flex; font-size: rem(11); // to be sure this is the same height everywhere padding: 0 em(2) em(1); line-height: 1; border-radius: $global-border-radius; - border-width: 2px; - border-style: solid; + border-width: $border-width; + border-style: solid; } + .badgeLabel-success { @extend .bg-global-success; border-color: $pm-global-success; } + .badgeLabel-blue { @extend .bg-pm-blue; border-color: $pm-blue; } + .badgeLabel-green { @extend .bg-pv-green; border-color: $pv-green; } + @if ($pm-primary == $pm-blue) { .badgeLabel-primary, .badgeLabel { @@ -38,14 +43,24 @@ border-color: $pv-green; } } + .badgeLabel-grey { @extend .bg-global-grey; border-color: $pm-global-grey; } + +.badgeLabel-greylight { + background: var(--bordercolor-input, $pm-global-muted); + border-color: var(--bordercolor-input, $pm-global-muted); + color: var(--color-main-area, $black); +} + .badgeLabel-warning { @extend .bg-global-attention; border-color: $pm-global-attention; + color: $black; } + .badgeLabel-error { @extend .bg-global-warning; border-color: $pm-global-warning; diff --git a/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss b/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss index b1e8d72..c418354 100644 --- a/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss +++ b/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss @@ -2,12 +2,29 @@ @import "../reusable-components/design-system-config"; -@mixin button-disabled-state-dm { - opacity: .6; +@mixin button-disabled-state ($color: null) { + pointer-events: none; + + @if $color == null { + background-color: $pm-global-muted; + border-color: $pm-global-border; + color: rgba( $pm-global-grey, .3 ); + } + @else { + background-color: rgba($color, .2); + border-color: rgba($color, .25); + color: rgba($color, .5); + } +} + +@mixin button-disabled-state-dm() { background-color: $pm-global-grey; - color: rgba( $pm-global-muted, .6 ); - border-color: rgba( $pm-global-muted, .6 ); + color: rgba( $pm-global-muted, .3 ); pointer-events: none; + border-color: rgba( $pm-global-muted, .3 ); + & svg { + fill: rgba( $pm-global-muted, .3 ); + } } @mixin pm-button-dark { @@ -23,7 +40,7 @@ } &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns &.is-active { - background: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.5); } &[disabled], &.is-disabled { @@ -47,13 +64,13 @@ &.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); + background-color: 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); + background-color: rgba(0, 0, 0, 0.5); } &[disabled], &.is-disabled { @@ -78,10 +95,10 @@ } &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns &.is-active { - background: rgba(0, 0, 0, 0.5); + background-color: 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 d206cf9..5b053a0 100644 --- a/templates/@theme-base/pm-styles/_pm-buttons.scss +++ b/templates/@theme-base/pm-styles/_pm-buttons.scss @@ -1,4 +1,4 @@ - + /* * Buttons */ @@ -11,6 +11,7 @@ border-style: solid; border-width: 1px; text-decoration: none; + transition: .15s easing(easeOutQuint), background-position 0s; & > button { // this is for drop down buttons color: inherit; } @@ -24,27 +25,26 @@ .pm-button { border-color: $pm-global-border; - background: $white; + background-color: $white; color: $pm-global-grey; + &:hover, &:focus, &:focus-within, - &.is-hover { + &.is-hover { color: $pm-global-grey; box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2); } &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns &.is-active { //background-color: $pm-global-border; - background: radial-gradient(closest-side, $white, $pm-global-border 90%); + background-image: radial-gradient(closest-side, transparent, rgba(black, .1)); box-shadow: none; } &[disabled], &.is-disabled { - background-color: $pm-global-muted; - color: rgba( $pm-global-grey, .3 ); - pointer-events: none; + @include button-disabled-state; } /* just to cancel examples */ &.is-active:hover { @@ -57,6 +57,22 @@ &.p0 { padding: 0; } + + &[aria-expanded="true"] .caret-like { + @extend .rotateX-180; + } + + &.pm-select { + padding-right: .6rem; + .mauto { + display: flex; + width: 100%; + } + .mr0-5 { + flex: 1 1 0px; + @extend .ellipsis; + } + } } @@ -77,20 +93,17 @@ &.is-hover { color: $white; box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2); - background: $pm-primary-dark; + background-color: $pm-primary-dark; } &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns &.is-active { - background: $pm-primary-dark; + background-color: $pm-primary-dark; text-shadow: 1px 1px 10px rgba( $white, .3 ),-1px -1px 10px rgba( $white, .3 ); box-shadow: none; } &[disabled], &.is-disabled { - background-color: $pm-global-muted; - color: rgba( $pm-global-grey, .3 ); - border-color: $pm-global-border; - pointer-events: none; + @include button-disabled-state($pm-primary); } /* just to cancel examples */ &.is-hover:hover { @@ -115,15 +128,12 @@ &.is-active { border-color: $pm-primary-dark; color: $pm-primary-dark; - background: radial-gradient(closest-side, $white, $pm-global-border 90%); + background-image: radial-gradient(closest-side, transparent, rgba(black, .1)); box-shadow: none; } &[disabled], &.is-disabled { - background-color: $pm-global-muted; - color: rgba( $pm-global-grey, .3 ); - border-color: $pm-global-border; - pointer-events: none; + @include button-disabled-state; } } @@ -144,20 +154,17 @@ &.is-hover { color: $white; box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2); - background: $pv-green-dark; + background-color: $pv-green-dark; } &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns &.is-active { - background: $pv-green-dark; + background-color: $pv-green-dark; text-shadow: 1px 1px 10px rgba( $white, .3 ),-1px -1px 10px rgba( $white, .3 ); box-shadow: none; } &[disabled], &.is-disabled { - background-color: $pm-global-muted; - color: rgba( $pm-global-grey, .3 ); - border-color: $pm-global-border; - pointer-events: none; + @include button-disabled-state($pv-green); } /* just to cancel examples */ &.is-hover:hover { @@ -182,15 +189,12 @@ &.is-active { border-color: $pv-green-dark; color: $pv-green-dark; - background: radial-gradient(closest-side, $white, $pm-global-border 90%); + background-image: radial-gradient(closest-side, transparent, rgba(black, .1)); box-shadow: none; } &[disabled], &.is-disabled { - background-color: $pm-global-muted; - color: rgba( $pm-global-grey, .3 ); - border: 1px solid $pm-global-border; - pointer-events: none; + @include button-disabled-state; } } @@ -203,10 +207,10 @@ /* modifiers */ .pm-button--large { - padding: em(10) em(20) em(9); // design want 42px height + padding: em(10) em(20) em(9); // design want 42px height } .pm-button--small { - padding: em(1) em(12) em(2); // design want 26px height + padding: em(1) em(12) em(2); // design want 26px height } .pm-button--for-icon { @@ -236,6 +240,7 @@ .pm-group-button:active { position: relative; } + .pm-group-buttons > .pm-group-button:first-child { border-radius: $global-border-radius 0 0 $global-border-radius; border-left-width: 1px; @@ -258,13 +263,43 @@ } } +/* special case for group button with primary colors */ +.pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: $pm-primary; + border-left-width: 0; + &:first-child { + border-left-width: 1px; + } + &:not(:last-child) { + border-right-color: var(--bgcolor-main-area, $white); + } +} + +/* exception for group buttons, disabled state should keep the border */ +.pm-group-button { + &[disabled], + &.is-disabled { + &.pm-button { + border-color: $pm-global-border; + } + &.pm-button-blueborder { + border-color: $pm-primary; + } + &.pv-button-greenborder { + border-color: $pv-green; + } + } +} + + /* aliases for buttons => different per project */ /* primary/link/error/warning/info */ @if ($pm-primary == $pm-blue) { .pm-button--primary { @extend .pm-button-blue; } - .pm-button--primaryborder { + .pm-button--primaryborder, + .pm-button--primaryborderEvenInDarkMode { @extend .pm-button-blueborder; } .pm-button--primaryborder-dark { @@ -275,7 +310,8 @@ .pm-button--primary { @extend .pv-button-green; } - .pm-button--primaryborder { + .pm-button--primaryborder, + .pm-button--primaryborderEvenInDarkMode { @extend .pv-button-greenborder; } .pm-button--primaryborder-dark { @@ -307,41 +343,64 @@ text-decoration: none; background-color: transparent; // to avoid heriting from other classes } + &.nodecoration { + text-decoration: none; + } + &.pm-button--currentColor { + color: currentColor; + } } -.pm-button--error { +.pm-button--error, +.pm-button.pm-button--error { @extend .pm-button-blue; background-color: $pm-global-warning; - border-color: $pm-global-warning; -} -.pm-button--error:focus, -.pm-button--error:hover, -.pm-button--error:not(div):active { // not div is here for a specificity issue for another fix - background-color: $pm-global-warning; - border-color: $pm-global-warning; + border-color: $pm-global-warning; + &:focus, + &:hover, + &:not(div):active { // not div is here for a specificity issue for another fix + background-color: $pm-global-warning; + border-color: $pm-global-warning; + } + &[disabled], + &.is-disabled { + @include button-disabled-state($pm-global-warning); + } } -.pm-button--warning { +.pm-button--warning, +.pm-button.pm-button--warning { @extend .pm-button-blue; background-color: $pm-global-attention; - border-color: $pm-global-attention; -} -.pm-button--warning:focus, -.pm-button--warning:hover, -.pm-button--warning:not(div):active { // not div is here for a specificity issue for another fix - background-color: $pm-global-attention; - border-color: $pm-global-attention; + border-color: $pm-global-attention; + &:focus, + &:hover, + &:not(div):active { // not div is here for a specificity issue for another fix + background-color: $pm-global-attention; + border-color: $pm-global-attention; + } + &[disabled], + &.is-disabled { + @include button-disabled-state($pm-global-attention); + } } .pm-button--info { @extend .pm-button; } /* other aliases requested */ -.pm-button--redborder.pm-button--redborder { // for darkmode... again - @extend .pm-button; - border-color: $pm-global-warning; - color: $pm-global-warning; +.pm-button--redborder, +.pm-button.pm-button--redborder { + @extend .pm-button; + border-color: $pm-global-warning; + color: $pm-global-warning; + &:focus, + &:hover, + &:not(div):active, + &:active { + color: $pm-global-warning; + } } - -.pm-button--whiteborder { +.pm-button--whiteborder, +.pm-button--primary.pm-button.pm-button--whiteborder { border: 1px solid $white; } @@ -349,8 +408,21 @@ .pm-button--noborder { border: 0; } - - .pm-button--currentColor { color: currentColor; -}
\ No newline at end of file +} +.pm-button--pill { + border-radius: 2em; +} +.pm-button--transparent { + /* When using currentColor, you need to set the color you want on a container */ + border: 1px solid currentColor; + color: currentColor; + &:focus, + &:hover, + &:not(div):active, + &:active { + background-color: rgba(black, .2); + color: currentColor; + } +} diff --git a/templates/@theme-base/pm-styles/_pm-choose-account.scss b/templates/@theme-base/pm-styles/_pm-choose-account.scss new file mode 100644 index 0000000..24eb237 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-choose-account.scss @@ -0,0 +1,40 @@ +/* + * Choose account SSO + */ + + + +.button-account-container { + border: 1px solid var(--bordercolor-input, $pm-global-muted); // inconsistent with borders... + max-height: 50vh; + @include respond-to($breakpoint-small) { + max-height: none; + } +} + +.button-account-container-inner { + border-right: 1px solid var(--bordercolor-input, $pm-global-muted); // inconsistent with borders... +} + +.button-account { + + &-login { + transition: opacity .35s easing(easeInOut), visibility 0s; + opacity: 0; + width: 0; + transition-delay: 0s, .35s; + } + + &:focus, + &:hover, + &:active { + background-color: var(--bgcolor-input, $pm-input-background); + + .button-account-login { + opacity: 1; + width: auto; + transition-delay: 0s; + } + + } +} diff --git a/templates/@theme-base/pm-styles/_pm-circlebar.scss b/templates/@theme-base/pm-styles/_pm-circlebar.scss index 462ccd9..8cb6629 100644 --- a/templates/@theme-base/pm-styles/_pm-circlebar.scss +++ b/templates/@theme-base/pm-styles/_pm-circlebar.scss @@ -1,7 +1,10 @@ $stroke-width: 3px !default; // be careful to udpate SVG if you want to update this value +// this component is used for VPN +// and for the moment on Angular/React sidebar .circle-chart__background { - stroke: var(--bgcolor-aside-link, rgba($white,.2)); + stroke: var(--color-main-area, $pm-global-grey); + opacity: .2; stroke-width: $stroke-width; fill: transparent; } @@ -15,18 +18,19 @@ $stroke-width: 3px !default; // be careful to udpate SVG if you want to update t stroke-width: $stroke-width; fill: transparent; animation: circle-chart-fill 2s reverse; - transform: rotate(-90deg); + transform: rotate(-90deg); transform-origin: center; } -.circle-bar--global-attention .circle-chart__circle { +.circle-bar--medium .circle-chart__circle { stroke: $pm-global-attention; } -.circle-bar--global-warning .circle-chart__circle { +.circle-bar--full .circle-chart__circle { stroke: $pm-global-warning; } .circle-chart__percent { - fill: var(--color-standard-text, $white); + fill: var(--color-main-area, rgba($pm-global-grey, .5) ); } + .circle-chart-info { color: var(--color-standard-text, $pm-global-light); } @@ -34,4 +38,4 @@ $stroke-width: 3px !default; // be careful to udpate SVG if you want to update t @keyframes circle-chart-fill { to { stroke-dasharray: 0 100; } -}
\ No newline at end of file +} diff --git a/templates/@theme-base/pm-styles/_pm-color-selector.scss b/templates/@theme-base/pm-styles/_pm-color-selector.scss new file mode 100644 index 0000000..8e37e9c --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-color-selector.scss @@ -0,0 +1,69 @@ +.ColorSelector { + + &-container { + @include respond-to($breakpoint-small, 'min') { + max-width: 13em; + } + } + + &-item { + position: relative; + display: inline-block; + height: 2.5em; + width: 2.5em; + border-radius: 50%; + padding: 0; + margin: .125em; + overflow: hidden; + cursor: pointer; + + &-mask { + position: absolute; + display: inline-flex; + justify-content: center; + align-items: center; + top: 0; + left: 0; + bottom: 0; + right: 0; + border-radius: 50%; + z-index: 2; + background: currentColor; + border: 2px solid var(--bgcolor-main-area, white); + pointer-events: none; + transition: border .1s ease-out; + } + + &.selected &-mask { + border:3px solid rgba(0, 0, 0, .1); + } + + svg { + opacity: 0; + color: white; + display: inline-block; + transition: opacity .1s linear; + } + + &:hover svg { + opacity: .75; + } + + &.selected svg { + opacity: 1; + } + + } + + &-input-color[type="radio"] { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + margin: 0; + cursor: pointer; + } +} diff --git a/templates/@theme-base/pm-styles/_pm-containers.scss b/templates/@theme-base/pm-styles/_pm-containers.scss index e027ad7..e9b44a4 100644 --- a/templates/@theme-base/pm-styles/_pm-containers.scss +++ b/templates/@theme-base/pm-styles/_pm-containers.scss @@ -2,19 +2,22 @@ * containers */ .bordered, -.bordered-container { +.bordered-container, +.dashed, +.dashed-container { border: 1px solid var(--bordercolor-input, $pm-global-border); } -.bordered-container { +.bordered-container, +.dashed-container { border-radius: $global-border-radius; } +.bordered-container--error { + border-color: $pm-global-warning; +} .dashed, .dashed-container { - border: 1px dashed var(--bordercolor-input, $pm-global-border); -} -.dashed-container { - border-radius: $global-border-radius; + border-style: dashed; } .border-bottom { @@ -23,6 +26,9 @@ .border-bottom--dashed { border-bottom-style: dashed; } +.border-bottom--currentColor { + border-bottom-color: currentColor; +} .border-top { border-top: 1px solid var(--bordercolor-input, $pm-global-border); } @@ -40,14 +46,23 @@ border: 1px solid currentColor; } +.borderColor-primary { + border-color: $pm-primary; +} + .shadow-container { - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16); + box-shadow: 0 0 20px 0 $input-shadow-color; +} + +.tiny-shadow-container { + box-shadow: 0 1px 3px 0 var(--bgcolor-main-area, $pm-global-border); + border: 1px solid var(--bordercolor-input, transparent); } .row--orderable { z-index: 666; /* In case the modal is open */ - background-color: $white; - color: $pm-global-grey; + background: var(--bgcolor-main-area, $white); + color: var(--color-main-area, $pm-global-grey); } $block-info-border-width: 3px !default; @@ -128,3 +143,21 @@ summary { border: 0; cursor: pointer; } + + + +/* welcome boxes in a 2 column design */ +$breakpoint-2-columns: 1180 !default; +@include respond-to($breakpoint-2-columns) { + .boxes-placeholder-container { + flex-direction: column; + > * { + margin-bottom: 1em; + width: 100%; + flex-basis: auto; + } + } + .boxes-placeholder-button { + margin-top: 0; + } +} diff --git a/templates/@theme-base/pm-styles/_pm-context-bar.scss b/templates/@theme-base/pm-styles/_pm-context-bar.scss new file mode 100644 index 0000000..49250ba --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-context-bar.scss @@ -0,0 +1,20 @@ +.context-bar { + background: var(--bgcolor-context-bar, $pm-global-muted); + + @include respond-to($breakpoint-medium, 'min') { + width: $context-bar-width; + min-width: $context-bar-min-width; + max-width: var(--width-context-bar, $context-bar-max-width); + border-left: 1px solid var(--bordercolor-input, $pm-global-border); + } + + @include respond-to($breakpoint-medium) { + border-top: 1px solid var(--bordercolor-input, $pm-global-border); + } + + &-inner { + position: sticky; + top: 0; + padding: 2em; + } +} diff --git a/templates/@theme-base/pm-styles/_pm-conversations.scss b/templates/@theme-base/pm-styles/_pm-conversations.scss index 2e7f3d1..184516f 100644 --- a/templates/@theme-base/pm-styles/_pm-conversations.scss +++ b/templates/@theme-base/pm-styles/_pm-conversations.scss @@ -1,278 +1,831 @@ /* + * Shared for placeholder loading + */ +@keyframes loadingItem { + from { opacity: .05; } + to { opacity: .15; } +} + +%item-loading-pseudo { + content: '\00a0'; + display: inline-block; + border-radius: $global-border-radius; + background-color: currentColor; + line-height: 1.2; + opacity: 0; +} + +%appearing-container { + animation: itemFadeIn .5s easing(easeOutQuint); +} + +%placeholder-loading { + animation: loadingItem .5s calc(var(--index, 0) * 20ms) easing(easeOutSine) infinite alternate; +} + +@keyframes itemFadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + + +/* * items (conversations/contacts lists) */ +$container-to-width: 3em !default; .items-column-list { - width: calc( (100% + var(--width-sidebar, #{$width-sidebar}) ) * #{$conversations-column-width/1%/100} ); - border-right: 1px solid var(--bordercolor-input, $pm-global-border); - background: var(--bgcolor-item-column-list, $white); + width: var(--width-conversation-column, calc((100% + var(--width-sidebar, #{$width-sidebar})) * #{$conversations-column-width/1%/100})); +} + +.items-column-list-inner, +.ReactVirtualized__Grid__innerScrollContainer { + border: solid var(--bordercolor-input, $pm-global-border); + border-width: 0 1px; + min-height: 100%; } + +.items-column-list-inner--noborder { + // fix for Contact and ReactVirtualized__Grid + border: 0; +} + .items-column-list--mobile { - width: 100%; + width: 100%; } .items-column-list, .items-column-list--mobile, .view-column-detail { - height: calc(100vh - #{$header-height} - #{$toolbar-height} ); + height: 100%; } .view-column-detail { - background: var(--bgcolor-view-column-detail, $white); + background: var(--bgcolor-view-column-detail, $white); } +$item-container-height: 6.4rem !default; +$item-container-padding-top-bottom: em(8.5) !default; +$item-container-padding-left-right: em(12) !default; + +$item-container-height-compact-mode: 4.8rem !default; +$item-container-row-height-compact-mode: 4rem !default; + .item-container, .item-container-row { - padding: em(15) em(12); - border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); - background-color: var(--bgcolor-item-column-list, $pm-global-light); + @extend %appearing-container; + position: relative; + padding: $item-container-padding-top-bottom $item-container-padding-left-right; // design wants ~64 height + border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); + background-color: var(--bgcolor-item-column-list, $pm-global-muted); + + &::before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + pointer-events: none; + border: 1px solid transparent; + transition: .15s easing(easeOutQuart); + } + + &:hover::before { + border-color: $pm-primary-light; + box-shadow: 0 .125em .25em 0 var(--dropdown-box-shadow, $input-shadow-color); + } } -.item-container-row { - padding: em(8) em(12); + +.item-container { + height: $item-container-height; +} +// fix for Firefox multi-selection issue +.item-checkbox-label > .item-checkbox { + width: 100%; + height: 100%; + z-index: 1; } -.item-container, -.item-container-row { - background: var(--bgcolor-item-column-list, $pm-global-light); +.item-firstline, +.item-secondline { + margin-bottom: .25em; +} + +.item-secondline:empty { + min-height: 1.5em; +} + +/* Compact view */ +.is-shown-when-compact { + display: none; +} + +.is-compact { + + .item-container, + .item-container-row { + height: $item-container-height-compact-mode; + + .item-container-inner { + padding: em(0) em(12); + } + } + .item-container-row { + height: $item-container-row-height-compact-mode; + } + .item-icon-compact { + &::after { + height: $item-container-row-height-compact-mode; + } + } + .item-firstline, + .item-secondline { + margin: 0; + } + + .is-hidden-when-compact { + display: none; + } + + .is-shown-when-compact { + display: flex; + } } .item-is-selected, -.item-container.active { // alias for Angular - background: var(--bgcolor-item-column-active, $conversation-selected-bg); +.item-container.active { + // alias for Angular + background-color: var(--bgcolor-item-column-active, $conversation-selected-bg); +} + +.item-container:not(.item-is-selected):not(.read):not(.active), +.item-container-row:not(.item-is-selected):not(.read):not(.active) { + background-color: var(--bgcolor-unread-item-column-list, $white); } -.item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active) { - background: var(--bgcolor-toolbar, $white); +.item-is-loading { + background-color: var(--bgcolor-main-area, white); + pointer-events: none; + + .item-checkbox-label::before, + .item-icon-compact::before, + .item-senders::before, + .item-senddate-col::before, + .item-senddate-row::before, + .item-weight::before, + .item-star, + .item-subject::before { + @extend %placeholder-loading; + } + + .item-checkbox-label, + .item-icon-compact { + position: relative; + + &::before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + border-radius: $global-border-radius; + background-color: currentColor; + opacity: 0; + } + + .item-icon, + .pm-checkbox-fakecheck { + opacity: 0; + } + } + + .item-senders, + .item-senddate-col, + .item-senddate-row, + .item-weight, + .item-subject { + &::before { + @extend %item-loading-pseudo; + } + } + + .item-senders { + &::before { + width: 35%; + } + } + + .item-senddate-col { + min-width: 6em; + + &::before { + width: 100%; + } + } + + .item-senddate-row { + + &::before { + width: 70%; + } + } + + .item-weight { + min-width: 4em; + + &::before { + width: 100%; + } + } + + .item-subject { + &::before { + width: 60%; + } + } } -$conversation-icon-size: 4rem !default; + + +$conversation-icon-size: 3.2rem !default; + .item-icon { - width: $conversation-icon-size; - height: $conversation-icon-size; - font-size: 1.2rem; - border: 1px solid var(--bordercolor-input, $pm-global-border); - background-color: var(--bordercolor-input, $white); + width: $conversation-icon-size; + height: $conversation-icon-size; + font-size: 1.2rem; + border: 1px solid var(--bordercolor-input, $pm-global-border); + background-color: var(--bordercolor-input, $white); +} + +.item-icon-compact { + width: $conversation-icon-size; + height: $conversation-icon-size; + border-radius: 50%; + font-size: 1.2rem; + transition: background .25s ease; + + &:hover { + background: var(--bordercolor-input, $pm-global-light); + } + &::after { + content: ''; + position: absolute; + left: -#{em(12)}; + right: -#{em(12)}; + top: -#{($item-container-height-compact-mode - $conversation-icon-size)/2}; + height: $item-container-height-compact-mode; + } } .item-checkbox { - // hidden fake check by default - & + .item-icon > .item-icon-fakecheck { - display: none; - } - - // focus state (used global hover state) => NEEDS IMPROVEMENTS - // &:focus + .item-icon { - // & > .item-abbr { - // display: none; - // } - - // & > .item-icon-fakecheck { - // display: flex; - // transform: scale(1); - // } - - // .item-icon-fakecheck-icon { - // fill: $pm-global-border; - // } - // } - - // hover state of checkbox - & + .item-icon:hover { - background-color: $white; - border-color: var(--bordercolor-input, $pm-global-border); - & > .item-abbr { - display: none; - } - & > .item-icon-fakecheck { - display: flex; - transform: scale(1); - } - .item-icon-fakecheck-icon { - fill: $pm-primary; - } - } - - // checked state - &:checked + .item-icon { - background-color: $pm-primary; - border-color: $pm-primary; - & > .item-abbr { - display: none; - } - & > .item-icon-fakecheck { - display: flex; - - animation: conversationIconIn ease .15s; - } - .item-icon-fakecheck-icon { - fill: $white; - } - } + // for allowing hovering larger than fake circle + &:after { + content: ''; + position: absolute; + top: -#{($item-container-height - $conversation-icon-size)/2}; + bottom: -#{($item-container-height - $conversation-icon-size)/2}; + left: em(-12); + width: calc(#{$conversation-icon-size} + #{$item-container-padding-left-right} + .5rem); + // icon size + padding container + tiny margin for comfort + } + + // hidden fake check by default + &+.item-icon>.item-icon-fakecheck { + display: none; + } + + // focus state (used global hover state) => NEEDS IMPROVEMENTS + // &:focus + .item-icon { + // & > .item-abbr { + // display: none; + // } + + // & > .item-icon-fakecheck { + // display: flex; + // transform: scale(1); + // } + + // .item-icon-fakecheck-icon { + // fill: $pm-global-border; + // } + // } + + // hover state of checkbox + &:hover+.item-icon, + &+.item-icon:hover { + background-color: var(--bgcolor-input, $white); + border-color: var(--bordercolor-input, $pm-global-border); + + &>.item-abbr { + display: none; + } + + &>.item-icon-fakecheck { + display: flex; + transform: scale(1); + } + + .item-icon-fakecheck-icon { + fill: $pm-primary; + } + } + + // checked state + &:checked+.item-icon { + background-color: $pm-primary; + border-color: $pm-primary; + + &>.item-abbr { + display: none; + } + + &>.item-icon-fakecheck { + display: flex; + animation: conversationIconIn ease .15s; + } + + .item-icon-fakecheck-icon { + fill: $white; + } + } +} + +// fix pseudo element for row layout +.item-container-row { + .item-checkbox { + &:after { + top: -#{$item-container-padding-top-bottom}; + bottom: -#{$item-container-padding-top-bottom}; + } + } + .item-weight { + min-width: 5em; + } } + @keyframes conversationIconIn { - 0% { - transform: scale(0); - } - 100% { - transform: scale(1); - } + 0% { + transform: scale(0); + } + + 100% { + transform: scale(1); + } } +.item-sender--smaller, +.item-date { + font-size: em(12); +} -.item-titlesender { - line-height: 1.3; +.message-header-metas-container { + height: $conversation-icon-size; } .starbutton { - fill: var(--fillcolor-icons, $pm-global-grey); - width: 1.6rem; - height: 1.6rem; - opacity: .5; - &:focus, - &:hover { - fill: $pm-global-attention; - opacity: 1; - } - [class*="starbutton-icon"] { - position: absolute; - top: 0; - left: 0; - } - .starbutton-icon-starred { - transform: scale(0); - transition: transform .15s ease; - } + color: var(--color-main-area, $pm-global-grey); + width: 1.6rem; + height: 1.6rem; + opacity: .5; + + &:focus, + &:hover { + color: $pm-global-attention; + opacity: 1; + } + + [class*="starbutton-icon"] { + position: absolute; + top: 0; + left: 0; + } + + .starbutton-icon-starred { + transform: scale(0); + transition: transform .15s ease; + } } + .starbutton--is-starred { - opacity: 1; - fill: $pm-global-attention; - .starbutton-icon-starred { - transform: scale(1); - } + opacity: 1; + color: $pm-global-attention; + + .starbutton-icon-starred { + transform: scale(1); + } +} + +.pill-icon { + display: inline-flex; + padding: .125em .5em; + border-radius: 1em; + line-height: 1; + + & > * { + color: white; + } + + &-attachment { + background-color: rgba(black, .5); + // Plus some adaptations for dark theme in _pm-dark-theme.scss + } } /* * view messages */ +.message-conversation-summary { + .is-appearing-content { + @extend %appearing-container; + } + + &-is-loading { + pointer-events: none; + } + + &-is-loading &-header, + &-is-loading &-stat { + position: relative; + + &::before { + @extend %item-loading-pseudo; + @extend %placeholder-loading; + } + } + + &-is-loading &-header { + &::before { + width: 25%; + + @include respond-to($breakpoint-small) { + width: 50%; + } + } + } + + &-is-loading &-stat { + &::before { + width: 2em; + } + } + + &-is-loading &-star { + @extend %placeholder-loading; + } +} + +.trashed-messages, +.message-header { + background-color: var(--bgcolor-item-column-list, $pm-global-muted); +} + .message-container { - border: 1px solid var(--bordercolor-input, $pm-global-border); - border-radius: $global-border-radius; + border: 1px solid var(--bordercolor-input, $pm-global-border); + border-radius: $global-border-radius; + @extend %appearing-container; } + .message-header { - background-color: var(--bgcolor-input, $pm-global-light); - @extend .p1; - @extend .relative; - - &.is-inbound::before { - content: ''; - display: inline-block; - position: absolute; - top: -1px; - left: -1px; - width: 23px; - height: 17px; - transform: skewX(50deg) translateX(-10px); - - 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 { - content: ''; - display: inline-block; - position: absolute; - top: -1px; - right: -1px; - width: 23px; - height: 17px; - transform: skewX(-50deg) translateX(10px); - - 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); - } + border-radius: $global-border-radius; // Can't overflow 'cause of ::before, so repeat radius + padding: .6em; + + .is-appearing-content { + @extend %appearing-container; + } + + &.is-unread { + background: var(--bgcolor-unread-item-column-list, $white); + box-shadow: 2px 2px 3px 0px $input-shadow-color; + font-weight: bold; + } + + &.is-loading { + pointer-events: none; + } + + &.is-loading .message-recipient-item-icon, + &.is-loading &-star { + @extend %placeholder-loading; + } + + &.is-loading .message-recipient-item-icon { + background-color: currentColor; + opacity: 0; + } + + &.is-loading .message-recipient-item-label, + &.is-loading .message-recipient-item-address, + &.is-loading &-metas, + &.is-loading &-to, + &.is-loading &-contact, + &.is-loading .message-show-hide-link-container { + position: relative; + + &::before { + @extend %item-loading-pseudo; + @extend %placeholder-loading; + } + } + + &.is-loading .message-recipient-item-label { + width: 100%; + max-width: 7.5em; + + &::before { + width: 100%; + } + } + + &.is-loading .message-recipient-item-address { + width: 100%; + max-width: 12.5em; + + &::before { + width: 100%; + } + } + + &.is-loading &-metas { + &::before { + width: 10em; + } + } + + &.is-loading &-to { + &::before { + width: 1.25em; + } + } + + &.is-loading &-contact { + &::before { + width: 7.5em; + } + } + + &.is-loading .message-show-hide-link-container { + &::before { + width: 6em; + } + } +} + +// hide extra container when there is nothing inside +.message-header-extra:empty { + display: none; +} + +// when expanded but no full details +.message-header-expanded { + padding: .6em .6em 0 .6em; + .message-show-hide-link { + padding: 0; + } +} + +// alignements when expanded/details +.message-header--showDetails { + .message-show-hide-link-container { + padding-left: calc(#{$container-to-width} + #{$conversation-icon-size} + .75em); + } + + // show/hide details should go below otherwise it will be strangely place depending of recipients + .message-header-recipients { + flex-direction: column; + + &>* { + width: 100%; + flex-basis: auto; + } + } + + .message-recipient-item-expanded { + margin-top: .25em; + + @include respond-to($breakpoint-small) { + margin-top: .5em; + } + + .message-recipient-item:not(:first-child) { + margin-top: .25em; + } + } + + // display of email default none except when details + .message-recipient-item-address, + .message-recipient-item-label { + @extend .ellipsis; + + @include respond-to($breakpoint-small) { + display: block; + } + } + .message-recipient-item-lockIcon::before { + @include respond-to($breakpoint-small) { + content: '\00a0'; + width: 100%; + } + } +} + +.message-detailed-header-extra { + .item-date { + font-size: 1.4rem; + } } /* states classes */ .message-container.is-opened { - > .message-header { - border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); - } + >.message-header { + border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); + } } +.message-container--hasAttachment { + .message-content { + border-radius: 0; + } +} .message-content { - @extend .p1; + transition: .5s easing(easeOutSine); + transition-property: background-color, color; + + &-loading-placeholder { + position: relative; + + &::before { + @extend %item-loading-pseudo; + @extend %placeholder-loading; + width: 100%; + } + } } .message-expand { - padding: 0 .5em .6em; // centers - background-color: var(--bgcolor-input, $pm-global-light); - line-height: .75; + padding: 0 .5em .6em; // centers + background-color: var(--bgcolor-item-column-list, $pm-global-light); + line-height: .75; } .message-attachments { - @extend .p1; - border-top: 1px solid var(--bordercolor-input, $pm-global-border); - font-size: 1.4rem; + font-size: 1.4rem; +} + +.message-attachmentPrimaryAction, +.message-attachmentSecondaryAction { + &:hover, + &:focus-within { + box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2); + } +} +.isDarkMode { + .message-attachmentPrimaryAction, + .message-attachmentSecondaryAction { + background-color: $pm-global-grey; + &:hover, + &:focus-within { + background-color: rgba(0, 0, 0, 0.2); + } + } +} + + +.message-attachmentSecondaryAction { + svg[aria-busy="true"] { + background-size: 16px; + } } .message-attachment { - line-height: 1.3; - padding: 0; - &:hover, - &:focus, - &:active { - text-decoration: none; - } + line-height: 1.3; + padding: 0; + + &:hover, + &:focus, + &:active { + text-decoration: none; + } } + +.message-attachmentList-item-container { + margin-top: .5em; + width: 50%; + + &:first-child, + &:nth-child(2) { + margin-top: 0; + } + &:nth-child(even) { + padding-left: 0.5em; + } + &:nth-child(odd) { + padding-right: 0.5em; + } + // fix on last only if there are more than 4 + &:nth-child(n + 5):last-child { + padding-bottom: 0.5em; + } + + @include respond-to($breakpoint-tiny) { + width: 100%; + &:nth-child(even), + &:nth-child(odd) { + padding-left: 0; + padding-right: 0; + } + &:nth-child(2) { + margin-top: .5em; + } + } + +} + + +.message-attachmentList-item { + &--uploadInProgress { + background-color: var(--bordercolor-input, $pm-global-muted); + .message-attachmentSecondaryAction { + border: 0; + } + } + &--loading { + background: var(--bordercolor-input, $pm-global-muted); + } +} + + +$message-attachment-icon-width: 2.6em !default; .message-attachmentIcon { - width: 2.6em; - svg:not([class*="fill-"]) { - fill: var(--color-main-area, $black); - } + width: $message-attachment-icon-width; + + svg:not([class*="fill-"]) { + fill: var(--color-main-area, $black); + } } .message-attachmentInfo { - border-left: 1px solid var(--bordercolor-input, $pm-global-border); - padding: .3em .7em; + border-left: 1px solid var(--bordercolor-input, $pm-global-border); + padding: .3em .7em; + max-width: calc(100% - #{$message-attachment-icon-width}); } + .message-attachmentSize { - font-size: 1.2rem; - opacity: .5; + font-size: 1.2rem; + opacity: .5; } + .message-infobox { - background: var(--bgcolor-main-area, $white); + background: var(--bgcolor-main-area, $white); } .container-to { - min-width: 3em; + min-width: $container-to-width; + + .item-icon { + &:focus, + &:hover { + .item-abbr { + display: none; + } + + .item-caret { + display: block; + } + } + } } .compose-fab { - position: fixed; - bottom: 1em; - right: 1.6em; - z-index: 77; - height: 6.6rem; - width: 6.6rem; - border-radius: 50%; - padding: .5em; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3); + position: fixed; + bottom: 1em; + right: 1.6em; + z-index: 77; + height: 6.6rem; + width: 6.6rem; + border-radius: 50%; + padding: .5em; + box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3); + transition: bottom .5s easing(easeOutQuart); + + &--is-higher { + bottom: 4em; + } + + &--inBackground { + z-index: 0; + } } -.compose-fab--inBackground { - z-index: 0; -} -.protonmail_quote { - border-left: 1px solid var(--bordercolor-input, $pm-global-border); - padding-left: 1rem; -}
\ No newline at end of file +@import "_pm-reset-display-messages"; diff --git a/templates/@theme-base/pm-styles/_pm-custom-scrollbar.scss b/templates/@theme-base/pm-styles/_pm-custom-scrollbar.scss index a284984..9770856 100644 --- a/templates/@theme-base/pm-styles/_pm-custom-scrollbar.scss +++ b/templates/@theme-base/pm-styles/_pm-custom-scrollbar.scss @@ -1,30 +1,54 @@ -$scrollbar-width: 6px !default; -$scrollbar-color: $black !default; -$scrollbar-thumb-color: #586065 !default; -$scrollbar-thumb-height: 40px !default; - -.customScrollBar-container { - scrollbar-color: $scrollbar-thumb-color $black; - scrollbar-width: thin; -} +$scrollbar-track-color: transparent !default; +$scrollbar-size : .6rem !default; +$scrollbar-margin : .2rem !default; -.customScrollBar-container::-webkit-scrollbar { - width: $scrollbar-width; -} -.customScrollBar-container::-webkit-scrollbar-button:start:decrement, -.customScrollBar-container::-webkit-scrollbar-button:end:increment, -.customScrollBar-container::-webkit-scrollbar-button:vertical:start:increment, -.customScrollBar-container::-webkit-scrollbar-button:vertical:end:decrement { - display: none; -} -.customScrollBar-container::-webkit-scrollbar-track:vertical, -.customScrollBar-container::-webkit-scrollbar-track-piece { - background-color: $black; - border: 0; - border-radius: #{$scrollbar-width/2}; -} -::-webkit-scrollbar-thumb:vertical { - height: $scrollbar-thumb-height; - background-color: $scrollbar-thumb-color; - border-radius: #{$scrollbar-width/2}; +@if $custom-scroll { + + body { + &:not(.isDarkMode) { + --scrollbar-thumb-color : #{rgba(black, .35)}; + --scrollbar-thumb-hover-color: #{rgba(black, .5)}; + } + + &.isDarkMode { + --scrollbar-thumb-color : #{rgba(white, .2)}; + --scrollbar-thumb-hover-color: #{rgba(white, .5)}; + } + } + + * { + $real-size: $scrollbar-size + ($scrollbar-margin * 2); + + // W3C, Firefox + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb-color) $scrollbar-track-color; + + // webkit specific + &::-webkit-scrollbar { + width: $real-size; + height: $real-size; + } + + &::-webkit-scrollbar-thumb { + border: $scrollbar-margin solid transparent; // Margin + background-clip: padding-box; // Booyah! + border-radius: $real-size/2; + background-color: var(--scrollbar-thumb-color); + } + + &::-webkit-scrollbar-track { + background-color: $scrollbar-track-color; + } + + &::-webkit-scrollbar-thumb:horizontal, + &::-webkit-scrollbar-thumb:vertical { + &:hover { + background-color: var(--scrollbar-thumb-hover-color); + } + } + + &::-webkit-scrollbar-corner { + visibility: hidden; + } + } } diff --git a/templates/@theme-base/pm-styles/_pm-dark-theme.scss b/templates/@theme-base/pm-styles/_pm-dark-theme.scss index 02f2d80..7e3dbbc 100644 --- a/templates/@theme-base/pm-styles/_pm-dark-theme.scss +++ b/templates/@theme-base/pm-styles/_pm-dark-theme.scss @@ -5,24 +5,38 @@ @import "./pm-buttons-mixins"; // forms/buttons -.pm-button { +.pm-button:not(.pm-button-blue):not(.pv-button-green):not(.pm-button--primary):not(.pm-button--primaryborderEvenInDarkMode):not(.pm-button--link):not(.pm-button--error):not(.pm-button--warning):not(.pm-button--redborder):not(.pm-button--primaryborder), +.pm-button--info { @include pm-button-dark; } -.pm-button-blueborder { + +// didn’t used extend, not possible in @media for design system website +$primary-border-blue-selectors: ".pm-button-blueborder"; +@if ($pm-primary == $pm-blue) { + $primary-border-blue-selectors: $primary-border-blue-selectors + ", .pm-button--primaryborder"; +} +#{$primary-border-blue-selectors} { @include pm-button-blueborder-dark; } -.pv-button-greenborder { + +$primary-border-green-selectors: ".pv-button-greenborder"; +@if ($pm-primary == $pv-green) { + $primary-border-green-selectors: $primary-border-green-selectors + ", .pm-button--primaryborder"; +} +#{$primary-border-green-selectors} { @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--redborder, +.pm-button.pm-button--redborder { + background-color: transparent; + &:focus, + &:hover, + &:not(div):active, + &:active { + color: $pm-global-warning; + } } .pm-button--link, @@ -40,6 +54,21 @@ a, .link, } } +.pm-group-button { + &[disabled], + &.is-disabled { + &.pm-button { + border-color: var(--bordercolor-input, $pm-global-border); + } + &.pm-button-blueborder { + border-color: $pm-primary-light; + } + &.pv-button-greenborder { + border-color: $pv-green-light; + } + } +} + .pm-field { &[type="search"] { @@ -80,11 +109,16 @@ select.pm-field { } } - .searchbox-field[type="search"] { background-image: none; } +.pm-toggle-label { + & > .pm-toggle-label-text:first-child .pm-toggle-label-img { + fill: $white; + } +} + // loading [aria-busy="true"] { background-image: url(#{$path-images}loading-atom-smaller-dark.svg); @@ -96,14 +130,29 @@ button[aria-busy="true"] { +tr[aria-busy="true"] td, td[aria-busy="true"] { - position: relative; - background-image: none; &::before { background-image: url(#{$path-images}loading-atom-smaller-dark.svg); } } +.progressive[aria-busy="true"] { + &::before { + animation-name: backgroundLoading-dark; + } +} + +@keyframes backgroundLoading-dark { + 0% { + background-color: $pm-secondary-grey; + } + 100% { + background-color: lighten($pm-secondary-grey, 10%); + } +} + + // others details { &[open] > summary { @@ -115,25 +164,52 @@ summary { } +.appConfigBody-darkmode, // for Angular +.isDarkMode { + .display-on-darkmode { + display: flex; + } + .hide-on-darkmode { + display: none; + } +} + + // quick and dirty -.fill-global-grey, -.fill-black { fill: $white; } // dirty, I know +.fill-global-grey:not(.fill-pm-blue):not(.fill-primary), +.fill-black:not(.fill-pm-blue):not(.fill-primary) { fill: $white; } // dirty, I know + +.fill-currentColor { fill: currentColor; } // to avoid some issues + + +.qr-code { + border: 1px solid $white; +} + +.pill-icon-attachment { + background-color: rgba(black, .45); + +} // global :root { --bgcolor-item-column-list: #{$pm-global-grey}; + --bgcolor-unread-item-column-list: #{$pm-global-altgrey}; --bgcolor-view-column-detail: #{$pm-secondary-grey}; --bgcolor-main-area: #{$pm-secondary-grey}; - --bgcolor-subnav: #{$pm-global-grey}; + --bgcolor-context-bar: #{$pm-secondary-grey}; + --bgcolor-subheader: #{$bluish-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-muted: #{$pm-tertiary-grey}; --bgcolor-input: #{$pm-global-altgrey}; + --bgcolor-highlight: #{$pm-global-altgrey}; --color-input: #{$white}; -}
\ No newline at end of file + --dropdown-box-shadow: #{rgba(black, .75)}; + --bgcolor-meterbar: #{rgba(black, .375)}; +} diff --git a/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss b/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss index 33b2b2f..66a51ee 100644 --- a/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss +++ b/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss @@ -1,41 +1,56 @@ .dropDown-logout-button { - color: var(--color-nav-link, $white); - .expand-caret { - display: none; - } - &:focus, - &:hover, - &[aria-expanded="true"] { - .expand-caret { - display: flex; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - } - .dropDown-logout-text { - opacity: 0; - } - } + border-radius: $global-border-radius; + color: var(--color-nav-link, $white); + + &:focus, + &:hover, + &[aria-expanded="true"] { + background-color: $navigation-hover-bg-color; + + } + + &:focus, + &:hover { + .dropDown-logout-initials { + background-color: rgba(0, 0, 0, 0.2); + } + } + + &[aria-expanded="true"] { + .dropDown-logout-initials { + background-color: rgba(0, 0, 0, 0.5); + } + } } -.dropDown-logout-displayName { - max-width: 15em; +.dropDown-logout-text { + margin-top: auto; + margin-bottom: auto; } + +// yes, but only on HUGE screens for looooooooooong accounts +@include respond-to(1400, 'min') { + .dropDown-logout-button { + max-width: 18em; + } +} + .dropDown-logout-email { - font-size: 1rem; + font-size: 1rem; } + .dropDown-logout-initials { - border-color: var(--color-nav-link, $pm-global-border); - min-width: 2.7em; + min-width: 2.5em; + min-height: 2.5em; + border: 1px solid var(--bordercolor-input, $pm-global-border); + color: $white; } @if $rtl-option == true { - [dir="rtl"] { - .dropDown-logout-button > span:first-child { - margin-left: .5em; - margin-right: 0; - } - } + [dir="rtl"] { + .dropDown-logout-button > span:first-child { + margin-left: .5em; + margin-right: 0; + } + } } diff --git a/templates/@theme-base/pm-styles/_pm-dropdown.scss b/templates/@theme-base/pm-styles/_pm-dropdown.scss index 77569d7..c864c1a 100644 --- a/templates/@theme-base/pm-styles/_pm-dropdown.scss +++ b/templates/@theme-base/pm-styles/_pm-dropdown.scss @@ -19,10 +19,10 @@ $dropDown-narrow-width: 8em !default; transform: scale(1,1); visibility: visible; transition-delay: 0s; - width: $dropDown-width; + width: $dropDown-width; background: var(--bgcolor-main-area, $white); border-radius: $global-border-radius; - box-shadow: 0 0 16px 3px rgba(0, 0, 0, 0.16); + box-shadow: 0 0 16px 3px $input-shadow-color; color: var(--color-main-area, $pm-global-grey); } @@ -74,17 +74,13 @@ $dropDown-narrow-width: 8em !default; min-height: 4em; max-height: 30vh; padding: 0; // no padding for the drop shadow :-\ - margin: 0 0 0 1em; - + margin: 0; + 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; - > * { - margin-right: .5em; - } - } .dropDown-contentInner { &::before, @@ -124,7 +120,7 @@ $dropDown-narrow-width: 8em !default; .dropDown-content::before { content: ''; position: absolute; - top: -2rem; + top: -2rem; left: calc(50% - 1rem); width: 1rem; height: 1rem; @@ -173,10 +169,20 @@ $dropDown-narrow-width: 8em !default; } } -.dropDown-link { +.dropDown-link, +.dropDown-link:focus, +.dropDown-link:hover, +.dropDown-link:active { color: currentColor; + text-decoration: none; +} +.dropDown-item:focus-within, +.dropDown-item:hover { + background-color: var(--bgcolor-input, $pm-global-light); +} +.dropDown-item { + padding-left: 1em; } - /* border on items */ .dropDown-item + .dropDown-item { @@ -189,4 +195,4 @@ $dropDown-narrow-width: 8em !default; } .dropDown [aria-expanded="true"] .expand-caret { @extend .rotateX-180; -}
\ No newline at end of file +} diff --git a/templates/@theme-base/pm-styles/_pm-editableSection.scss b/templates/@theme-base/pm-styles/_pm-editableSection.scss new file mode 100644 index 0000000..b629c41 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-editableSection.scss @@ -0,0 +1,30 @@ +@import '~design-system/_sass/reusable-components/_design-system-config.scss'; + +.editableSection-container { + grid-template-columns: min-content minmax(5em, 1fr); + > .border-bottom { + padding-bottom: 1em; + } + + > :not(.border-bottom) { + margin-top: 1em; + } + + // not enough place + &--sizeTablet { + @include respond-to(780) { + --label-width: 15em; + } + } + + @include respond-to($breakpoint-small) { + grid-template-columns: auto; + gap: .5em; + > .onmobile-pb0 { + padding-bottom: 0; + } + > :not(.border-bottom) { + margin-top: 0; + } + } +} diff --git a/templates/@theme-base/pm-styles/_pm-ellipsis-loader.scss b/templates/@theme-base/pm-styles/_pm-ellipsis-loader.scss new file mode 100644 index 0000000..89db271 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-ellipsis-loader.scss @@ -0,0 +1,19 @@ +.ellipsis-loader { + display: inline-block; + width: 1.4em; + vertical-align: baseline; + text-align: left; + + &::before { + content: '\00a0'; + font-family: monospace; + animation: ellipsis-loading linear 1s infinite; + } +} + +@keyframes ellipsis-loading { + 0% { content: '\00a0'; } + 25% { content: '.'; } + 50% { content: '..'; } + 75% { content: '...'; } +} diff --git a/templates/@theme-base/pm-styles/_pm-forms.scss b/templates/@theme-base/pm-styles/_pm-forms.scss index c01ba51..3d424fb 100644 --- a/templates/@theme-base/pm-styles/_pm-forms.scss +++ b/templates/@theme-base/pm-styles/_pm-forms.scss @@ -1,7 +1,9 @@ /* input design */ +.placeholder, ::placeholder { color: var(--color-input, rgba($pm-global-grey, .65)); - font-style: italic; + font-style: normal; + opacity: .6; } // fix "autofill state" @@ -24,6 +26,7 @@ $field-container: 26rem !default; width: $field-container; @extend .mw100; @extend .inbl; + @extend .relative; &.auto { @extend .auto; } @@ -37,11 +40,17 @@ $field-container: 26rem !default; border-radius: $global-border-radius; color: var(--color-input, $pm-global-grey); outline: 0; + height: $default-height-fields; + &.pm-field--tiny, + &.pm-field--small, + &.pm-field--large { + height: auto; + } &:focus, &.focus, &:focus-within { background-color: var(--bgcolor-main-area, $white); - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); + box-shadow: 0 0 10px 0 $input-shadow-color; } &[aria-invalid="true"]:not(:focus), &[aria-invalid="true"]:not(.ng-pristine) { @@ -53,11 +62,13 @@ $field-container: 26rem !default; } &[disabled] { color: rgba( $pm-global-grey, .3 ); - font-style: italic; } &.w100 { width: 100%; } + &.wauto { + width: auto; + } &:-moz-ui-invalid { // fixes some Firefox issues with HTML5 validation box-shadow: none; } @@ -70,6 +81,10 @@ $field-container: 26rem !default; display: none; } } + + &[type="number"] { + padding-right: .25em; + } } @if $rtl-option == true { [dir="rtl"] { @@ -85,12 +100,58 @@ select.pm-field { 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; padding-right: 20px; text-overflow: ellipsis; + overflow: hidden; + cursor: pointer; &::-ms-expand { display: none; } + > optgroup { + background-color: var(--bgcolor-highlight, $pm-global-light); + } + &.pm-field--linkSelect { + border: 1px solid transparent; + padding-left: 0; + width: auto; + color: $pm-primary; + padding-right: 2.5rem; + @if ($pm-primary == $pm-blue) { + background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret-primary-blue"); + } + @else { + background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret-primary-green"); + } + &, + &:focus, + &.focus, + &:focus-within, + &:hover { + background-color: transparent; + box-shadow: none; + } + &:focus, + &.focus, + &:focus-within, + &:hover { + background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret"); + border-color: transparent; + text-decoration: underline; + color: $color-hover; + } + + > * { + color: $pm-primary; + } + } +} + + +textarea { + min-height: $default-height-fields; // Equals pm-field inputs height + &.pm-field { + height: auto; + } } /* firefox bug */ @@ -154,6 +215,10 @@ textarea[required].pm-field.field-pristine:invalid { height: 1.6rem; margin: auto .5rem auto 0; } +.item-icon-compact .pm-checkbox-fakecheck { + margin: auto; + background: var(--bgcolor-input, $white); +} .pm-checkbox-fakecheck-img { margin: auto; width: 1rem; @@ -168,7 +233,7 @@ textarea[required].pm-field.field-pristine:invalid { } } &:focus + .pm-checkbox-fakecheck { - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); + box-shadow: 0 0 10px 0 $input-shadow-color; } &[disabled] + .pm-checkbox-fakecheck, &:indeterminate + .pm-checkbox-fakecheck { @@ -200,6 +265,10 @@ textarea[required].pm-field.field-pristine:invalid { @extend .pm-checkbox-fakecheck; border-radius: 50%; } +.pm-radio--onTop .pm-radio-fakeradio { + margin-top: .25em; +} + .pm-radio-fakeradio::before { content: ''; margin: auto; @@ -210,6 +279,7 @@ textarea[required].pm-field.field-pristine:invalid { transform: scale(0); transition: .15s transform linear; } + .pm-radio { @extend .sr-only; &:checked + .pm-radio-fakeradio::before { @@ -217,7 +287,7 @@ textarea[required].pm-field.field-pristine:invalid { transform: scale(1); } &:focus + .pm-radio-fakeradio { - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); + box-shadow: 0 0 10px 0 $input-shadow-color; } &[disabled] + .pm-radio-fakeradio { background: var(--bgcolor-disabled-checkboxes-radios, $pm-global-muted); @@ -225,7 +295,7 @@ textarea[required].pm-field.field-pristine:invalid { } -/* toogle */ +/* toggle */ $width: 5.5em !default; .pm-toggle-label { margin-top: .15em; @@ -233,17 +303,18 @@ $width: 5.5em !default; width: $width; display: inline-flex; border: 1px solid var(--bordercolor-input, $pm-global-border); - background: var(--bgcolor-input, #fcfdff); + background: var(--bgcolor-view-column-detail, $pm-input-background); border-radius: 2rem; padding: 2px; position: relative; + transition: border-color .15s ease-out; &::before { content: ''; position: absolute; width: calc( #{$width/2} - 2px); transition: transform .25s ease, background-color .25s ease, border-color .25s linear; border-radius: 2rem; - background: var(--bgcolor-input, $pm-global-muted); + background: var(--bgcolor-context-bar, $pm-global-muted); top: 2px; left: 0; bottom: 2px; @@ -259,8 +330,10 @@ $width: 5.5em !default; width: #{$width/2}; position: relative; z-index: 2; - transition: fill .1s steps(1, end); display: inline-flex; + & .pm-toggle-label-img { + transition: fill .1s steps(1, end); + } } } @if $rtl-option == true { @@ -275,10 +348,24 @@ $width: 5.5em !default; } } +.pm-toggle-label-img { + margin: auto; + width: 1.6rem; + height: 1.6rem; + fill: var(--bordercolor-input, $black); + .pm-toggle-label--theme-toggle & { + fill: black; + } +} + +// checked state .pm-toggle-checkbox { @extend .invisible; &:checked + .pm-toggle-label { - & > .pm-toggle-label-text:last-child { + & > .pm-toggle-label-text:first-child .pm-toggle-label-img { + fill: var(--bordercolor-input, $black); + } + & > .pm-toggle-label-text:last-child .pm-toggle-label-img { fill: $white; } &::before { @@ -288,8 +375,17 @@ $width: 5.5em !default; border-color: $pm-primary-dark; } } + &:checked + .pm-toggle-label--theme-toggle { // Theme toggle inside user dropdown + & > .pm-toggle-label-text:last-child .pm-toggle-label-img { + fill: #fce988; + } + &::before { + background: rgba(black, .75); + border-color: rgba(white, .25); + } + } &:focus + .pm-toggle-label { - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.16); + box-shadow: 0 0 10px 0 $input-shadow-color; } &[disabled] + .pm-toggle-label { background: rgba($pm-global-muted, .6); @@ -327,11 +423,7 @@ $width: 5.5em !default; } } } -.pm-toggle-label-img { - margin: auto; - width: 1.6rem; - height: 1.6rem; -} + .pm-toggle-label--small { margin-top: .25em; @@ -345,21 +437,27 @@ $width: 5.5em !default; /* label */ -$pm-label-width: 18em !default; +// $pm-label-width defined in global vars .pm-label { padding-top: .5em; width: var(--label-width, $pm-label-width); padding-right: .5em; + max-width: 100%; + flex-shrink: 0; &.pt0 { padding-top: 0; } &.auto { width: auto; } + &--small { + font-size: 1.2rem; + line-height: 2; + } } // case for forms labelled only with icons (calendar popover, etc.) -$pm-label-icon-width: 2em !default; +$pm-label-icon-width: 2.4em !default; .pm-form--iconLabels .pm-label { width: $pm-label-icon-width; } @@ -373,6 +471,7 @@ $pm-label-icon-width: 2em !default; /* field with icon */ .pm-field-icon-container { @extend .pm-field; // added focus-within inside on pm-field for this fake-field :) + min-height: calc(#{$default-height-fields} + 2px); padding: 0; > .pm-field { border: 0; @@ -393,25 +492,39 @@ $pm-label-icon-width: 2em !default; } } +/* @protonmail.com field */ +.pm-field--username, +.signLayout-container .pm-field--username.pm-field--username { + padding-right: var(--padding-right-field-above, 9em); +} + /* special case for very large inputs in modals, like rich text editor */ .pm-modalContainer .pm-field-container--full { width: calc(100% - var(--label-width, #{$pm-label-width})); } -@include respond-to(1360) { +@include respond-to(1360) { .pm-modalContainer .pm-field-container--full { width: $field-container; } } -@include respond-to(830) { +@include respond-to(830) { .pm-modalContainer .pm-field-container--full { width: calc(100% - var(--label-width, #{$pm-label-width})); } } -@include respond-to($breakpoint-small) { +@include respond-to($breakpoint-small) { .pm-modalContainer .pm-field-container--full { width: 100%; } } -/* end special case */
\ No newline at end of file +/* end special case */ + + +/* special stupid case for signup iframe challenge... not using same styles for the moment */ +.signLayout-container { + .pm-field--username { + padding: em(10) em(16); // design want 42px height (actually 41 to avoid .5px) + } +} diff --git a/templates/@theme-base/pm-styles/_pm-header-searchbar.scss b/templates/@theme-base/pm-styles/_pm-header-searchbar.scss index 44a14ef..169dc02 100644 --- a/templates/@theme-base/pm-styles/_pm-header-searchbar.scss +++ b/templates/@theme-base/pm-styles/_pm-header-searchbar.scss @@ -47,16 +47,31 @@ } .searchbox-advanced-search-button { position: absolute; - right: 0; - top: 0; - bottom: 0; - padding: 0 1rem; + right: .25em; + top: .5em; + bottom: .5em; + padding: 0 .5rem; + border-radius: 50%; + &:focus, + &:hover, + &:active { + background-color: $pm-global-altgrey; + } & > .searchbox-advanced-search-icon { fill: var(--fillcolor-icons, $white); } } -@include respond-to($breakpoint-small) { +.searchbox-container--reset-advanced { + .searchbox-field[type="search"] { + padding-right: 6.25rem; + } + [type="reset"].searchbox-advanced-search-button { + right: 2.75rem; + } +} + +@include respond-to($breakpoint-small) { .searchbox-advanced-search-button { position: static; } @@ -64,7 +79,7 @@ @if $rtl-option == true { [dir="rtl"] { - .searchbox-field[type="search"] { + .searchbox-field[type="search"] { padding-right: calc(2em + 2rem); padding-left: 4rem; background-image: none; @@ -81,5 +96,15 @@ right: auto; left: 0; } + .searchbox-container--reset-advanced { + .searchbox-field[type="search"] { + padding-right: calc(2em + 2rem); + padding-left: 6rem; + } + .searchbox-advanced-search-button { + right: auto; + left: 2.5rem; + } + } } -}
\ No newline at end of file +} diff --git a/templates/@theme-base/pm-styles/_pm-header-topnav.scss b/templates/@theme-base/pm-styles/_pm-header-topnav.scss index 65af0f9..64b60db 100644 --- a/templates/@theme-base/pm-styles/_pm-header-topnav.scss +++ b/templates/@theme-base/pm-styles/_pm-header-topnav.scss @@ -1,101 +1,143 @@ .topnav-link { - border: 1px solid transparent; - padding: 1rem; - color: var(--color-nav-link, $white); - &:focus, - &:hover, - &:active, - &[aria-current="true"] { - color: var(--color-nav-active, $pm-primary); - text-decoration: none; - - > .topnav-icon { - fill: var(--color-nav-active, $pm-primary); - } - } - &[aria-current="true"] { - font-weight: bold; - } - & > svg { - fill: var(--fillcolor-icons, $white); - } + border: 1px solid transparent; + border-radius: $global-border-radius; + padding: 1.25rem 1.75rem; + color: var(--color-nav-link, $white); + text-decoration: none; + + &:focus, + &:hover, + &:active, + &[aria-current="true"] { + background-color: $navigation-hover-bg-color; + color: inherit; + text-decoration: none; + } + + &[aria-current="true"] { + font-weight: bold; + } + + & > svg { + fill: var(--fillcolor-icons, $white); + } + &--blackfriday:before { + content: ''; + position: absolute; + width: 7px; + height: 7px; + background: $pm-global-warning; + border-radius: 50%; + left: calc(1.75rem + 15px); + top: calc(50% - 14px); + } } + @if $rtl-option == true { - [dir="rtl"] { - .topnav-list { - margin-left: 0; - margin-right: 1em; - } - .topnav-icon { - margin-right: 0; - margin-left: .5em; - } - } + [dir="rtl"] { + .topnav-list { + margin-left: 0; + margin-right: 1em; + } + .topnav-icon { + margin-right: 0; + margin-left: .5em; + } + } } /* Decrease margins (was 1em) */ @include respond-to(1500) { - - .topnav-list { - > li { - margin-right: 1px; - } - } - + .topnav-list { + > li { + margin-right: 1px; + } + } } @include respond-to(1300) { - - .topnav-list--four-elements { - .navigation-title { - // equivalent of .sr-only, but impossible to extend in a breakpoint - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } - .topnav-icon { - margin-right: 0; - &.expand-caret { - margin-left: .25em; - } - } - } - - + .topnav-list--four-elements { + .navigation-title { + // equivalent of .sr-only, but impossible to extend in a breakpoint + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + .topnav-icon { + margin-right: 0; + + &.expand-caret { + margin-left: .25em; + } + } + } } +@include respond-to(870) { + .topnav-list--four-elements { + + .topnav-link { + padding-left: .5rem; + padding-right: .5rem; + } + .topnav-link--blackfriday:before { + left: calc(.5rem + 15px); + } + } +} @include respond-to(1100) { + .navigation-title { + // equivalent of .sr-only, but impossible to extend in a breakpoint + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + } + + .topnav-icon { + margin-right: 0; + } +} - .navigation-title { - // equivalent of .sr-only, but impossible to extend in a breakpoint - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; - } - .topnav-icon { - margin-right: 0; - } +@include respond-to($breakpoint-small) { + .topnav-icon { + width: 24px; + height: 24px; + } + .topnav-list--four-elements .topnav-link { + padding-left: 1.75rem; + padding-right: 1.75rem; + } + .topnav-list--four-elements .topnav-link--blackfriday:before, + .topnav-link--blackfriday:before { + left: calc(1.75rem + 22px); + top: calc(50% - 18px); + } } +@include respond-to($breakpoint-tiny) { + .topnav-list--four-elements .topnav-link, + .topnav-link { + padding-left: .5rem; + padding-right: .5rem; + } + .topnav-list--four-elements .topnav-link--blackfriday:before, + .topnav-link--blackfriday:before { + left: calc(.5rem + 22px); + } +} - -@include respond-to($breakpoint-small) { - .topnav-icon { - width: 25px; - height: 25px; - } -}
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-input-button.scss b/templates/@theme-base/pm-styles/_pm-input-button.scss new file mode 100644 index 0000000..2a0f313 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-input-button.scss @@ -0,0 +1,27 @@ +.input-button.pm-button { + width: 2.5em; + padding: em(6); // Same as inputs +} + +.input-button-input { + &:focus + .input-button { + // Same as buttons + box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2); + } + + &:checked + .input-button { + // Need !important because current dark mode management. Remove those as soon as possible. + background-color: $pm-primary !important; + border-color: $pm-primary !important; + } + + &:checked:not(:active) + .input-button { + // Need !important because current dark mode management. Remove those as soon as possible. + color: $white !important; + } + + &:active + .input-button { + // Need !important because current dark mode management. Remove those as soon as possible. + border-color: $pm-global-border !important; + } +} diff --git a/templates/@theme-base/pm-styles/_pm-label-stack.scss b/templates/@theme-base/pm-styles/_pm-label-stack.scss new file mode 100644 index 0000000..abba58d --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-label-stack.scss @@ -0,0 +1,134 @@ +.label-stack { + --item-wide: 10em; + --item-narrow: 1.25em; + --item-scale: .7; + + font-weight: normal; // Overrides when unread email context + + &.mw100 { + --item-wide: 100%; + } + + &-item, + &-overflow-count { + border-radius: 1em; + line-height: 1; + } + + &-item { + max-width: var(--item-wide); + margin: .125em; + background-color: var(--color, currentColor); + + &-button, + &-delete { + color: white; + } + + &-button { + padding: .125em .5em; + text-align: left; + } + + &-delete { + margin-right: .5em; + + &-icon { + display: block; + } + } + } + + &-overflow-count { + background-color: rgba(black, .5); + margin-left: .125em; + cursor: pointer; + + & > * { + display: block; + padding: .125em .375em .125em .25em; + color: white; + } + } + + &:not(.is-stacked) { + margin: -.125em; + + .label-stack-item { + &:hover, + &:focus-within { + box-shadow: 0 0 em(5) 0 rgba(black, .2); // Same hover style than buttons + } + } + } + + &.is-stacked { + overflow: hidden; + align-items: baseline; + flex-wrap: nowrap; + + .label-stack-item { + overflow: hidden; + margin: 0; + transition: transform .1s .2s easing(easeOutQuart), + max-width .2s 0s easing(easeOutQuart); + + &:hover, + &:focus-within, + &:first-child { + transition-delay: 0s, .075s; + } + + &:not(:first-child) { + --button-opacity: 0; + max-width: var(--item-narrow); + transform: scale(var(--item-scale)); + } + + &-button, + &-delete-icon { + transition: opacity .2s .1s easing(easeOutQuart); + } + + &-button { + opacity: var(--button-opacity, 1); + } + + &-delete { + overflow: hidden; + + &-icon { + opacity: var(--button-opacity, 1); + } + } + } + + @include respond-to($breakpoint-small, 'max') { + .label-stack-item-delete { + display: none; + } + } + + @include respond-to($breakpoint-small, 'min') { + &:hover, + &:focus-within { + .label-stack-item { + // Avoid gitch effect on first-child + &:first-child:not(:hover):not(:focus-within) { + --button-opacity: 0; + max-width: var(--item-narrow); + transform: scale(var(--item-scale)); + transition-delay: .2s, 0s; + } + + &:not(:first-child):hover, + &:not(:first-child):focus-within { + --button-opacity: 1; + max-width: var(--item-wide); + transform: scale(1); + } + } + } + } + } +} diff --git a/templates/@theme-base/pm-styles/_pm-layout.scss b/templates/@theme-base/pm-styles/_pm-layout.scss index d459ad2..5ded72d 100644 --- a/templates/@theme-base/pm-styles/_pm-layout.scss +++ b/templates/@theme-base/pm-styles/_pm-layout.scss @@ -11,6 +11,7 @@ hr { /* rounded corners */ .rounded { border-radius: $global-border-radius; } .rounded50 { border-radius: 50%; } +.rounded1e { border-radius: 1em; } .rounded0 { border-radius: 0; } .rounded0-left { border-top-left-radius: 0; border-bottom-left-radius: 0; } .rounded0-right { border-top-right-radius: 0; border-bottom-right-radius: 0; } @@ -19,4 +20,4 @@ kbd { @extend .rounded; 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 be2e286..79d4682 100644 --- a/templates/@theme-base/pm-styles/_pm-loader-animation.scss +++ b/templates/@theme-base/pm-styles/_pm-loader-animation.scss @@ -1,117 +1,79 @@ -$loader-size-big: 200px !default; -$stroke-width-big: 4 !default; - -.loadingAnimation { - animation: protonRotate 3s linear infinite; - will-change: transform; -} - - -@keyframes protonRotate { - 0% { - transform: rotate(0); - } - - 100% { - transform: rotate(360deg); - } -} - - -.loadingAnimation-circle { - fill: transparent; - stroke: var(--fillcolor-icons, $pm-global-grey); - stroke-width: $stroke-width-big; - transform-origin: 50%; - will-change: transform; -} - -.loadingAnimation-circle--pm-primary { - stroke: $pm-primary; +// Init values +$animation-duration : 3s !default; +$second-circle-time-offset: .125s !default; + +// We need to adjust animation for each size. +$stroke-map: ( + default: 4.5, + bold : 6.5, + xbold : 15 +) !default; + +.loadingAnimation { + // We need a different duration than each circle for the whole loader + // to have an animation that seems visually "random", so here, duration +20% and ease. + animation: loaderRotation #{$animation-duration * 1.2} ease-in-out infinite; + will-change: transform; + + @keyframes loaderRotation { + from { transform: rotate(0); } + to { transform: rotate(360deg); } + } + + &-circle { + transform-origin: 50%; + fill: none; + stroke: currentColor; + stroke-width: map-get($stroke-map, default); + will-change: transform; + animation: $animation-duration linear infinite; + + &:nth-of-type(1) { + animation-name: loaderOrbitX; + } + + &:nth-of-type(2) { + animation-name: loaderOrbitY; + animation-delay: $second-circle-time-offset; + } + } + + @each $name, $value in $stroke-map { + + @if $name != 'default' { + &.is-#{$name} &-circle { + stroke-width: $value; + + &:nth-of-type(1) { + animation-name: #{'loaderOrbitX-' + $name}; + } + + &:nth-of-type(2) { + animation-name: #{'loaderOrbitY-' + $name}; + } + } + } + + @each $axis in (X,Y) { + @keyframes #{'loaderOrbit' + $axis + if($name == 'default', '', '-' + $name)} { + from { + transform: #{'rotate' + $axis + '(0)'}; + stroke-width: $value; + } + 25% { + stroke-width: $value * 2; + } + 50% { + stroke-width: $value; + } + 75% { + stroke-width: $value * 2; + } + to { + transform: #{'rotate' + $axis + '(360deg)'}; + stroke-width: $value; + } + } + } + } } -.loadingAnimation-circle--global-light { - stroke: $pm-global-light; -} - -.loadingAnimation-orbit1 { - animation: protonOrbit1 3s linear infinite; -} -.loadingAnimation-orbit2 { - animation: protonOrbit2 3s linear infinite; -} - - -// Generates orbit animation function -// @author Nicolas Hoffmann -// @param {String} $name - animation name -// @param {String} $stroke-width - Default stroke-width of your circle -// @param {Float} $stroke-width-ratioplus - ratio to increase $stroke-width value (mitigates disparition effect during rotation) -// @param {String} $type-rotate -@mixin orbit( $name, $stroke-width, $stroke-width-ratioplus, $type-rotate ){ - - @keyframes #{$name} { - 0% { - transform: unquote("#{$type-rotate}(0)"); - stroke-width: $stroke-width; - } - - 25% { - stroke-width: $stroke-width*$stroke-width-ratioplus; - } - - 50% { - stroke-width: $stroke-width; - } - - 75% { - stroke-width: $stroke-width*$stroke-width-ratioplus; - } - - 100% { - transform: unquote("#{$type-rotate}(360deg)"); - stroke-width: $stroke-width; - } - } - -} - -@include orbit('protonOrbit1', $stroke-width-big, 2.5, 'rotateX'); -@include orbit('protonOrbit2', $stroke-width-big, 2.5, 'rotateY'); - - - -/* smaller version */ -$loader-size-smaller: 20px !default; -$stroke-width-smaller: 1 !default; - -.loadingAnimation-circle--smaller { - stroke-width: $stroke-width-smaller; -} - -.loadingAnimation-orbit1--smaller { - animation: protonOrbit1-smaller 3s linear infinite; -} -.loadingAnimation-orbit2--smaller { - animation: protonOrbit2-smaller 3s linear infinite; -} - -@include orbit('protonOrbit1-smaller', $stroke-width-smaller, 2, 'rotateX'); -@include orbit('protonOrbit2-smaller', $stroke-width-smaller, 2, 'rotateY'); - - - -.atomLoader-text::after { - position: absolute; - overflow: hidden; - display: inline-block; - animation: ellipsis steps(4,end) 900ms infinite; - content: "\2026"; /* ascii code for the ellipsis character */ - width: 0; -} - -@keyframes ellipsis { - to { width: 1.25em } -} - - - diff --git a/templates/@theme-base/pm-styles/_pm-loadingcontent.scss b/templates/@theme-base/pm-styles/_pm-loadingcontent.scss index bafb0e6..0cf480b 100644 --- a/templates/@theme-base/pm-styles/_pm-loadingcontent.scss +++ b/templates/@theme-base/pm-styles/_pm-loadingcontent.scss @@ -1,54 +1,76 @@ [aria-busy="true"] { - background-image: url(#{$path-images}loading-atom-smaller.svg); - background-position: 50% 50%; - background-repeat: no-repeat; + background-image: url(#{$path-images}loading-atom-smaller.svg); + background-position: 50% 50%; + background-repeat: no-repeat; } 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; + padding-left: em(5); + padding-right: em(27); + background-image: url(#{$path-images}loading-atom-smaller-disabled.svg); + background-position: calc(100% - .25em) 50%; + background-size: 1.5em; + background-repeat: no-repeat; +} + +.pm-button--small[aria-busy="true"] { + padding-left: em(2); + padding-right: em(22); + background-size: 1.25em; + background-position: calc(100% - .125em) 50%; } tr[aria-busy="true"] { - height: 5rem; + background-image: none; + + td::after { + content: '\00a0'; // Force a height with default line height + pointer-events: none; + visibility: hidden; + } } +tr[aria-busy="true"] td, td[aria-busy="true"] { - position: relative; - background-image: none; - &::before { - content: ''; - position: absolute; - top: 0; - right: 0; - left: 0; - bottom: 0; - background: $white url(#{$path-images}loading-atom-smaller.svg) 50% 50% no-repeat; - } + position: relative; + background-image: none; + &::before { + content: ''; + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + background: var(--bgcolor-main-area, white) url(#{$path-images}loading-atom-smaller.svg) 50% 50% no-repeat; + } +} + +svg[aria-busy="true"] { + & > * { + visibility: hidden; + } } .progressive[aria-busy="true"] { - position: relative; - background-image: none; - &::before { - content: ''; - position: absolute; - top: 0; - right: 0; - left: 0; - bottom: 0; - background-image: none; - animation: backgroundLoading 1s linear infinite alternate; - } + position: relative; + background-image: none; + &::before { + content: ''; + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + background-image: none; + animation: backgroundLoading 1s linear infinite alternate; + } } @keyframes backgroundLoading { - 0% { - background-color: $white; - } - 100% { - background-color: #eee; - } -}
\ No newline at end of file + 0% { + background-color: $white; + } + 100% { + background-color: #eee; + } +} diff --git a/templates/@theme-base/pm-styles/_pm-meterbar.scss b/templates/@theme-base/pm-styles/_pm-meterbar.scss index 0e395ef..b717caf 100644 --- a/templates/@theme-base/pm-styles/_pm-meterbar.scss +++ b/templates/@theme-base/pm-styles/_pm-meterbar.scss @@ -1,114 +1,88 @@ -/* - * Space remaining bar - */ -$meterbar-height: 6px !default; - -.spacebar-container { - padding: 1rem 2rem; - color: var(--color-standard-text, $white); -} +@mixin meterbar-size($size: 1.5rem) { + height: $size; + border-radius: #{$size/2}; -.spacebar { - /* Reset the default appearance */ - //-webkit-appearance: none; // well, because Chrome. - -moz-appearance: none; - //-ms-appearance: none; - /* autoprefixer: ignore next */ - appearance: none; - - height: $meterbar-height; - border-radius: #{$meterbar-height/2}; - background: var(--bgcolor-spacebar, $black); - - &::-webkit-meter-bar { - background: var(--bgcolor-spacebar, $black); - border-radius: #{$meterbar-height/2}; - } - - // &::-webkit-meter-optimum-value { - // background: $pm-primary; - // border-radius: #{$meterbar-height/2}; - // } - &::-webkit-meter-optimum-value { - background: $pm-primary; - border-radius: #{$meterbar-height/2}; - } - &:-moz-meter-optimum::-moz-meter-bar { - border-radius: #{$meterbar-height/2}; - background: $pm-primary; - } - -} + &::-moz-meter-bar { + border-radius: #{$size/2}; + } + + &::-webkit-meter-bar { + height: $size; // Chrome 83 does not make meter and its bar the same height -_-v + } + + &::-webkit-meter-optimum-value { + border-radius: #{$size/2}; + } -// .spacebar-percent { -// border-radius: 3px; -// background: $pm-primary; -// height: 6px; -// position: absolute; -// top: 0; -// left: 0; -// } - -/* to target IE/EDGE: hack */ -// _:-ms-input-placeholder, :root { -// .spacebar { -// visibility: hidden; -// } -// .spacebar-gauge { -// visibility: visible; -// } -// } - -// .spacebar-version { -// color: rgba($white, .3); -// } - - -.setting-meterbar { - //-webkit-appearance: none; - -moz-appearance: none; - //-ms-appearance: none; - /* autoprefixer: ignore next */ - appearance: none; - height: 1.5rem; - background: var(--bordercolor-input, $pm-global-muted); - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); - - &::-webkit-meter-bar { - background: none; /* Required to get rid of the default background property */ - display: inherit; - border: 0; // For Edge - } - &::-moz-meter-bar { - display: inherit; - } - &::-webkit-meter-optimum-value { - background: $pm-global-success; - } - &::-webkit-meter-suboptimum-value { - background: $pm-global-attention; - } - &::-webkit-meter-even-less-good-value { - background: $pm-global-warning; - } - - &:-moz-meter-optimum::-moz-meter-bar { - background: $pm-global-success; - } - &:-moz-meter-sub-optimum::-moz-meter-bar { - background: $pm-global-attention; - } - &:-moz-meter-sub-sub-optimum::-moz-meter-bar { - background: $pm-global-warning; - } + &::-webkit-meter-suboptimum-value { + border-radius: #{$size/2}; + } + &::-webkit-meter-even-less-good-value { + border-radius: #{$size/2}; + } } -.setting-meterbar--high { - &::-webkit-meter-suboptimum-value { - background: $pm-global-warning; - } - &:-moz-meter-sub-optimum::-moz-meter-bar { - background-color: $pm-global-warning; - } -}
\ No newline at end of file +.meterbar { + @include meterbar-size; + + width: 100%; + background: var(--bgcolor-meterbar, $pm-global-muted); + + //-webkit-appearance: none; // Can't. Well, because Chrome. + // -moz-appearance: none; + /* autoprefixer: ignore next */ + // appearance: none; + + + &::-webkit-meter-bar { + border: none; + background: none; + } + + &::-moz-meter-bar { + display: inherit; + } + + &:not(#{&}--primary) { + &::-webkit-meter-optimum-value { + background: $pm-global-success; + } + &::-webkit-meter-suboptimum-value { + background: $pm-global-attention; + } + &::-webkit-meter-even-less-good-value { + background: $pm-global-warning; + } + + &:-moz-meter-optimum::-moz-meter-bar { + background: $pm-global-success; + } + &:-moz-meter-sub-optimum::-moz-meter-bar { + background: $pm-global-attention; + } + &:-moz-meter-sub-sub-optimum::-moz-meter-bar { + background: $pm-global-warning; + } + } + + &--primary { + &::-webkit-meter-optimum-value { + background: $pm-primary; + } + &::-webkit-meter-suboptimum-value { + background: $pm-primary; + } + &::-webkit-meter-even-less-good-value { + background: $pm-primary; + } + + &::-moz-meter-bar { + background: $pm-primary; + } + } + + &.is-thin { + @include meterbar-size(.375em); + } +} diff --git a/templates/@theme-base/pm-styles/_pm-mini-calendar.scss b/templates/@theme-base/pm-styles/_pm-mini-calendar.scss index 5ec5071..65368bd 100644 --- a/templates/@theme-base/pm-styles/_pm-mini-calendar.scss +++ b/templates/@theme-base/pm-styles/_pm-mini-calendar.scss @@ -35,9 +35,6 @@ $minicalendar-bg-color-range-selection: #51555F !default; .minicalendar-day { color: var(--color-main-area, $minicalendar-day-color); } -.minicalendar-icon { - fill: $minicalendar-day-color; -} .minicalendar-days { user-select: none; } @@ -76,6 +73,7 @@ $minicalendar-bg-color-range-selection: #51555F !default; min-width: $minicalendar-cell-size; min-height: $minicalendar-cell-size; } + .minicalendar-day[aria-current="date"]::before { content: attr(data-current-day); speak: none; @@ -84,13 +82,21 @@ $minicalendar-bg-color-range-selection: #51555F !default; left: 0; right: 0; bottom: 0; + font-weight: bold; line-height: 2.3; // check modifier below when no week displayed - color: $white; - font-weight: bold; - background: $pm-primary-dark; + background: $calendar-today-color; border-radius: 50%; } +.minicalendar-day[aria-current="date"][aria-pressed=true]::before { + background: $calendar-selected-day-color; +} +// fix in case of range selection in responsive view +$mini-calendar-currentDay-size: 2.5em !default; +.minicalendar-day--range.minicalendar-day[aria-current="date"]::before { + left: calc(50% - #{$mini-calendar-currentDay-size/2}); + max-width: $mini-calendar-currentDay-size; +} .minicalendar-grid--displayWeekNumber .minicalendar-day { &[aria-current="date"]::before { @@ -106,15 +112,11 @@ $minicalendar-bg-color-range-selection: #51555F !default; 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; + background: $calendar-selected-day-color; border-radius: 50%; } @@ -139,6 +141,10 @@ $minicalendar-day-marker-size: 3px !default; } } +.minicalendar-day--range { + width: 100%; +} + .minicalendar-day--range-bound { background: $pm-primary; } @@ -154,7 +160,7 @@ $minicalendar-day-marker-size: 3px !default; .minicalendar { .minicalendar-day--range-bound-begin, .minicalendar-day--range-bound-begin:hover, - .minicalendar-day--range-bound-begin:focus { + .minicalendar-day--range-bound-begin:focus { border-top-left-radius: 40%; border-bottom-left-radius: 40%; } diff --git a/templates/@theme-base/pm-styles/_pm-modal.scss b/templates/@theme-base/pm-styles/_pm-modal.scss index f7414bc..5ea41aa 100644 --- a/templates/@theme-base/pm-styles/_pm-modal.scss +++ b/templates/@theme-base/pm-styles/_pm-modal.scss @@ -15,6 +15,7 @@ $modal-wider-width: 70% !default; $modal-wider-max-width: 100rem !default; $modal-full-dimension: 98% !default; +$modal-full-max-width: 150rem !default; $modal-smaller-width: 28em !default; @@ -114,6 +115,9 @@ $modal-smaller-width: 28em !default; animation-fill-mode: both; } +.pm-modal--auto { + width: auto; +} .pm-modal--smaller { width: $modal-smaller-width; } @@ -128,27 +132,32 @@ $modal-smaller-width: 28em !default; max-height: $modal-full-dimension; margin: 1%; } +.pm-modal--heightAuto { + height: auto; + max-height: $modal-full-dimension; + margin-top: 1%; + margin-bottom: 1%; +} .pm-modalClose { position: absolute; - @extend .flex; right: .5rem; - top: 1rem; + top: .5rem; + @extend .flex; + overflow: hidden; background: transparent; border-radius: 1em; - color: $pm-global-grey; border: 0; - font-size: 2em; + font-size: 1em; padding: 0; line-height: 1; cursor: pointer; + z-index: 1; } -.pm-modalClose-icon { - fill: $pm-global-grey; -} + // not defined, left this in case of // .pm-modalClose:focus, // .pm-modalClose:hover, @@ -171,6 +180,7 @@ $modal-smaller-width: 28em !default; flex-direction: column; flex: 1 1 auto; overflow: auto; + position: relative; } .pm-modalHeader { @@ -181,11 +191,12 @@ $modal-smaller-width: 28em !default; font-size: 2.2rem; line-height: 1.5; margin-bottom: 0; - padding-right: 1em; } .pm-modalFooter { padding: rem(15) rem(30) rem(30); flex: 0; + + min-height: 7.9rem; // only for Safari the ugly [class*="pm-button"] { // only for Safari the ugly min-height: 3.4rem; } @@ -193,35 +204,21 @@ $modal-smaller-width: 28em !default; .pm-modalContentInner { position: relative; - overflow: auto; + overflow-x: hidden; + overflow-y: auto; flex: 1 1 auto; padding: 0 rem(30); 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; -} -.pm-modalContentInner { - &::before, - &::after { - content: ''; - position: relative; - display: block; - z-index: 1; - background: var(--bgcolor-main-area, $white); - height: 10px; + + > p:first-child { + margin-top: 0; + } + > p:last-child { + margin-bottom: 0; } -} -.pm-modalContentInner > p:first-child { - margin-top: 0; -} -.pm-modalContentInner > p:last-child { - margin-bottom: 0; } - - // adaptation for labels $pm-label-shorter-width: 10em !default; .pm-modal--shorterLabels .pm-label { @@ -234,6 +231,13 @@ $pm-label-shorter-width: 10em !default; } } + +// modal with title visually hidden +.pm-modalHeader--no-title { + padding-top: 2rem; +} + + // single button on right .pm-modalFooter [class*="pm-button"]:only-child { margin-left: auto; @@ -247,13 +251,13 @@ $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; + padding-bottom: 1rem; + min-height: 5.9rem; // only for Safari the ugly } .pm-modalHeader { padding-top: 1rem; @@ -274,4 +278,10 @@ $pm-label-shorter-width: 10em !default; } } - +@include respond-to($breakpoint-large, 'min') { + .pm-modal--full { + max-width: $modal-full-max-width; + margin-left: auto; + margin-right: auto; + } +} diff --git a/templates/@theme-base/pm-styles/_pm-navigation.scss b/templates/@theme-base/pm-styles/_pm-navigation.scss index 46a41e1..d8e7e0a 100644 --- a/templates/@theme-base/pm-styles/_pm-navigation.scss +++ b/templates/@theme-base/pm-styles/_pm-navigation.scss @@ -1,25 +1,28 @@ /* * navigation */ +$navigation-fillcolor-icons: #6D7178 !default; +$padding-left-link: 2rem !default; -.navigation__link { - padding: 1.1rem 1em 1.1rem 2rem; - line-height: 1.3; - color: var(--color-nav-link, $white); +.navigation__link, +.navigation__link--groupHeader { + padding: .95rem 1em .95rem $padding-left-link; + color: var(--color-nav-link, $white); text-decoration: none; display: block; } @if $rtl-option == true { [dir="rtl"] { - .navigation__link { - padding: .75rem 3rem .75rem 1rem; + .navigation__link, + .navigation__link--groupHeader { + padding: .95rem $padding-left-link .95rem 1em; } } } .navigation__icon { - fill: var(--fillcolor-icons, #6D7178); + color: var(--fillcolor-icons, $navigation-fillcolor-icons); } .navigation__refresh { @@ -28,34 +31,150 @@ .navigation__link:focus, .navigation__link:hover { - background: rgba(255,255,255,.05); - color: var(--color-nav-link, $pm-global-light); + background: $navigation-hover-bg-color; + color: var(--color-nav-link, $pm-global-light); text-decoration: none; - .navigation__icon { - fill: var(--fillcolor-icons, $white); - } } [aria-current="page"].navigation__link { - background: var(--main-bg-color, $pm-global-grey); - color: var(--color-nav-active, $pm-primary); + background: $navigation-hover-bg-color; + color: var(--color-nav-active, $white); font-weight: bold; - - &:hover .navigation__icon, + + &:hover .navigation__icon:not(.navigation__icon--expand), .navigation__icon { - fill: var(--color-nav-active, $pm-primary); + color: var(--color-nav-active, $white); } - + .navigation__refresh { display: inline-flex; } } + +// labels/folders sections +.navigation__link--groupHeader-link { + color: var(--color-nav-link, $white); + .navigation__icon--expand { + color: var(--fillcolor-icons, $navigation-fillcolor-icons); + } + //&:focus, // gimme focus-visible !!!! + &:hover { + color: var(--color-nav-link, $pm-global-light); + .navigation__icon { + color: var(--fillcolor-icons, $white); + } + } +} + +/* expand hover only on button + groupHeader */ +.navigation__link--groupHeader-link { + color: var(--fillcolor-icons, $navigation-fillcolor-icons); +} +.navigation__link--expand:focus, +.navigation__link--expand:hover, +//.navigation__link--groupHeader-link:focus, +.navigation__link--groupHeader-link:hover { + .navigation__icon--expand { + color: var(--fillcolor-icons, $white); + } +} + +/* items counters */ .navigation__counterItem { - background: rgba($white, 0.1); + background: $pm-primary; + color: $white; font-size: 1.1rem; - padding: .1em em(6, 11) .2em; - font-weight: normal; + padding: 0.2rem .4em 0; // em value for top gives non rounded value, so rem + border-radius: 1.1rem; + line-height: 1; + height: 1.6rem; + font-variant: tabular-nums; &:empty { display: none; // removes a bug on Webkit } -}
\ No newline at end of file +} + + +/* Sub folders */ +.navigation__item { + [data-level="1"] { + padding-left: 1em; + } + [data-level="2"] { + padding-left: 2em; + } +} + + + +/* Sub-navigation */ +.navigation__sublist { + margin-left: $padding-left-link; + overflow: hidden; + opacity: 1; + transition: visibility 0s ease, transform .5s ease, opacity .5s ease, max-height .5s ease ; + transform-origin: top center; + transform: scale(1,1); + max-height: 44em; + visibility: visible; + transition-delay: 0s; + &[aria-hidden="true"] { + display: block; + opacity: 0; + max-height: 0; + visibility: hidden; + transform: scale(1,0); + transition-duration: 0s, .25s, .25s, .25s; + transition-delay: .5s, 0s, 0s, 0s; + } +} +.navigation__subitem { + margin-left: .7rem; +} +.navigation__sublink { + border-left: 2px solid $navigation-fillcolor-icons; + display: block; + padding: .75rem 1rem .75rem 1.5rem; + text-decoration: none; + color: var(--color-nav-link, $white); + &:focus, + &:hover { + background: $navigation-hover-bg-color; + color: var(--color-nav-link, $pm-global-light); + text-decoration: none; + } + &:hover { + border-left: 2px solid var(--color-nav-link, rgba($pm-global-light, .5)); + } + &[aria-current="true"] { + border-left: 2px solid var(--color-nav-active, $white); + font-weight: bold; + } +} + + +@if $rtl-option == true { + [dir="rtl"] { + .navigation__sublist { + margin-left: 0; + margin-right: $padding-left-link; + } + .navigation__subitem { + margin-left: 0; + margin-right: .7rem; + } + .navigation__sublink { + border-left: 0; + border-right: 2px solid $navigation-fillcolor-icons; + padding: .75rem 1.5rem .75rem 1rem; + &:hover { + border-left: 0; + border-right: 2px solid var(--color-nav-link, $pm-global-light); + } + &[aria-current="true"] { + border-left: 0; + border-right: 2px solid var(--color-nav-active, $pm-primary); + } + } + } +} diff --git a/templates/@theme-base/pm-styles/_pm-notifications.scss b/templates/@theme-base/pm-styles/_pm-notifications.scss index 93ed558..6215758 100644 --- a/templates/@theme-base/pm-styles/_pm-notifications.scss +++ b/templates/@theme-base/pm-styles/_pm-notifications.scss @@ -79,13 +79,21 @@ } -@include respond-to($breakpoint-small) { +@include respond-to($breakpoint-small) { .notifications-container { - left: 1em; - right: 1em; - -webkit-transform: none; - transform: none; - text-align: center; + text-align: center; } -}
\ No newline at end of file +} + +@include respond-to($breakpoint-tiny) { + + .notifications-container, + [class*="notification-"] { + -webkit-transform: none; + transform: none; + left: 1em; + right: 1em; + width: calc(100% - 2em); + } +} diff --git a/templates/@theme-base/pm-styles/_pm-overview-grid.scss b/templates/@theme-base/pm-styles/_pm-overview-grid.scss new file mode 100644 index 0000000..0ec1f6b --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-overview-grid.scss @@ -0,0 +1,20 @@ +/* + * settings home + */ + +.overview-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(25rem,1fr)); + grid-auto-flow: row dense; + grid-gap: 2rem; + + &-item { + &--tall { + grid-row: span 2; + } + + &--full { + grid-column: 1 / -1; + } + } +} diff --git a/templates/@theme-base/pm-styles/_pm-progress-contact.scss b/templates/@theme-base/pm-styles/_pm-progress-contact.scss deleted file mode 100644 index eb4beff..0000000 --- a/templates/@theme-base/pm-styles/_pm-progress-contact.scss +++ /dev/null @@ -1,37 +0,0 @@ -$progress-contact-height: 6px !default; - -.progress-contact { - /* Reset the default appearance */ - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - - background: var(--bordercolor-input, $pm-global-border); - // for Edge/IE - color: $pm-primary; - - border-radius: #{$progress-contact-height/2}; - height: $progress-contact-height; - - &::-webkit-progress-bar { - background-color: var(--bordercolor-input, $pm-global-border); - border-radius: #{$progress-contact-height/2}; - } - - &::-webkit-progress-value { - border-radius: #{$progress-contact-height/2}; - background: $pm-primary; - transition: .15s width ease; - } - - &::-moz-progress-bar { - border-radius: #{$progress-contact-height/2}; - background: $pm-primary; - transition: .15s width ease; - } - - &::-ms-fill { - border-color: currentColor; - } -}
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-progressbar.scss b/templates/@theme-base/pm-styles/_pm-progressbar.scss new file mode 100644 index 0000000..339edc5 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-progressbar.scss @@ -0,0 +1,66 @@ +@mixin progressbar-size($size: .5em) { + height: $size; + border-radius: #{$size/2}; + + &::-webkit-progress-bar { + border-radius: #{$size/2}; + } + + &::-webkit-progress-value { + border-radius: #{$size/2}; + } + + &::-moz-progress-bar { + border-radius: #{$size/2}; + } +} + +.progressbar { + @include progressbar-size(); + + background: var(--bordercolor-input, $pm-global-border); + color: $pm-primary; + appearance: none; + + &::-webkit-progress-bar { + background-color: var(--bordercolor-input, $pm-global-border); + } + + &::-webkit-progress-value { + background: $pm-primary; + transition: .25s width easing(easeInOutQuint); + } + + &::-moz-progress-bar { + background: $pm-primary; + transition: .25s width easing(easeInOutQuint); + } + + &::-ms-fill { + border-color: currentColor; + } + + @each $variant, $color in ( + disabled : darken($pm-global-muted, 25%), + running : $pm-global-info, + success : $pm-global-success, + warning : $pm-global-attention, + error : $pm-global-warning + ) { + &--#{$variant} { + color: $color; + + &::-webkit-progress-value { + background: $color; + } + + &::-moz-progress-bar { + background: $color; + } + } + } + + &.is-thin { + @include progressbar-size(.25em); + } +} diff --git a/templates/@theme-base/pm-styles/_pm-reset-display-messages.scss b/templates/@theme-base/pm-styles/_pm-reset-display-messages.scss new file mode 100644 index 0000000..15cb319 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-reset-display-messages.scss @@ -0,0 +1,22 @@ +// reset/display fixes for emails contents +.message-content { + @extend .p1; + // rules coming from Angular + box-sizing: content-box; // to avoid problems in some emails + border-radius: 0 0 $global-border-radius $global-border-radius; + + // remove reset margins + blockquote, dl, ol, p, pre, td, th, ul { + margin-top: 0; + margin-bottom: 0; + } + p { + margin-top: 1em; + margin-bottom: 1em; + } + + table { + margin-bottom: 0; + } + +} diff --git a/templates/@theme-base/pm-styles/_pm-scale.scss b/templates/@theme-base/pm-styles/_pm-scale.scss new file mode 100644 index 0000000..37f3994 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-scale.scss @@ -0,0 +1,6 @@ +.scale-buttons-container { + display: grid; + grid-template-columns: repeat(auto-fit, 2.5em); + grid-gap: 0.5rem; + justify-content: space-between; +} diff --git a/templates/@theme-base/pm-styles/_pm-scrollshadow.scss b/templates/@theme-base/pm-styles/_pm-scrollshadow.scss new file mode 100644 index 0000000..6f23256 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-scrollshadow.scss @@ -0,0 +1,37 @@ +$scrollshadow-height: .5rem !default; + +.scrollshadow { + + &-sticky { + position: sticky; + display: block; + height: $scrollshadow-height; + + &--top { + top: 0; + background-image: radial-gradient(farthest-side at 50% 0, var(--bordercolor-input, #acb0bf), transparent); + } + + &--bottom { + bottom: 0; + background-image: radial-gradient(farthest-side at 50% 100%, var(--bordercolor-input, #acb0bf), transparent); + } + } + + &-static { + position: absolute; + display: block; + left: 0; + right: 0; + height: $scrollshadow-height; + background: var(--bgcolor-main-area, #fff); + + &--top { + top: 0; + } + + &--bottom { + bottom: 0; + } + } +} diff --git a/templates/@theme-base/pm-styles/_pm-settings-home.scss b/templates/@theme-base/pm-styles/_pm-settings-home.scss deleted file mode 100644 index fbc7541..0000000 --- a/templates/@theme-base/pm-styles/_pm-settings-home.scss +++ /dev/null @@ -1,13 +0,0 @@ -/* - * settings home - */ -.settings-grid-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); -} -.setting-grid { - padding-right: 1em; -} -.setting-grid--tall { - grid-row: span 2; -}
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-stepdots.scss b/templates/@theme-base/pm-styles/_pm-stepdots.scss new file mode 100644 index 0000000..dfd0d21 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-stepdots.scss @@ -0,0 +1,27 @@ +/* + * + */ + +.stepDots { + + &-item:not(:last-child) { + margin-right: .5em; + } + + &-dot { + width: .8rem; + height: .8rem; + background-color: var(--bordercolor-input, $pm-global-border); + transition: background-color .25s easing(ease); + + &:focus, + &:hover, + &:active { + background-color: $pm-primary; + } + &[aria-selected="true"] { + background-color: var(--secondary-bg-color, $pm-global-altgrey); + } + } + +} diff --git a/templates/@theme-base/pm-styles/_pm-sticky-header.scss b/templates/@theme-base/pm-styles/_pm-sticky-header.scss index c478872..e5baac2 100644 --- a/templates/@theme-base/pm-styles/_pm-sticky-header.scss +++ b/templates/@theme-base/pm-styles/_pm-sticky-header.scss @@ -21,16 +21,21 @@ $sticky-title-height: 10rem !default; .container-section-sticky { padding: 3em 2em 0 2em; - max-width: 85ch; // avoid too long lines + max-width: 120ch; // avoid too long lines margin-left: auto; margin-right: auto; } + +.container-section-sticky.pt0 { // 😓 + padding-top: 0; +} + .container-section-sticky--fullwidth { max-width: none; } .container-section-sticky-section { - margin-bottom: 12rem; + margin-bottom: 8rem; } @@ -41,7 +46,7 @@ $sticky-title-height: 10rem !default; } // not sticky on mobile -@include respond-to($breakpoint-small) { +@include respond-to($breakpoint-small) { .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 deleted file mode 100644 index 7d78646..0000000 --- a/templates/@theme-base/pm-styles/_pm-subnav.scss +++ /dev/null @@ -1,25 +0,0 @@ -/* - * subnavigation - */ - -.subnav { - width: var(--width-subnav, $subnav-width); - background: var(--bgcolor-subnav, $pm-global-light); -} -.subnav-inner { - position: -webkit-sticky; - position: sticky; - top: 0; - padding: 2em; -} -.subnav-link { - @extend .nodecoration; - 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; -}
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-table-plans.scss b/templates/@theme-base/pm-styles/_pm-table-plans.scss index 1158f29..55096ce 100644 --- a/templates/@theme-base/pm-styles/_pm-table-plans.scss +++ b/templates/@theme-base/pm-styles/_pm-table-plans.scss @@ -9,10 +9,6 @@ @extend .min-w35e; } -.pm-simple-table-row-th { - font-weight: normal; -} - .pm-plans-table { caption { transform: scale(0); diff --git a/templates/@theme-base/pm-styles/_pm-table.scss b/templates/@theme-base/pm-styles/_pm-table.scss index e17e38f..867cf26 100644 --- a/templates/@theme-base/pm-styles/_pm-table.scss +++ b/templates/@theme-base/pm-styles/_pm-table.scss @@ -2,51 +2,118 @@ * tables */ .pm-simple-table { - @extend .border-collapse; - @extend .noborder; - @extend .w100; - caption { - transform: scale(0); - } -} -.pm-simple-table td, -.pm-simple-table th { - padding: em(9); - border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); -} -.pm-simple-table th:not(.pm-simple-table-row-th) { - @extend .uppercase; - @extend .alignleft; - &.aligncenter { - @extend .aligncenter; - } - &.alignright { - @extend .alignright; - } -} + @extend .border-collapse; + @extend .noborder; + @extend .w100; -.pm-plans-table-row--highlighted { - background-color: var(--bgcolor-input, $pm-global-light); -} + caption { + transform: scale(0); + } -/* alternate bg for rows */ -.pm-simple-table--alternate-bg-row tbody tr:nth-child(odd){ - background-color: var(--bgcolor-input, $pm-global-light); -} + td, + th { + padding: em(9); + border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); + } -.pm-simple-table--has-actions { - td:last-child, - th:last-child { - text-align: right; - } -} + th:not(#{&}-row-th) { + @extend .uppercase; + @extend .alignleft; + + &.aligncenter { + @extend .aligncenter; + } + + &.alignright { + @extend .alignright; + } + @include respond-to($breakpoint-small) { + &.onmobile-aligncenter { + @extend .onmobile-aligncenter; + } + } + } + + // no style for this case + &-row-th { + font-weight: normal; + } + + /* alternate bg for rows */ + &--alternate-bg-row tbody tr:nth-child(odd){ + background-color: var(--bgcolor-input, $pm-global-light); + } + + &--isHoverable tbody tr { + @media (hover: hover) { + &:hover, + &:focus-within { + background-color: var(--bgcolor-input, $pm-global-light); + } + } + } -/* simple dirty fix */ -.pm-simple-table button svg { - @extend .relative; - top: -0.25em; + tr#{&}-stickyRow { + td, + th { + position: sticky; + top: 0; + background: var(--bgcolor-main-area, $white); + z-index: 1; + + &::after { + content: ''; + position: absolute; + top: 100%; + left: 0; + right: 0; + z-index: -1; + height: 1rem; + background: linear-gradient(to bottom, rgba(black, .1) 0%, transparent 100%); + pointer-events: none; + transition: opacity .125s ease-out; + } + } + } + + tr#{&}-stickyRow#{&}-stickyRow--isOnTop { + td, + th { + &::after { + opacity: 0; + } + } + } + + /* bordered-table */ + &--bordered { + &, + th, + td { + border: 1px solid var(--bordercolor-input, $pm-global-border); + } + } + + &--has-actions { + td, + th { + &:last-child { + text-align: right; + } + } + } + + /* simple dirty fix */ + a svg { + @extend .relative; + top: -0.15em; + } } -.pm-simple-table a svg { - @extend .relative; - top: -0.15em; + + +/* + * specifics case + */ +.pm-plans-table-row--highlighted { + background-color: var(--bgcolor-input, $pm-global-light); } diff --git a/templates/@theme-base/pm-styles/_pm-tabs.scss b/templates/@theme-base/pm-styles/_pm-tabs.scss index 8f60520..b726541 100644 --- a/templates/@theme-base/pm-styles/_pm-tabs.scss +++ b/templates/@theme-base/pm-styles/_pm-tabs.scss @@ -3,41 +3,61 @@ padding: 0; @extend .unstyled; @extend .flex; - border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); + @extend .relative; + white-space: nowrap; } .tabs-list-item { margin-right: 1rem; + color: var(--text-sub-header, $text-sub-header); + min-width: auto; } .tabs-list-link { @extend .flex; - color: var(--color-main-area, $pm-global-grey); - border-bottom: 2px solid var(--bordercolor-input, $pm-global-border); + color: inherit; + border-bottom: 2px solid transparent; padding: .5em; @extend .nodecoration; @extend .relative; top: 1px; + transition: color 0.15s ease-out, border-bottom 0.15s ease-out; &:focus, &:hover { - color: var(--color-main-area, $pm-global-grey); - font-weight: bold; @extend .nodecoration; + color: var(--color-main-area, $pm-global-grey); + border-bottom: 2px solid var(--bordercolor-input, $pm-global-border); } &[disabled] { opacity: .4; cursor: default; pointer-events: none; - &:focus, - &:hover { - font-weight: normal; - } } } [aria-selected="true"].tabs-list-link { - font-weight: bold; border-bottom: 2px solid $pm-primary; + color: var(--color-main-area, $pm-global-grey); } -/* hidden state for content is not necessary for React, added in exception for Design system website */
\ No newline at end of file +.tabs-container { + border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); + + &[class*='sticky'] { + background: var(--bgcolor-main-area, $white); + } +} + +.tabs-indicator { + position: absolute; + border-bottom: 2px solid $pm-primary; + content: ""; + height: 0; + bottom: -1px; + left: 0; + right: 0; + transform-origin: left center; + transition: transform .15s ease-out; + transform: translateX(var(--translate)) scaleX(var(--scale)); +} +/* hidden state for content is not necessary for React, added in exception for Design system website */ diff --git a/templates/@theme-base/pm-styles/_pm-toolbar.scss b/templates/@theme-base/pm-styles/_pm-toolbar.scss index ce06ffa..d9e4fa8 100644 --- a/templates/@theme-base/pm-styles/_pm-toolbar.scss +++ b/templates/@theme-base/pm-styles/_pm-toolbar.scss @@ -1,11 +1,18 @@ /* * toolbar */ - .toolbar { +:root { + --padding-toolbar-button: #{em(16, $base-font)}; + --padding-toolbar-button-dropdown: #{em(12, $base-font)}; +} + +.toolbar { + position: relative; + z-index: 1; height: $toolbar-height; background: var(--bgcolor-toolbar, $pm-global-altgrey); - border-radius: 4px 4px 0 0; - box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2); + box-shadow: 0 -1px 0 0 rgba(white, 0.2), + 0 1px 0 0 rgba(black, 0.2); } .toolbar-button, .pm-button.toolbar-button { // to avoid issues in darkmode @@ -15,8 +22,8 @@ border: unset; border-radius: unset; - padding-left: em(16, $base-font); - padding-right: em(16, $base-font); + padding-left: var(--padding-toolbar-button); + padding-right: var(--padding-toolbar-button); display: flex; // alignment fix on Chrome &:hover { @@ -36,10 +43,11 @@ } } .toolbar-button--dropdown { - padding-left: em(12, $base-font); - padding-right: em(12, $base-font); + padding-left: var(--padding-toolbar-button-dropdown); + padding-right: var(--padding-toolbar-button-dropdown); } -.toolbar-icon { +.toolbar-icon, +.expand-caret.toolbar-icon { fill: var(--fillcolor-icons, $white); } .toolbar-separator { @@ -61,10 +69,59 @@ .toolbar-select option { color: $black; // for Chrome bug } +.isDarkMode { + .toolbar-select { + background-color: var(--bgcolor-toolbar, $pm-global-altgrey); + option { + color: $pm-global-light; // for Chrome bug + } + + } +} + + +.toolbar--heavy { + @include respond-to(1100) { + --padding-toolbar-button: #{em(12, $base-font)}; + --padding-toolbar-button-dropdown: #{em(10, $base-font)}; + } + // use the forceps Luke ^^ + @include respond-to(980) { + --padding-toolbar-button: #{em(11, $base-font)}; + --padding-toolbar-button-dropdown: #{em(8, $base-font)}; + } + + @include respond-to($breakpoint-medium) { + --padding-toolbar-button: #{em(16, $base-font)}; + --padding-toolbar-button-dropdown: #{em(12, $base-font)}; + } + + @include respond-to(750) { + --padding-toolbar-button: #{em(12, $base-font)}; + --padding-toolbar-button-dropdown: #{em(8, $base-font)}; + } + + @include respond-to($breakpoint-small) { + --padding-toolbar-button: #{em(16, $base-font)}; + --padding-toolbar-button-dropdown: #{em(12, $base-font)}; + } + + @include respond-to($breakpoint-tiny) { + --padding-toolbar-button: #{em(14, $base-font)}; + --padding-toolbar-button-dropdown: #{em(10, $base-font)}; + } + @include respond-to(320) { + --padding-toolbar-button: #{em(12, $base-font)}; + --padding-toolbar-button-dropdown: #{em(6, $base-font)}; + } + +} + + @include respond-to($breakpoint-small) { .toolbar { border-radius: 0; } -}
\ No newline at end of file +} diff --git a/templates/@theme-base/pm-styles/_pm-treeview.scss b/templates/@theme-base/pm-styles/_pm-treeview.scss new file mode 100644 index 0000000..aef046d --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-treeview.scss @@ -0,0 +1,108 @@ +/* + Tree view (subfolders, etc.) + */ + +$treeview-border-width: 1px !default; +$treeview-indentation-margin: 3rem !default; + + +.treeview-item { + + border-bottom : $treeview-border-width solid var(--bordercolor-input, $pm-global-border); + margin-bottom: -$treeview-border-width; + + $arrow-width: .9rem !default; + $arrow-height: .7rem !default; + $circle-size: .8rem !default; + + &--moveInside, + &--moveTop, + &--moveBottom { + &::before { + content: ''; + position: absolute; + } + } + &--moveInside { + &::before { + left: -$arrow-width; + height: 0; + width: 0; + border: $arrow-height solid transparent; + border-left-color: $pm-primary; + border-left-width: $arrow-width; + } + } + &--moveTop, + &--moveBottom { + &::before { + left: -#{$circle-size/2}; + height: $circle-size; + width: $circle-size; + border-radius: 50%; + background: $pm-primary; + } + } + &--moveInside#{&}--selfGrabbed { // no primary color on the self grabbed element + &::before { + border-left-color: $pm-global-muted; + } + } + &--moveTop::before { + top: -#{$circle-size/2}; + } + &--moveBottom::before { + bottom: -#{$circle-size/2}; + } + + &--moveTop::after, + &--moveBottom::after { + content: ''; + position: absolute; + left: 0; + right: 0; + height: 1px; + background: $pm-primary; + } + &--moveTop::after { + top: 0; + } + &--moveBottom::after { + bottom: -1px; + } + &--moveInside { + background-color: var(--bgcolor-highlight, $pm-global-light); + } + + .treeview-item .treeview-item { + padding-left: $treeview-indentation-margin; + &.treeview-item--moveInside { + background: linear-gradient(to right, transparent 0, transparent #{$treeview-indentation-margin}, var(--bgcolor-highlight, $pm-global-light) #{$treeview-indentation-margin}); + &::before { + left: calc(-#{$arrow-width} + #{$treeview-indentation-margin}); + } + } + &.treeview-item--moveTop, + &.treeview-item--moveBottom { + &::before { + left: calc(-#{$circle-size/2} + #{$treeview-indentation-margin}); + } + } + &--moveTop::after, + &--moveBottom::after { + left: #{$treeview-indentation-margin}; + } + } + +} + + + + + +@include respond-to($breakpoint-medium) { + .treeview-toggle, + .treeview-actions { + width: em(100); + } +} diff --git a/templates/@theme-base/reusable-components/_design-system-colors.scss b/templates/@theme-base/reusable-components/_design-system-colors.scss index 3dfeda4..650d1aa 100644 --- a/templates/@theme-base/reusable-components/_design-system-colors.scss +++ b/templates/@theme-base/reusable-components/_design-system-colors.scss @@ -12,11 +12,14 @@ background-color: $pm-global-light; } .bg-global-border { - background-color: $pm-global-border; + background-color: var(--bordercolor-input, $pm-global-border); } .bg-global-muted { background-color: $pm-global-muted; } +.bg-global-muted-dm { + background-color: var(--bgcolor-muted, $pm-global-muted); +} .bg-global-success { background-color: $pm-global-success; } @@ -26,6 +29,9 @@ .bg-global-attention { background-color: $pm-global-attention; } +.bg-global-info { + background-color: $pm-global-info; +} .bg-pm-blue { background-color: $pm-blue; } @@ -35,9 +41,12 @@ .bg-pm-blue-light { background-color: $pm-blue-light; } +.bg-pm-blue-gradient { + background-image: $pm-blue-gradient; +} .bg-global-highlight { - background-color: var(--bgcolor-input, $pm-global-light); + background-color: var(--bgcolor-highlight, $pm-global-light); } @@ -83,6 +92,9 @@ .bg-inherit { background: inherit; } +.bg-currentColor { + background: currentColor; +} .fill-global-grey { fill: $pm-global-grey; @@ -93,6 +105,9 @@ .fill-global-light { fill: $pm-global-light; } +.fill-global-highlight { + fill: var(--bgcolor-highlight, $pm-global-light); +} .fill-global-border { fill: $pm-global-border; } @@ -131,6 +146,9 @@ .fill-white { fill: $white; } +.fill-white-dm { + fill: var(--bgcolor-main-area, $white); +} .fill-black { fill: $black; } @@ -241,6 +259,9 @@ .color-global-grey { color: $pm-global-grey; } +.color-global-grey-dm { + color: var(--color-main-area, $pm-global-grey); +} .color-global-altgrey { color: $pm-global-altgrey; } @@ -262,6 +283,9 @@ .color-global-attention { color: $pm-global-attention; } +.color-global-info { + color: $pm-global-info; +} .color-pm-blue { color: $pm-blue; } @@ -271,6 +295,9 @@ .color-pm-blue-light { color: $pm-blue-light; } +.color-subheader { + color: var(--bgcolor-subheader, $text-sub-header); +} .color-pv-green { color: $pv-green; diff --git a/templates/@theme-base/reusable-components/_design-system-config.scss b/templates/@theme-base/reusable-components/_design-system-config.scss index 6502e2f..98473cd 100644 --- a/templates/@theme-base/reusable-components/_design-system-config.scss +++ b/templates/@theme-base/reusable-components/_design-system-config.scss @@ -12,6 +12,10 @@ $size-h4 : 18 !default; $size-h5 : 17 !default; $size-h6 : 16 !default; +// Use typo helpers on demand +$use-other-typo-helpers : true !default; +$use-other-line-height-helpers: true !default; + $size-smallest : 9 !default; $size-smaller : 10 !default; $size-small : 12 !default; @@ -21,20 +25,24 @@ $size-biggest : 20 !default; // fonts $font-family : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !default; - +$font-family-monospace : SFMono-Regular,Consolas,"Liberation Mono","Menlo",monospace,monospace !default; +// explanation for double monospace http://code.iamkate.com/html-and-css/fixing-browsers-broken-monospace-font-handling/ // project colors $pm-global-grey : #262a33 !default; $pm-global-altgrey : #3c414e !default; +$bluish-grey : #9799a6 !default; $pm-global-light : #f6f7fa !default; $pm-global-border : #dde6ec !default; -$pm-global-muted : #eeeff1 !default; +$pm-global-muted : #eeeff3 !default; +$pm-global-info : #008cff !default; $pm-global-success : #5db039 !default; $pm-global-warning : #ec5858 !default; $pm-global-attention : #eac819 !default; $pm-blue : #657ee4 !default; $pm-blue-dark : #526ee0 !default; $pm-blue-light : #788ee8 !default; +$pm-blue-gradient : linear-gradient(130deg, #657ee4 -7%, #7351d1 64%, #7350d1 127%); $white : #fff !default; $black : #000 !default; @@ -58,11 +66,20 @@ $pm-primary-dark : $pm-blue-dark !default; // not approved colors $pm-input-background : #fcfdff !default; $plan-logo-color : #8ed60f !default; -$conversation-selected-bg: #e3e7f6 !default; +$conversation-selected-bg: rgba($pm-blue, .5) !default; +$input-shadow-color : rgba(0, 0, 0, 0.16) !default; +$autocomplete-bg-color-hover : #f4f4f4 !default; +$text-sub-header : #767676 !default; // needed for darkmode $pm-secondary-grey : #2e323d !default; -$pm-tertiary-grey : #505560 !default; // border input +$pm-tertiary-grey : #505560 !default; // border input + +// needed globally +$calendar-selected-day-color: $pm-blue-light !default; +$calendar-today-color: $pm-primary-dark !default; + +$navigation-hover-bg-color: rgba(white, .05) !default; // colors $color-links : $pm-primary !default; @@ -80,6 +97,7 @@ $input-defaut-border : $pm-global-border !default; // main breakpoints $breakpoint-large : 1500 !default; +$breakpoint-medium-landscape : 1100 !default; $breakpoint-medium : 910 !default; $breakpoint-small : 680 !default; $breakpoint-tiny : 450 !default; @@ -90,6 +108,9 @@ $rtl-option : false !default; // to adapt a website in a language that is written from right to left // designed for multilingual websites with LTR et RTL +// Custom scrollbar everywhere +$custom-scroll : true !default; + // hyphens $hyphenation : false !default; @@ -99,9 +120,14 @@ $use-clearleft_right : false !default; $use-clearhidden : false !default; $use-clearfix : false !default; -// vertical rythm -// possible values : 'double_top_single_bottom', 'single_top', 'single_bottom' -$vertical-rythm : 'single_bottom' !default; +// color reset for mark tag +$use-color-reset-mark : true !default; +$default-bgColor-mark : #ff0 !default; + + +// vertical rhythm +// possible values : 'double_top_single_bottom', 'single_top_single_bottom', 'single_top', 'single_bottom' +$vertical-rhythm : 'single_bottom' !default; // units for typo // possible values : 'use_em', 'use_rem', 'use_rem_with_em_fallback' @@ -114,23 +140,34 @@ $root-equiv-10-px : true !default; // you should NEVER update this value, however… who can predict the future… $root-default-font-size: 16 !default; +// applies main colors on body tag +$apply-body-styles : true !default; + // others $use-reset-button : true !default; +$use-ie-calc-font-fallback: false !default; $use-old-ie-fallbacks : true !default; +$use-height-auto-img : true !default; +$use-height-auto-td : true !default; +$use-height-auto-table : true !default; // default config for webpack, can be overriden by "global config" in styles-pm.scss $path-images : '../../assets/img/shared/' !default; // variables for global layouts, allowing you to use calc for components and adapt quickly if needed -$aside-bar-width : 4.5rem !default; $header-height : 8rem !default; -$width-sidebar : 19rem !default; // main navigation +$width-sidebar : 24rem !default; // main navigation $toolbar-height : 5rem !default; -$subnav-width : 25rem !default; // quick nav on the right +$context-bar-width : 25vw !default; // context bar on the right +$context-bar-min-width : 30rem !default; +$context-bar-max-width : 40rem !default; + +$default-height-fields : 3.5rem !default; $conversations-column-width: 35% !default; // used also to align search bar on top +$pm-label-width: 18em !default; // Sass functions: don’t touch if you are not sure ;) @@ -176,45 +213,22 @@ $conversations-column-width: 35% !default; // used also to align search bar on @if $type-vr == 'double_top_single_bottom' { @return ( ($margin * $other_coef)*1em 0 ( ($margin/2) * $other_coef) *1em 0 ); } + @if $type-vr == 'single_top_single_bottom' { + @return ( ( ($margin/2) * $other_coef) *1em 0 ); + } @else if $type-vr == 'single_bottom' { @return ( 0 0 ( ($margin/2) * $other_coef) *1em 0 ); } @else if $type-vr == 'single_top' { @return ( ( ($margin/2) * $other_coef) *1em 0 0 0 ); } -} - - -@function margin-em-other ($font-size, $base-height, $base-font, $type-vr){ - - $coef: ceil(1 / ($base-height * $base-font / $font-size)); - $height: ($base-font * $base-height / $font-size) ; - $margin: ($height * $coef ); - - @return ( ($margin)*1em 0 ); - -} - - -@mixin flow-hr( $value, $type-vr: $vertical-rythm, $type-unit: $typo-unit ){ - - @if $type-unit == 'use_em' { - font-size: em($value); - } - @else if $type-unit == 'use_rem' { - font-size: rem($value); + @else if $type-vr == 'double_top_double_bottom_without_coef' { + @return (($margin *1em) 0); } - @else if $type-unit == 'use_rem_with_em_fallback' { - font-size: em($value); - font-size: rem($value); - } - line-height: line-height($value, $l-h, $base-font, $type-vr); - margin: margin-em($value, $l-h, $base-font, $type-vr) ; - } -@mixin flow-other( $value, $type-vr: $vertical-rythm, $type-unit: $typo-unit ){ +@mixin rhythm( $value, $type-vr: $vertical-rhythm, $type-unit: $typo-unit ){ @if $type-unit == 'use_em' { font-size: em($value); @@ -227,7 +241,7 @@ $conversations-column-width: 35% !default; // used also to align search bar on font-size: rem($value); } line-height: line-height($value, $l-h, $base-font, $type-vr); - margin: margin-em-other($value, $l-h, $base-font, $type-vr) ; + margin: margin-em($value, $l-h, $base-font, $type-vr) ; } @@ -377,7 +391,7 @@ $conversations-column-width: 35% !default; // used also to align search bar on } @else if $query-type == "min" { - @media (min-width: em($breakpoint, $root-default-font-size)) { + @media (min-width: em($breakpoint + 1, $root-default-font-size)) { @content; } } @@ -388,6 +402,12 @@ $conversations-column-width: 35% !default; // used also to align search bar on } } + @else if $query-type == "min-height" { + @media (min-height: em($breakpoint, $root-default-font-size)) { + @content; + } + } + @else { @warn "Type non supported."; } @@ -410,4 +430,52 @@ $conversations-column-width: 35% !default; // used also to align search bar on @warn "$value-content not specified"; } -}
\ No newline at end of file +} + + +// +// Easing functions for transitions and animations +// Learn more at http://easings.net/ +// + +@function easing($type: 'ease') { + + $value: ''; + + @if $type == 'linear' { $value: '0, 0, 1, 1'; } + @else if $type == 'ease' { $value: '0.25, 0.1, 0.25, 1'; } + @else if $type == 'easeIn' { $value: '0.42, 0, 1, 1'; } + @else if $type == 'easeOut' { $value: '0, 0, 0.58, 1'; } + @else if $type == 'easeInOut' { $value: '0.42, 0, 0.58, 1'; } + + @else if $type == 'easeInSine' { $value: '0.12, 0, 0.39, 0'; } + @else if $type == 'easeInQuad' { $value: '0.11, 0, 0.5, 0'; } + @else if $type == 'easeInCubic' { $value: '0.32, 0, 0.67, 0'; } + @else if $type == 'easeInQuart' { $value: '0.5 , 0, 0.75, 0'; } + @else if $type == 'easeInQuint' { $value: '0.64, 0, 0.78, 0'; } + @else if $type == 'easeInExpo' { $value: '0.7 , 0, 0.84, 0'; } + @else if $type == 'easeInCirc' { $value: '0.55, 0, 1, 0.45'; } + @else if $type == 'easeInBack' { $value: '0.36, 0, 0.66, -0.56'; } + + @else if $type == 'easeOutSine' { $value: '0.61, 1, 0.88, 1'; } + @else if $type == 'easeOutQuad' { $value: '0.5, 1, 0.89, 1'; } + @else if $type == 'easeOutCubic' { $value: '0.33, 1, 0.68, 1'; } + @else if $type == 'easeOutQuart' { $value: '0.25, 1, 0.5, 1'; } + @else if $type == 'easeOutQuint' { $value: '0.22, 1, 0.36, 1'; } + @else if $type == 'easeOutExpo' { $value: '0.16, 1, 0.3, 1'; } + @else if $type == 'easeOutCirc' { $value: '0, 0.55, 0.45, 1'; } + @else if $type == 'easeOutBack' { $value: '0.34, 1.56, 0.64, 1'; } + + @else if $type == 'easeInOutSine' { $value: '0.37, 0, 0.63, 1'; } + @else if $type == 'easeInOutQuad' { $value: '0.45, 0, 0.55, 1'; } + @else if $type == 'easeInOutCubic' { $value: '0.65, 0, 0.35, 1'; } + @else if $type == 'easeInOutQuart' { $value: '0.76, 0, 0.24, 1'; } + @else if $type == 'easeInOutQuint' { $value: '0.83, 0, 0.17, 1'; } + @else if $type == 'easeInOutExpo' { $value: '0.87, 0, 0.13, 1'; } + @else if $type == 'easeInOutCirc' { $value: '0.85, 0, 0.15, 1'; } + @else if $type == 'easeInOutBack' { $value: '0.68, -0.6, 0.32, 1.6'; } + + @else { @error "'#{$type}' is not a correct value for easing()."; } + + @return cubic-bezier(unquote($value)); +} diff --git a/templates/@theme-base/reusable-components/_design-system-forms.scss b/templates/@theme-base/reusable-components/_design-system-forms.scss index ead9aa3..8b34cdb 100644 --- a/templates/@theme-base/reusable-components/_design-system-forms.scss +++ b/templates/@theme-base/reusable-components/_design-system-forms.scss @@ -16,6 +16,7 @@ input[type="submit"][disabled], input[type="button"][disabled], input[type="reset"][disabled] { cursor: default; + pointer-events: none; } /* for field texts */ @@ -26,6 +27,7 @@ input[type="reset"][disabled] { /* avoid dummy resize */ textarea { resize: vertical; + cursor: auto; // fixes an issue on Chrome using CSS custom scroll } /* remove a Firefox difference on button tag */ button::-moz-focus-inner { border: 0; padding: 0; } @@ -34,6 +36,7 @@ label, button, input, select { + color: currentColor; vertical-align: middle; } @@ -59,6 +62,15 @@ input[type="image"] { border: 0; width: auto; } +// for components that rely on checkboxes +input[type="radio"], +input[type="checkbox"] { + opacity: 0; + // this is a crazy fix for Firefox - for having ::after stuff working on it for mail conversations + // to have increased area around checkbox for clicking + /* autoprefixer: ignore next */ + -moz-appearance: initial; +} /* to cancel input sizing or other if needed */ .auto { 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 ce68eb0..8b2b5be 100644 --- a/templates/@theme-base/reusable-components/_design-system-layout-modules.scss +++ b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss @@ -3,483 +3,679 @@ */ /* it depends, it exceeds (french joke) */ -img, -table, -td, +%reset-responsive-height-max-width { + height: auto; + max-width: 100%; +} + blockquote, code, pre, textarea, input, svg { - height: auto; - max-width: 100%; + @extend %reset-responsive-height-max-width; +} + +%reset-responsive-max-width-only { + max-width: 100%; +} + +@if $use-height-auto-td==true { + td { + @extend %reset-responsive-height-max-width; + } +} +@else { + td { + @extend %reset-responsive-max-width-only; + } +} + +@if $use-height-auto-img==true { + img { + @extend %reset-responsive-height-max-width; + } } +@else { + img { + @extend %reset-responsive-max-width-only; + } +} +@if $use-height-auto-table==true { + table { + @extend %reset-responsive-height-max-width; + } +} +@else { + table { + @extend %reset-responsive-max-width-only; + } +} + /* no reset on embed, object & video, some players don't like */ + +.hauto { + height: auto; +} + /* useful to manage floats */ /* containing floats */ .mod, .scroll-if-needed { - overflow: auto; + overflow: auto; } + .scroll-horizontal-if-needed { - overflow-x: auto; + overflow-x: auto; } + .mod--hidden, .no-scroll { - overflow: hidden; + overflow: hidden; } .scroll-smooth-touch { - -webkit-overflow-scrolling: touch; + -webkit-overflow-scrolling: touch; } /* some floattings */ .left { - float: left; + float: left; } + .right { - float: right; + float: right; } -@if $rtl-option == true { - /* RTL */ - [dir="rtl"] .left { - float: right; - } - [dir="rtl"] .right { - float: left; - } +@if $rtl-option==true { + + /* RTL */ + [dir="rtl"] .left { + float: right; + } + + [dir="rtl"] .right { + float: left; + } } /* clear floats */ .clear { - clear: both; -} -@if $use-clearleft_right == true { - .clearleft { - clear: left; - } - .clearright { - clear: right; - } - @if $rtl-option == true { - /* RTL */ - [dir="rtl"] .clearleft { - clear: right; + clear: both; +} + +@if $use-clearleft_right==true { + .clearleft { + clear: left; + } + + .clearright { + clear: right; } - [dir="rtl"] .clearright { - clear: left; + + @if $rtl-option==true { + + /* RTL */ + [dir="rtl"] .clearleft { + clear: right; + } + + [dir="rtl"] .clearright { + clear: left; + } } - } } -@if $use-clearhidden == true { - .clearhidden { - clear: both; - margin: 0; - padding: 0; - visibility: hidden; - } + +@if $use-clearhidden==true { + .clearhidden { + clear: both; + margin: 0; + padding: 0; + visibility: hidden; + } } -@if $use-clearfix == true { - .clearfix:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; - } + +@if $use-clearfix==true { + .clearfix:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; + } } /* gut: "spacing" empty div */ .gut { - height: 1px; + height: 1px; } /* table-design in CSS */ .row { - display: table; - table-layout: fixed; + display: table; + table-layout: fixed; } + .inline-row { - display: inline-table; - table-layout: fixed; + display: inline-table; + table-layout: fixed; } + .line { - display: table-row; + display: table-row; } + .col { - display: table-cell; - vertical-align: top; + display: table-cell; + vertical-align: top; } + .col-noalign { - display: table-cell; + display: table-cell; } /* alignments */ .aligntop { - vertical-align: top; + vertical-align: top; } + .alignbottom { - vertical-align: bottom; + vertical-align: bottom; } + .alignmiddle { - vertical-align: middle; + vertical-align: middle; } + .alignbaseline { - vertical-align: baseline; + vertical-align: baseline; } + .alignsub { - vertical-align: sub; + vertical-align: sub; } /* block */ .bl { - display: block; + display: block; +} + +.inline { + display: inline; } /* inline-block, useful for grids, and not only */ .inbl { - display: inline-block; + display: inline-block; } /* grid = element of inline-grid */ .grid { - @extend .inbl; - @extend .aligntop; + @extend .inbl; + @extend .aligntop; } /* to relativize */ .relative { - position: relative; + position: relative; } /* centered block */ .center { - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } /* to absolute */ .absolute { - position: absolute; - z-index: 1; + position: absolute; + z-index: 1; +} +.z667 { + z-index: 667; } /* to centered absolute */ .centered-absolute { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.centered-absolute-horizontal { + left: 50%; + transform: translate(-50%, 0%); +} + +.covered-absolute { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } /* to top right */ .top-right { - top: 0; - right: 0; -} -@if $rtl-option == true { - [dir="rtl"] { - .top-right { - left: 0; - right: auto; + top: 0; + right: 0; +} + +.bottom { + bottom: 0; +} + +@if $rtl-option==true { + [dir="rtl"] { + .top-right { + left: 0; + right: auto; + } } - } } -.right-icon { - top: 0; - right: .5em; - height: 3.5rem; // height of field +.right-icon, +.right-text { + top: 0; + right: .5em; + height: $default-height-fields; // height of field + align-content: center; +} +.right-text { + right: 1em; } -@if $rtl-option == true { - [dir="rtl"] { - .right-icon { - left: .5em; - right: auto; +.right-text-inner { + padding-bottom: .2rem; +} + +@if $rtl-option==true { + [dir="rtl"] { + .right-icon, + .right-text { + left: .5em; + right: auto; + } + .right-text { + left: 1em; + } } - } } + + .fixed { - position: fixed; + position: fixed; +} + + +.sticky { + &-top, + &-bottom { + position: sticky; + z-index: 1; + } + + &-top { + top: 0; + } + + &-bottom { + bottom: 0; + } } /* hardware-acceleration activation */ .hardware-accelerated { - @include vendor-prefix(transform, translateZ(0)); + @include vendor-prefix(transform, translateZ(0)); } /* block widths */ .w0 { - width: 0; + width: 0; } + .w1 { - width: 1%; + width: 1%; } + .w2 { - width: 2%; + width: 2%; } + .w3 { - width: 3%; + width: 3%; } + .w5 { - width: 5%; + width: 5%; } + .w10 { - width: 10%; + width: 10%; } + .w15 { - width: 15%; + width: 15%; } + .w20 { - width: 20%; + width: 20%; } + .w25 { - width: 25%; + width: 25%; } + .w30 { - width: 30%; + width: 30%; } + .w33 { - width: 33.333%; + width: 33.333%; } + .w40 { - width: 40%; + width: 40%; } + .w45 { - width: 45%; + width: 45%; } + .w49 { - width: 49%; + width: 49%; } + .w50 { - width: 50%; + width: 50%; } + .w60 { - width: 60%; + width: 60%; } + .w66 { - width: 66.666%; + width: 66.666%; } + .w70 { - width: 70%; + width: 70%; } + .w75 { - width: 75%; + width: 75%; } + .w80 { - width: 80%; + width: 80%; } + .w90 { - width: 90%; + width: 90%; } + .w95 { - width: 95%; + width: 95%; } + .w100 { - width: 100%; + width: 100%; } /* here you may add px widths */ -$list-width-px: 50, 150, 200, 500 !default; +$list-width-px: 40, 50, 70, 150, 200, 500 !default; // ex .w500p { width: 500px; } @each $width in $list-width-px { - .w#{$width}p { - width: #{$width}px; - } + .w#{$width}p { + width: #{$width}px; + } +} + +/* here you may add rem widths */ +$list-width-rem: 33 !default; // say 33 +// ex .w500p { width: 500px; } + +@each $width in $list-width-rem { + .w#{$width}r { + width: #{$width}rem; + } } /* here you may add em widths */ -$list-width-em: 400 !default; -// ex .w500e { width: 60em; } +$list-width-em: 2, 6, 8, 10, 11, 13, 14, 16 !default; +// ex .w16e { width: 16em; } @each $width in $list-width-em { - $size_em: em($width); - .w#{$width}e { - width: $size_em; - } + .w#{$width}e { + width: #{$width}em; + } } /* max-block widths */ /* here you may add max-widths % */ -$list-max-widths: 50, 80, 100 !default; +$list-max-widths: 50, 60, 80, 100 !default; @each $max-width in $list-max-widths { - .mw#{$max-width} { - max-width: #{$max-width * 1%}; - } + .mw#{$max-width} { + max-width: #{$max-width * 1%}; + } } /* here you may add pixel max-widths */ $list-max-width-px: 100, 650 !default; @each $max-width in $list-max-width-px { - .mw#{$max-width}p { - max-width: #{$max-width}px; - } + .mw#{$max-width}p { + max-width: #{$max-width}px; + } } /* here you may add ch max-widths */ $list-max-width-ch: 70 !default; @each $max-width in $list-max-width-ch { - .mw#{$max-width}ch { - max-width: #{$max-width}ch; - } + .mw#{$max-width}ch { + max-width: #{$max-width}ch; + } } /* here you may add em max-widths */ -$list-max-width-em: 8, 15, 40, 50 !default; +$list-max-width-em: 5, 7, 8, 13, 15, 18, 30, 37, 40, 50 !default; @each $max-width in $list-max-width-em { - .mw#{$max-width}e { - max-width: #{$max-width}em; - } + .mw#{$max-width}e { + max-width: #{$max-width}em; + } } -$list-min-width-em: 3, 5, 35 !default; +$list-min-width-em: 1.4, 3, 5, 14, 35 !default; @each $min-width in $list-min-width-em { - .min-w#{$min-width}e { - min-width: #{$min-width}em; - } + $fragment-class: str-replace(inspect($min-width), '.', '-'); // inspect to convert to string + + .min-w#{$fragment-class}e { + min-width: #{$min-width}em; + } } + +$list-min-height-em: 5, 16 !default; + +@each $min-height in $list-min-height-em { + .min-h#{$min-height}e { + min-height: #{$min-height}em; + } +} + + .h100 { - height: 100%; + height: 100%; } + .h100v { - height: 100vh; + height: 100vh; } /* margins */ .mt1r { - margin-top: 1rem; + margin-top: 1rem; +} + +.mt0-5r { + margin-top: .5rem; +} + +.mr0-5r { + margin-right: .5rem; } $list-margins: m, mt, mr, mb, ml !default; -$list-margins-values: 0, 0.25, 0.5, 0.75, 1, 1.5, 2 !default; // specify 2.5 if needed +$list-margins-values: 0, 0.1, 0.25, 0.4, 0.5, 0.6, 0.75, 1, 1.5, 2, 4 !default; // specify 2.5 if needed @include margin-generator($list-margins, $list-margins-values); .mtauto { - margin-top: auto; + margin-top: auto; } + .mrauto { - margin-right: auto; + margin-right: auto; } + .mbauto { - margin-bottom: auto; + margin-bottom: auto; } + .mlauto { - margin-left: auto; + margin-left: auto; } + .mauto { - margin: auto; + margin: auto; } -@if $rtl-option == true { - [dir="rtl"] { - .mrauto { - margin-right: 0; - margin-left: auto; - } - .mlauto { - margin-left: 0; - margin-right: auto; +@if $rtl-option==true { + [dir="rtl"] { + .mrauto { + margin-right: 0; + margin-left: auto; + } + + .mlauto { + margin-left: 0; + margin-right: auto; + } } - } } /* paddings */ $list-paddings: p, pt, pr, pb, pl !default; -$list-paddings-values: 0, 0.25, 0.5, 0.75, 1, 1.25, 2, 3 !default; // specify 2.5 if needed +$list-paddings-values: 0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4 !default; // specify 2.5 if needed @include padding-generator($list-paddings, $list-paddings-values); /* to hide text with accessibility… a11y */ .invisible, .sr-only { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + top: 0; // needed for Safari dumb and 💩 behaviour } + .nonvisible { - visibility: hidden; + visibility: hidden; } .opacity-50 { - opacity: 0.5; + opacity: 0.5; } + .opacity-40 { - opacity: 0.4; + opacity: 0.4; } + .opacity-30 { - opacity: 0.3; + opacity: 0.3; } .filter-blur { - filter: blur(4px); + filter: blur(4px); } .hidden, -[hidden] { - display: none; -} /* hidden everywhere */ +[hidden], +.display-on-darkmode { + display: none; +} + +/* hidden everywhere */ .nodesktop { - display: none; -} /* hidden on desktop */ + display: none; +} + +/* hidden on desktop */ /*.noprint {} /* hidden on print */ /*.notablet {} /* hidden on tablets */ /*.nomobile {} /* hidden on mobile */ .list-2columns { - -webkit-column-count: 2; - -moz-column-count: 2; - column-count: 2; - -webkit-column-gap: 0; - -moz-column-gap: 0; - column-gap: 0; - - & > li { - -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ - page-break-inside: avoid; /* Firefox */ - break-inside: avoid; /* IE 10+ */ - break-inside: avoid-column; /* W3C */ - } + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + -webkit-column-gap: 0; + -moz-column-gap: 0; + column-gap: 0; + + & > * { + -webkit-column-break-inside: avoid; + /* Chrome, Safari, Opera */ + page-break-inside: avoid; + /* Firefox */ + break-inside: avoid; + /* IE 10+ */ + break-inside: avoid-column; + /* W3C */ + } } /* * ratio container (for responsive iframes/videos/etc.) */ [class*="ratio-container-"] { - width: 100%; - height: 0; - @extend .relative; + width: 100%; + height: 0; + @extend .relative; } + .ratio-container-square { - padding-top: 100%; + padding-top: 100%; } + .ratio-container-16-9 { - padding-top: 56.25%; + padding-top: 56.25%; +} + +.ratio-container-5-1 { + padding-top: 20%; } .inner-ratio-container { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } /* @@ -487,179 +683,238 @@ $list-paddings-values: 0, 0.25, 0.5, 0.75, 1, 1.25, 2, 3 !default; // specify 2. */ .inline-flex, .inline-flex-vcenter { - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -.flex { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.flex, +.flex-flex-children, +.flex-noMinChildren { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + .flex-row { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } + .flex-reverse { - -webkit-box-orient: horizontal; - -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + .flex-column { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } + .flex-column-reverse { - -webkit-box-orient: vertical; - -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; - flex-direction: column-reverse; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; } + .flex-spacebetween { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } + .flex-spacearound { - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-around; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-around; } + .flex-justify-start { - -webkit-box-pack: start; - -ms-flex-pack: start; - justify-content: flex-start; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } + .flex-justify-end { - -webkit-box-pack: end; - -ms-flex-pack: end; - justify-content: flex-end; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } + .flex-justify-center { - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + .flex-nowrap { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; } /* fix aspect ratio */ -.flex > * { +.flex > *, +.no-min-dims { min-height: 0; min-width: 0; } +.flex-flex-children > * { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + .inline-flex-vcenter > *, .flex-item-centered-vert { - margin-top: auto; - margin-bottom: auto; - align-self: center; + margin-top: auto; + margin-bottom: auto; + align-self: center; } .flex-items-center { - -webkit-box-align: center; - -ms-flex-align: center; - -ms-grid-row-align: center; - align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + -ms-grid-row-align: center; + align-items: center; } + +.flex-items-baseline { + -webkit-box-align: baseline; + -ms-flex-align: baseline; + -ms-grid-row-align: baseline; + align-items: baseline; +} + .flex-items-start { - -webkit-box-align: start; - -ms-flex-align: start; - -ms-grid-row-align: flex-start; - align-items: flex-start; + -webkit-box-align: start; + -ms-flex-align: start; + -ms-grid-row-align: flex-start; + align-items: flex-start; } + .flex-items-end { - -webkit-box-align: end; - -ms-flex-align: end; - -ms-grid-row-align: flex-end; - align-items: flex-end; + -webkit-box-align: end; + -ms-flex-align: end; + -ms-grid-row-align: flex-end; + align-items: flex-end; +} + +.flex-items-stretch { + align-items: stretch; } .flex-item-fluid { - -webkit-box-flex: 1; - -ms-flex: 1 1 0px; - flex: 1 1 0px; + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0px; } + .flex-item-fluid-auto { - flex: 1 1 auto; + flex: 1 1 auto; } .flex-item-noshrink { - -ms-flex-negative: 0; - flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; } + .flex-item-nogrow { - -webkit-box-flex: 0; - -ms-flex-positive: 0; - flex-grow: 0; + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; } + .flex-item-grow-2 { - -webkit-box-flex: 2; - -ms-flex-positive: 2; - flex-grow: 2; + -webkit-box-flex: 2; + -ms-flex-positive: 2; + flex-grow: 2; } + .flex-item-noflex { - -webkit-box-flex: 0; - -ms-flex: 0; - flex: 0; + -webkit-box-flex: 0; + -ms-flex: 0; + flex: 0; } .flex-self-vcenter { - -ms-flex-item-align: center; - align-self: center; + -ms-flex-item-align: center; + align-self: center; +} + +.flex-self-start { + -ms-flex-item-align: start; + align-self: flex-start; +} + +.flex-self-end { + -ms-flex-item-align: end; + align-self: flex-end; } .flex-autogrid { - margin: 0 -0.5em; - @extend .flex; - @extend .flex-spacebetween; + margin: 0 -0.5em; + @extend .flex; + @extend .flex-spacebetween; } + .flex-autogrid-item { - @extend .flex-item-fluid; - padding: 0 0.5em 1em; + @extend .flex-item-fluid; + padding: 0 0.5em 1em; } + .flex-autogrid-item.pb0 { - padding-bottom: 0; + padding-bottom: 0; +} + +.inline-grid-container { + display: inline-grid; } /* RTL/others */ -.mirror { - -webkit-transform: rotateY(180deg); - transform: rotateY(180deg); +.mirror, +[dir="rtl"] .on-rtl-mirror { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); } + .rotateX-180 { - -webkit-transform: rotateX(180deg); - transform: rotateX(180deg); + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); } + .rotateZ-90 { - -webkit-transform: rotateZ(90deg); - transform: rotateZ(90deg); + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg); } + .rotateZ-270 { - -webkit-transform: rotateZ(270deg); - transform: rotateZ(270deg); + -webkit-transform: rotateZ(270deg); + transform: rotateZ(270deg); } + /* increase surface click/tap */ .increase-surface-click::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; } + .no-pointer-events, .no-pointer-events-children * { - pointer-events: none; + pointer-events: none; } diff --git a/templates/@theme-base/reusable-components/_design-system-links-icons.scss b/templates/@theme-base/reusable-components/_design-system-links-icons.scss index f6b9ef1..0207be2 100644 --- a/templates/@theme-base/reusable-components/_design-system-links-icons.scss +++ b/templates/@theme-base/reusable-components/_design-system-links-icons.scss @@ -1,8 +1,10 @@ /* links */ + /* remember focus */ a, .link { color: $color-links; + text-decoration: underline; cursor: pointer; &:focus, @@ -12,12 +14,7 @@ a, text-decoration: underline; } } -/* avoid border on images in links + fix border image IE */ -a:link img, -a:visited img, -img { - border-style: none; -} + .nodecoration { text-decoration: none; } @@ -48,6 +45,15 @@ img { } } +.button-showOnHover:focus, +.button-showOnHover:hover { + .button-showOnHover-element { + visibility: visible; + } +} + + + /* links with icons, may use DATA-URI */ /* external links */ @@ -73,28 +79,29 @@ a[href^="mailto:"] { [class*="icon-"] { @extend .alignmiddle; @extend .inbl; + fill: currentColor; } -$list-icon-pixels: 12,16,20,25,40,100 !default; +$list-icon-pixels: 6,8,10,11,12,14,16,18,20,24,28,40,42,60,100 !default; @each $width in $list-icon-pixels { - .icon-#{$width}p { - width: #{$width}px; - height: #{$width}px; + .icon-#{$width}p { + width: #{$width}px; + height: #{$width}px; } } $list-icon-percent: 50 !default; @each $width in $list-icon-percent { - .icon-#{$width} { - width: percentage($width / 100); - height: percentage($width / 100); + .icon-#{$width} { + width: percentage($width / 100); + height: percentage($width / 100); } } .path2x { stroke-width: 1px; &.fill-global-light { - stroke: $pm-global-light; + stroke: $pm-global-light; } -}
\ No newline at end of file +} diff --git a/templates/@theme-base/reusable-components/_design-system-print.scss b/templates/@theme-base/reusable-components/_design-system-print.scss index fa339e4..eadc123 100644 --- a/templates/@theme-base/reusable-components/_design-system-print.scss +++ b/templates/@theme-base/reusable-components/_design-system-print.scss @@ -25,23 +25,73 @@ display: block; } + .is-printed-version { + .pm-modalContainer, + .pm-modal, + .pm-modalContentInner, + .pm-modalContent { + @extend .reset4print; + } + .pm-modalContentInner::before, + .pm-modalContentInner::after { + content: none; + } + } + body { padding: .5em; - overflow: auto; + overflow: auto; + + /* put back normal mode for print :) */ + --bgcolor-item-column-list: initial; + --bgcolor-unread-item-column-list: initial; + --bgcolor-view-column-detail: initial; + --bgcolor-main-area: initial; + --bgcolor-context-bar: initial; + --bgcolor-toolbar: initial; + --color-context-bar-link: initial; + --color-main-area: initial; + --fillcolor-icons: initial; + --bgcolor-disabled-checkboxes-radios: initial; + --bgcolor-item-column-active: initial; + --bordercolor-input: initial; + --bgcolor-input: initial; + --bgcolor-highlight: initial; + --color-input: initial; + + .pm-button:not(.pm-button--primary):not(.pm-button--link), .pm-button--info { + border-color: $pm-global-border; + background: $white; + color: $pm-global-grey; + } + } + /* hide unnecessary elements */ .noprint { display: none; } - + .is-printed-version { + .app-root, + .pm-modalOverlay, + .pm-modalHeader, + .pm-modalFooter, + .pm-modalContentInnerTopShadow, + .pm-modalContentInnerBottomShadow, + .item-icon, + [class^="scrollshadow-"] { + @extend .noprint; + } + } + /* display specific elements for print */ .onprint { display: block; } - + /* avoid problematic page break */ - blockquote, ul, ol { + ul, ol { page-break-inside: avoid; } h1, h2, h3, caption { diff --git a/templates/@theme-base/reusable-components/_design-system-reset.scss b/templates/@theme-base/reusable-components/_design-system-reset.scss index 10c91ed..3554888 100644 --- a/templates/@theme-base/reusable-components/_design-system-reset.scss +++ b/templates/@theme-base/reusable-components/_design-system-reset.scss @@ -12,7 +12,7 @@ html { box-sizing: border-box; } /* reset minimum */ html, body, blockquote, ul, ol, form, button, figure { margin: 0; padding: 0; } button, progress { border: 0; } -p, ul, ol, dl, blockquote, pre, td, th { +p, ul, ol, dl, blockquote, pre, menu, td, th { font-size: 1em; line-height: $l-h; margin: $l-h * 1em 0; @@ -26,70 +26,156 @@ p, ul, ol, dl, blockquote, pre, td, th { font: inherit; -webkit-appearance: none; } + // -webkit-appearance: none makes vocalization failing + input[type="checkbox"] { + -webkit-appearance: checkbox; + } + input[type="radio"] { + -webkit-appearance: radio; + } + +} +@else { + input, select, textarea, optgroup, button { + font: inherit; + } } /* fix display img/iframe */ img, iframe { vertical-align: middle; } -ul, ol { padding-left: 2em; } +ul, ol, menu { padding-left: 2em; } + +dd { margin-left: 2em; } -.unstyled { - padding-left: 0; - list-style-type: none; -} @if $rtl-option == true { /* RTL */ - [dir="rtl"] ul, - [dir="rtl"] ol { - padding-left: 0; - padding-right: 2em; - } - [dir="rtl"] .unstyled { - padding-right: 0; + [dir="rtl"] { + ul, + ol { + padding-left: 0; + padding-right: 2em; + } + dd { + margin-left: 0; + margin-right: 2em; + } } } @if $root-equiv-10-px == true { /* base font size at 10px */ - html { - font-size: 62.5%; - /* IE9-IE11 math fixing. See https://connect.microsoft.com/IE/feedback/details/816709/ */ - /* Thanks to @guardian, @victorbritopro, @eQRoeil & Knacss */ - font-size: calc(1em * 0.625); + html { + font-size: 62.5%; + @if ( $use-ie-calc-font-fallback == true ){ + font-size: calc(1em * 0.625); + } } } -body { - background: $pm-global-grey; - color: $pm-global-light; - font-family: $font-family; - text-rendering: geometricPrecision; - -webkit-font-smoothing: antialiased; - - @if $typo-unit == 'use_em' { - @if $root-equiv-10-px == true { - font-size: em($base-font, 10); - } - @else { - font-size: em($base-font, $root-default-font-size); - } - } - @else if $typo-unit == 'use_rem' { - font-size: var(--body-fontsize, rem($base-font)); - } - @else if $typo-unit == 'use_rem_with_em_fallback' { - @if $root-equiv-10-px == true { - font-size: em($base-font, 10); - } - @else { - font-size: em($base-font, $root-default-font-size); - } - font-size: rem($base-font); - } - line-height: $l-h; - min-height: 100%; + +@if $apply-body-styles == true { + body { + background: $pm-global-grey; + color: $pm-global-light; + font-family: $font-family; + text-rendering: geometricPrecision; + -webkit-font-smoothing: antialiased; + + @if $typo-unit == 'use_em' { + @if $root-equiv-10-px == true { + font-size: em($base-font, 10); + } + @else { + font-size: em($base-font, $root-default-font-size); + } + } + @else if $typo-unit == 'use_rem' { + font-size: var(--body-fontsize, rem($base-font)); + } + @else if $typo-unit == 'use_rem_with_em_fallback' { + @if $root-equiv-10-px == true { + font-size: em($base-font, 10); + } + @else { + font-size: em($base-font, $root-default-font-size); + } + font-size: rem($base-font); + } + line-height: $l-h; + min-height: 100%; + } +} + + +// Sass placeholder, don't touch if you are not sure ;) +%bold { + font-weight: bold; +} +b, strong { + @extend %bold; } +/* harmonization between Chrome/Firefox */ +pre, code, kbd, samp { + font-family: $font-family-monospace; + font-size: 1em; +} +pre { + white-space: pre-wrap; + word-wrap: break-word; +} + +// tiny reset for mark tag +mark { + @if ( $use-color-reset-mark == true ) { + background-color: unset; + } + @else { + background-color: var(--bgcolor-mark, $default-bgColor-mark); + } + color: var(--color-mark, currentColor); + font-weight: bold; +} + +small { + font-size: 80%; +} + + +/* avoid border on images in links + fix border image IE */ +a:link img, +a:visited img, +img { + border-style: none; +} +/* tiny control */ +audio:not([controls]) { + display: none; + height: 0; +} + +/* important, abbr are good */ +/* only those with a title are shown */ +abbr[title] { + border-bottom: dotted 1px; + cursor: help; + text-decoration: none; + /* color inherited from text */ +} + + +code, +pre, +samp { + white-space: pre-wrap; +} +code { + line-height: 1; +} +dfn { + font-style: italic; +} diff --git a/templates/@theme-base/reusable-components/_design-system-responsive.scss b/templates/@theme-base/reusable-components/_design-system-responsive.scss index 5acf8e5..83edd6d 100644 --- a/templates/@theme-base/reusable-components/_design-system-responsive.scss +++ b/templates/@theme-base/reusable-components/_design-system-responsive.scss @@ -1,11 +1,35 @@ /* general case */ @include body-before ('desktop', true); + +/** + * medium/tablet landscape minor breakpoint + */ +@include respond-to($breakpoint-medium-landscape) { + + $list-paddings-medium-landscape: p, pt, pr, pb, pl !default; + $list-paddings-medium-landscape-values: 0, 1 !default; // specify 2.5 if needed + + @include padding-generator($list-paddings-medium-landscape, $list-paddings-medium-landscape-values, "ontablet-landscape-"); + +} + +/** + * medium/tablet breakpoint + */ +@include respond-to($breakpoint-medium, 'min') { + .ondesktop { + &-h100 { + height: 100%; + } + } +} + /** * medium/tablet breakpoint */ -@include respond-to($breakpoint-medium) { - +@include respond-to($breakpoint-medium) { + /** * layout/modules */ @@ -15,26 +39,26 @@ /* hide unnecessary elements */ .notablet { display: none; } - + /* linearization of floating content/table-layout */ .autotablet { float: none; display: block; width: auto; } - + /* margins */ - $list-margins-tablet: m, mt, mr, mb, ml; - $list-margins-tablet-values: 0, 1, 2; // specify 2.5 if needed + $list-margins-tablet: m, mt, mr, mb, ml !default; + $list-margins-tablet-values: 0, 1, 2 !default; // specify 2.5 if needed @include margin-generator($list-margins-tablet, $list-margins-tablet-values, "ontablet-"); /* paddings */ - $list-paddings-tablet: p, pt, pr, pb, pl; - $list-paddings-tablet-values: 0, 1, 2; // specify 2.5 if needed + $list-paddings-tablet: p, pt, pr, pb, pl !default; + $list-paddings-tablet-values: 0, 1, 2 !default; // specify 2.5 if needed @include padding-generator($list-paddings-tablet, $list-paddings-tablet-values, "ontablet-"); - + /* text aligns */ .ontablet- { &alignleft { text-align: left; } @@ -49,9 +73,27 @@ width: 100%; flex-basis: auto; } - } + } + + &w25 { width: 25%; } &w100 { width: 100%; } - &mw100 { max-width: 100% } + &mw100 { max-width: 100%; } + &wauto { width: auto; } + + @for $i from 2 through 3 { + &hideTd#{$i} { + td:nth-child(#{$i}) { + display: none; + } + } + } + + &list-1column { + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; + } + } /** @@ -67,7 +109,7 @@ /** * small/mobile breakpoint */ -@include respond-to($breakpoint-small) { +@include respond-to($breakpoint-small) { /** * layout/modules @@ -85,19 +127,19 @@ display: block; width: auto; } - + /* margins */ - $list-margins-mobile: m, mt, mr, mb, ml; - $list-margins-mobile-values: 0, 0.5, 1, 2; // specify 2.5 if needed + $list-margins-mobile: m, mt, mr, mb, ml !default; + $list-margins-mobile-values: 0, 0.25, 0.5, 1, 2, 3.5 !default; // specify 2.5 if needed @include margin-generator($list-margins-mobile, $list-margins-mobile-values, "onmobile-"); - + /* paddings */ - $list-paddings-mobile: p, pt, pr, pb, pl; - $list-paddings-mobile-values: 0, 1, 2; // specify 2.5 if needed + $list-paddings-mobile: p, pt, pr, pb, pl !default; + $list-paddings-mobile-values: 0, 0.25, 0.5, 1, 2 !default; // specify 2.5 if needed @include padding-generator($list-paddings-mobile, $list-paddings-mobile-values, "onmobile-"); - + /* text aligns */ .onmobile- { &alignleft { text-align: left; } @@ -113,7 +155,10 @@ flex-basis: auto; } &.flex-autogrid { - margin: 0; + margin: 0; + &.mb1 { + margin-bottom: 1em; + } } & > .flex-autogrid-item { padding: 0; @@ -125,24 +170,64 @@ & > * { align-self: center; } - } - &wauto { - width: auto; - } - &flex-wrap { + } + &flex-item-fluid { + flex: 1 1 0px; + } + &flex-item-fluid-auto { + flex: 1 1 auto; + } + &no-flex { + flex: 0 0 auto; + } + &flex-shrink { + flex-shrink: 1; + } + &flex-self-start { + align-self: start; + } + &flex-wrap { flex-wrap: wrap; } - &min-w100 { + &mw100 { + max-width: 100%; + } + &min-w100 { min-width: 100%; } - &w100 { - width: 100%; + &wauto { + width: auto; } + &w25{ + width: 25%; + } + &w33{ + width: 33%; + } + &w100 { + width: 100%; + } + &no-border { + border: 0; + } + &static { position: static; - } + } + @for $i from 2 through 5 { + &hideTd#{$i} { + td:nth-child(#{$i}) { + display: none; + } + } + } + &list-1column { + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; + } } - + /** * global structure adaptation (page / skip links / header / main content / footer) @@ -156,7 +241,7 @@ /** * tiny/small mobile breakpoint */ -@include respond-to($breakpoint-tiny) { +@include respond-to($breakpoint-tiny) { /** * layout/modules @@ -174,18 +259,37 @@ display: block; width: auto; } - + .ontinymobile- { + &wauto { + width: auto; + } + &flex-self-start { + align-self: flex-start; + } + &flex-column { + flex-direction: column; + & > * { + width: 100%; + flex-basis: auto; + } + } + &hideTd3 { + td:nth-child(3) { + display: none; + } + } + } /* margins */ - //$list-margins-tinymobile: m, mt, mr, mb, ml; - //$list-margins-tinymobile-values: 0, 1, 2; // specify 2.5 if needed + $list-margins-tinymobile: m, mt, mr, mb, ml !default; + $list-margins-tinymobile-values: 0, 1 !default; - //@include margin-generator($list-margins-tinymobile, $list-margins-tinymobile-values, "ontinymobile-"); + @include margin-generator($list-margins-tinymobile, $list-margins-tinymobile-values, "ontinymobile-"); /* paddings */ - //$list-paddings-tinymobile: p, pt, pr, pb, pl; - //$list-paddings-tinymobile-values: 0, 1, 2; // specify 2.5 if needed + //$list-paddings-tinymobile: p, pt, pr, pb, pl !default; + //$list-paddings-tinymobile-values: 0, 1, 2 !default; // specify 2.5 if needed - //@include padding-generator($list-paddings-tinymobile, $list-paddings-tinymobile-values, "ontinymobile-"); + //@include padding-generator($list-paddings-tinymobile, $list-paddings-tinymobile-values, "ontinymobile-"); /** * global structure adaptation (page / skip links / header / main content / footer) 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 fe793a3..b54dd8f 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 @@ -6,6 +6,20 @@ dialog { border: 0; } border-collapse: collapse; } +.unstyled { + padding-left: 0; + list-style-type: none; +} + +@if $rtl-option == true { + /* RTL */ + [dir="rtl"] { + .unstyled { + padding-right: 0; + } + } +} + /* * taken from http://tinytypo.tetue.net/ made by @tetue * tuned with the help of https://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php @@ -28,21 +42,10 @@ q:after { content: close-quote; } -/* avoid ugly line-height */ -sup, -sub { - vertical-align: 0; - position: relative; -} -sup { - bottom: 1ex; -} -sub { - top: .5ex; -} +@import './_includes/_resets/typo-sub-sup'; /* avoid margin problems */ -@if $vertical-rythm == 'single_top' or $vertical-rythm == 'double_top_single_bottom' { +@if $vertical-rhythm == 'single_top' or $vertical-rhythm == 'double_top_single_bottom' { h1,.h1, h2,.h2, h3,.h3, @@ -63,7 +66,7 @@ sub { table { &:last-child { margin-bottom: 0; - } + } } } @@ -87,7 +90,7 @@ li ul { p { word-break: break-word; } - @supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) { + @supports (-webkit-hyphens: auto) or (hyphens: auto) { textarea, table, td, @@ -98,7 +101,7 @@ li ul { div, p { word-break: normal; - @include vendor-prefix(hyphens, auto, webkit ms); + @include vendor-prefix(hyphens, auto, webkit); } } } @@ -106,10 +109,10 @@ li ul { .cut { word-break: break-word; } - @supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) { + @supports (-webkit-hyphens: auto) or (hyphens: auto) { .cut { word-break: normal; - @include vendor-prefix(hyphens, auto, webkit ms); + @include vendor-prefix(hyphens, auto, webkit); } } } @@ -118,24 +121,19 @@ li ul { .nocut { word-wrap: normal; } -@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) { +@supports (-webkit-hyphens: auto) or (hyphens: auto) { .nocut { - @include vendor-prefix(hyphens, none, webkit ms); + @include vendor-prefix(hyphens, none, webkit); } } .break { - word-wrap: break-word; -} - -code, -pre, -samp { - white-space: pre-wrap; + word-break: break-word; } -code { - line-height: 1; +.hyphens { + @include vendor-prefix(hyphens, auto, webkit); } + kbd { border: solid 1px; border-top-left-radius: .5em; @@ -146,14 +144,6 @@ table { margin-bottom: 1.5em; table-layout: fixed; } -/* important, abbr are good */ -/* only those with a title are shown */ -abbr[title] { - border-bottom: dotted 1px; - cursor: help; - text-decoration: none; - /* color inherited from text */ -} /* text aligns */ .alignright { text-align: right; } @@ -168,15 +158,21 @@ abbr[title] { .ellipsis { overflow: hidden; - text-overflow: ellipsis; + text-overflow: ellipsis; white-space: nowrap; } +.ellipsis-two-lines, .ellipsis-four-lines { display: -webkit-box; - -webkit-line-clamp: 4; - -webkit-box-orient: vertical; + -webkit-box-orient: vertical; overflow: hidden; } +.ellipsis-two-lines { + -webkit-line-clamp: 2; +} +.ellipsis-four-lines { + -webkit-line-clamp: 4; +} .uppercase { text-transform: uppercase; @@ -184,9 +180,22 @@ abbr[title] { .capitalize { text-transform: capitalize; } +.capitalize-block { + text-transform: lowercase; + &:first-letter { + text-transform: uppercase; + } +} -b, strong, .strong, .bold { - font-weight: bold; +.strong, .bold { + @extend %bold; +} +.nobold { + font-weight: normal; +} + +.semibold { + font-weight: 600; } .italic { @@ -195,4 +204,19 @@ b, strong, .strong, .bold { .no-outline { outline: 0; -}
\ No newline at end of file +} + +.strike { + text-decoration: line-through; +} + +.pre-wrap { + white-space: pre-wrap; +} +.no-wrap { + white-space: nowrap; +} +.pre { + white-space: pre; +} + diff --git a/templates/@theme-base/reusable-components/_includes/_resets/_typo-sub-sup.scss b/templates/@theme-base/reusable-components/_includes/_resets/_typo-sub-sup.scss new file mode 100644 index 0000000..6e9b3d7 --- /dev/null +++ b/templates/@theme-base/reusable-components/_includes/_resets/_typo-sub-sup.scss @@ -0,0 +1,12 @@ +/* avoid ugly line-height */ +sup, +sub { + vertical-align: 0; + position: relative; +} +sup { + bottom: 1ex; +} +sub { + top: .5ex; +} |