diff options
Diffstat (limited to 'templates/@theme-base/pm-styles')
45 files changed, 2826 insertions, 985 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); + } +} |