diff options
Diffstat (limited to 'templates/@theme-base')
65 files changed, 9331 insertions, 0 deletions
diff --git a/templates/@theme-base/_dark_mode.scss b/templates/@theme-base/_dark_mode.scss new file mode 100644 index 0000000..188148c --- /dev/null +++ b/templates/@theme-base/_dark_mode.scss @@ -0,0 +1,610 @@ +// Applies theme styles across as many areas of the layout as possible. + +// Scrollbar (PM currently does not style this element) +body { + scrollbar-color: lighten($base, 10%) lighten($base, 2%); +} +::-webkit-scrollbar { + width: 16px; + + &-track { + background: lighten($base, 2%); + } + &-thumb { + background: lighten($base, 10%); + box-shadow: inset 0 0 0 4px lighten($base, 2%); + border-radius: 16px; + } +} + +.isDarkMode { + .bordered, + .bordered-container:not([class*="composerInputMeta-"]), + .breadcrumb-container { + border-color: lighten($base, 10%); + } + + .dropDown-content::after, .dropDown-content::before, + .dropDown:not(.dropDown--noCaret)::before, + .dropDown-content { + background: $base; + border: $base; + } + + .dropDown-item-button:focus, .dropDown-item-button:focus-within, + .dropDown-item-button:hover, .dropDown-item-link:focus, + .dropDown-item-link:focus-within, .dropDown-item-link:hover { + background-color: darken($base, 5%); + } + + .dropDown-item-button.is-disabled, .dropDown-item-button[disabled], + .dropDown-item-link.is-disabled, .dropDown-item-link[disabled] { + background-color: darken($base, 2%); + } + + .squireToolbar-select-list { + background: $base; + color: $text_color; + } + + .squireToolbar-dropdown-divider { + background-color: lighten($base, 10%); + } + + .squireToolbar-select-item:hover { + background: darken($base, 2%); + } + + // Compose window + #pm_composer .composer, + .composerInputMeta-overlay { + background: $base; + } + + #pm_composer .composer .fill { + background: $base; + } + + .composer-body-container textarea { + background: $base; + } + + .composer-addresses-item { + background: darken($base, 5%); + } + + + .composer-addresses-autocomplete { + ul { + background: darken($base, 5%); + } + + li[aria-selected="true"], + li:hover { + background: $base; + } + } + + // Email tags present in new message window + .autocompleteEmails-item { + background-color: darken($base, 2%); + border-color: darken($base, 2%); + } + + .autocompleteEmails-label { + border-left: 1px solid lighten($base, 10%); + border-right: 1px solid lighten($base, 10%); + } + + .composerOptions-container.show { + background: darken($base, 2%); + + .shadow-container { + background: $base; + color: $text_color; + } + } + + .pm-button.pm-button--primary { + background: darken($highlight, 10%); + color: $text_color; + border-color: darken($highlight, 10%); + } + + .pm-button.pm-button--primary:hover { + background: $highlight; + color: $text_color; + } + + .is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] { + background-color: darken($base, 2%); + border-color: lighten($base, 10%); + color: darken($text_color, 10%); + } + + .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 { + color: $text_color; + background-color: $base; + border-color: lighten($base, 10%); + } + + .pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: lighten($base, 10%); + } + + .pm-button-blueborder { + border-color: $highlight; + color: $highlight; + } + + .pm-button-blueborder:hover { + border-color: lighten($highlight, 5%); + color: lighten($highlight, 5%); + } + + [class*="squireToolbar-row"] .squireToolbar-action-mode:active, [class*="squireToolbar-row"] .squireToolbar-action-mode:hover, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:active, [class*="squireToolbar-row"] [class*="squireToolbar-action-"]:hover { + background: lighten($base, 2%) !important; + } + + .squireToolbar-separator { + background: lighten($base, 5%); + } + + .composerTime-container, + [class*="composer-field"] { + color: $text_color; + } + + .composerInputMeta-overlay-fakefield { + border-color: $text_color; + } + + // Encryption icon + .encryptionStatus .color-global-grey-dm:not(.color-pm-blue) svg { + color: white; + } + + // Message items + .conversation { + border-color: lighten($base, 10%); + } + + .main-area, + .main-area--noHeader, + .main-area--withToolbar, + .main-area--withToolbar--noHeader, + [class*="block-info-"] { + color: $text_color; + } + + [class*="block-info"] { + background-color: lighten($base, 10%); + color: $text_color; + } + + .fill-global-grey { + fill: $highlight; + } + + .starbutton { + fill: $extra_color; + } + + // Read message + .bg-global-light, kbd { + background: $base; + } + + // Contacts items and header + .item-container, .item-container-row, .contactsummary-container { + background: $base; + } + + .items-column-list-inner, .ReactVirtualized__Grid__innerScrollContainer { + border-color: lighten($base, 10%); + + .item-container, .item-container-row { + border-color: lighten($base, 10%); + } + } + + // Unread, not active + .item-container:not(.item-is-selected):not(.read):not(.active), + .item-container:not(.item-is-selected):not(.item-contact):not(.read):not(.active), + .item-container-row:not(.item-is-selected):not(.item-contact):not(.read):not(.active), .squireToolbar-container { + background: lighten($base, 5%); + } + + // Active + .item-container.active, .item-is-selected { + background: darken($base, 2%); + .flex-item-fluid { + color: $highlight; + } + } + + // Selected message checkbox + .item-icon { + background-color: $base; + border: 1px solid darken($text_color, 5%); + } + + .selectBoxElement-container:hover .item-icon { + background-color: $base; + border: 1px solid darken($highlight, 5%); + + .item-icon-fakecheck-icon { + fill: darken($highlight, 5%); + } + } + + .selectBoxElement-container { + color: $text_color; + } + + .selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: darken($highlight, 5%); + border-color: darken($highlight, 5%); + } + + .item-checkbox + .item-icon:hover, + .item-checkbox:hover + .item-icon { + background-color: darken($base, 5%); + } + + // Message list background area + .items-column-list, + .elementList-container-row { + background-color: $base; + } + + // Current message panel + .composer-container { + background: lighten($base, 5%); + } + + .message-header { + background-color: lighten($base, 5%); + } + + .view-column-detail { + background-color: $base; + } + + details:first-child { + border-color: lighten($base, 10%); + } + + .items-column-list, + .message-container, + .message-attachments { + border-color: lighten($base, 10%); + } + + .message-container:not(.sent):not(.draft) .message-header.message-summary::before, + .message-header.is-inbound::before { + border-top: 1px solid lighten($base, 10%); + border-left: 1px solid lighten($base, 10%); + background-color: lighten($base, 5%); + } + + // Mailing list block + .message-infobox { + background-color: $base; + } + + // Email body background, text and links + .message-content.frame.message-frame { + background: white; + color: black; + } + + .block-info-standard, .bodyDecrypted blockquote { + border-color: $highlight; + } + + .squireDropdown-item-label { + color: $text_color; + } + + .squireToolbar-action-color { + background: transparent; + } + + // This forces the background of a new message to used the base color. + .angular-squire-iframe body { + color: $text_color; + background: lighten($base, 5%); + + a { + color: $highlight; + } + } + + .plaintext-editor { + color: $text_color; + } + + // Attachment button + .pm-button, .pm-button--info, .pm-button--redborder { + background: $base; + border-color: lighten($base, 10%); + color: $text_color; + } + + .message-attachmentInfo { + border-color: lighten($base, 10%); + } + + .is-hover.pm-button--info, .is-hover.pm-button--redborder, + .pm-button--info:focus, .pm-button--info:focus-within, + .pm-button--info:hover, .pm-button--redborder:focus, + .pm-button--redborder:focus-within, .pm-button--redborder:hover, + .pm-button.is-hover, .pm-button:focus-within, + .pm-button:hover:not(.pm-button--primary) { + color: $highlight; + } + + .pm-button:focus { + color: $text_color; + } + + .is-disabled.pm-button--info, + .is-disabled.pm-button--redborder, + .pm-button--info[disabled], + .pm-button--redborder[disabled], + .pm-button.is-disabled, + .pm-button[disabled] { + background: lighten($base, 10%); + } + + .is-active.pm-button--info, + .is-active.pm-button--redborder, + .pm-button--info:not(div):active, + .pm-button--redborder:not(div):active, + .pm-button.is-active, .pm-button:not(div):active { + background: lighten($base, 10%); + color: $highlight; + } + + // Dropdowns + .dropDown-content { + background: $base; + color: $text_color; + + button { + color: $text_color; + } + + .elementsSelector-btn-action, + .dropDown-item:hover { + color: $text_color; + } + + .dropDown-item:hover { + background: lighten($base, 5%) !important; + } + + .dropDown-item + .dropDown-item { + border-top: 1px solid lighten($base, 10%); + } + + .dropDown-item { + .color-global-grey { + color: $text_color; + } + } + } + + .dropDown { + .dropDown-content { + &::before, &::after { + border-bottom-color: $base; + } + } + } + + .dropDown--right-bottom { + &::before { + border-right-color: $base; + } + + .dropDown-content { + &::before, &::after { + background: $base; + } + } + } + + .dropDown--bottom-right { + .dropDown-content { + &::before, &::after { + background: $base; + } + } + } + + .dropDown--bottom-left::before, + .dropDown--bottom-right::before, + .dropDown--bottom::before { + border-bottom-color: lighten($base, 10%); + } + + .dropDown--bottom-right { + border: 1px solid lighten($base, 10%); + } + + .pm-field-icon-container[type="search"], .pm-field[type="search"] { + background-color: lighten($base, 5%); + } + + .dropDown-contentInner { + background-color: $base; + + &::before, &::after { + background-color: $base; + } + + .dropDown-item span { + color: $text_color !important; + } + } + + .searchbox-field[type="search"]:not(#global_search) { + background: $text_color; + color: $base; + } + + // Links + + .link:active, .link:focus, .link:hover, + a:active, a:focus, a:hover, + .pm-button--link:hover, + .composerInputMeta-label:hover { + color: lighten($highlight, 5%); + } + + // Modal + .pm-modal, .pm-modalContentInner { + background-color: $base; + color: $text_color; + + &::before, &::after { + background-color: $base; + } + + .labelColorSelector-item-mask { + border: 2px solid lighten($base, 15%); + } + } + + .pm-button--primaryborder, .pm-button-blueborder { + border-color: $highlight; + color: $highlight; + background-color: lighten($base, 5%); + transition: background-color .2s ease-in-out; + } + + .is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, + .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, + .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, + .pm-button-blueborder:focus-within, .pm-button-blueborder:hover { + border-color: $highlight; + color: $highlight; + background-color: darken($base, 1%); + } + + .scrollshadow-static { + background: $base; + } + + // Input fields + .pm-field, .pm-field-icon-container, + .focus.pm-field-icon-container, .pm-field-icon-container:focus, + .pm-field-icon-container:focus-within, .pm-field.focus, + .pm-field:focus, .pm-field:focus-within, + .composerInputMeta-overlay-fakefield, + .composerInputMeta-autocomplete { + color: $text_color; + background-color: lighten($base, 5%); + + &::placeholder { + color: darken($text_color, 5%); + } + } + + .composerInputMeta-autocomplete input { + color: $text_color; + background-color: lighten($base, 5%); + + &::placeholder { + color: darken($text_color, 5%); + } + } + + select.pm-field, select.pm-field-icon-container { + background-color: lighten($base, 5%); + color: $text_color; + } + + // Storage progress modal + .storageProgress-content.dropDown-content--rightbottom { + &::before { + border-right-color: $base; + } + } + + // Settings panel + .sticky-title { + background: lighten($base, 2%); + } + + .bg-global-highlight { + background-color: $base; + } + + .bg-white-dm { + background-color: lighten($base, 5%); + } + + .main-area, .main-area--noHeader, + .main-area--withToolbar, + .main-area--withToolbar--noHeader, + [class*="block-info-"] { + color: $text_color; + } + + .main-area, .main-area--noHeader, + .main-area--withToolbar, .main-area--withToolbar--noHeader { + background: $base; + } + + .context-bar { + background: $base; + } + + .subnav { + background: lighten($base, 5%); + + .link, a { + color: $highlight; + } + + .link:active, .link:focus, .link:hover, a:active, a:focus, a:hover { + color: lighten($highlight, 5%); + } + } + + // Toggle button + .pm-toggle-label { + border-color: lighten($base, 10%); + background: lighten($base, 5%); + + &::before { + background: $base; + } + + .pm-toggle-label-img { + fill: $text_color; + } + } + + // Plans table + .pm-plans-table-row--highlighted { + background-color: $base; + } + + // Forms + .pm-checkbox-fakecheck, + .pm-radio-fakeradio { + background: transparent; + } + + [class*="icon-"].color-primary { + color: $highlight; + } + + .color-global-grey-dm { + color: $highlight; + } +} diff --git a/templates/@theme-base/_styles.scss b/templates/@theme-base/_styles.scss new file mode 100644 index 0000000..0f6dee1 --- /dev/null +++ b/templates/@theme-base/_styles.scss @@ -0,0 +1,428 @@ +// Styles defined by Protonmail see https://design-system-beta.netlify.com/sass-variables/ -> + +@import "../@theme-base/reusable-components/design-system-config"; + +$main-bg-color: $base; +$secondary-bg-color: darken($base, 5%); +$bgcolor-searchbox-field: $search; +$bgcolor-spacebar: rgba(255, 255, 255, 0.1); +$bgcolor-aside-link: rgba(0, 0, 0, 0.3); +$bgcolor-toolbar: lighten($base, 5%); +$fillcolor-logo: $pm-global-light; +$fillcolor-icons: $white; +$color-nav-link: $navigation; +$color-nav-active: $highlight; +$color-standard-text: $white; +$boxshadow-main: none; + +@import "../@theme-base/pm-styles/pm-theme-config"; + +// Theme template styles -> + +// Loading state +html:not(.editor-squire-iframe) body { + background: $base; + color: $text_color; +} + +// Compose button +.pm-button--error, .pm-button--primary, .pm-button--warning, .pm-button-blue { + color: $text_color; + background-color: $highlight; + border: 1px solid $highlight; + transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out; +} + +.is-hover.pm-button--error, .is-hover.pm-button--primary, .is-hover.pm-button--warning, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover { + color: $navigation; + box-shadow: 0 0 .35714em 0 rgba(0,0,0,.2); + background: darken($highlight, 5%); + border: 1px solid darken($highlight, 5%); +} + +// Button classes +.pm-button--primaryborder-dark, .pm-button-blueborder-dark { + background: $main-bg-color; + border-color: $highlight; + color: $highlight; +} + +.is-active.pm-button--primaryborder-dark, .is-hover.pm-button--primaryborder-dark, .pm-button--primaryborder-dark:focus, .pm-button--primaryborder-dark:focus-within, .pm-button--primaryborder-dark:hover, .pm-button--primaryborder-dark:not(div):active, .pm-button-blueborder-dark.is-active, .pm-button-blueborder-dark.is-hover, .pm-button-blueborder-dark:focus, .pm-button-blueborder-dark:focus-within, .pm-button-blueborder-dark:hover, .pm-button-blueborder-dark:not(div):active { + background: $main-bg-color; + border-color: lighten($highlight, 5%); + color: lighten($highlight, 5%); +} + +.pm-button--primaryborder, .pm-button-blueborder { + border-color: darken($highlight, 5%); + color: darken($highlight, 5%); +} + +.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, .pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, .pm-button-blueborder.is-hover, .pm-button-blueborder:focus, .pm-button-blueborder:focus-within, .pm-button-blueborder:hover { + border-color: darken($highlight, 5%); + color: darken($highlight, 5%); +} + +// Disabled button +.is-disabled.pm-button--error, .is-disabled.pm-button--error.pm-button--info, .is-disabled.pm-button--error.pm-button--redborder, .is-disabled.pm-button--primary, .is-disabled.pm-button--primary.pm-button--info, .is-disabled.pm-button--primary.pm-button--redborder, .is-disabled.pm-button--warning, .is-disabled.pm-button--warning.pm-button--info, .is-disabled.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info[disabled], .pm-button--error.pm-button--redborder[disabled], .pm-button--error[disabled], .pm-button--primary.pm-button--info[disabled], .pm-button--primary.pm-button--redborder[disabled], .pm-button--primary[disabled], .pm-button--warning.pm-button--info[disabled], .pm-button--warning.pm-button--redborder[disabled], .pm-button--warning[disabled], .pm-button-blue.is-disabled, .pm-button-blue.is-disabled.pm-button--info, .pm-button-blue.is-disabled.pm-button--redborder, .pm-button-blue.pm-button--info[disabled], .pm-button-blue.pm-button--redborder[disabled], .pm-button-blue[disabled], .pm-button.is-disabled.pm-button--error, .pm-button.is-disabled.pm-button--primary, .pm-button.is-disabled.pm-button--warning, .pm-button.pm-button--error[disabled], .pm-button.pm-button--primary[disabled], .pm-button.pm-button--warning[disabled], .pm-button.pm-button-blue.is-disabled, .pm-button.pm-button-blue[disabled] { + background-color: lighten($highlight, 40%); + border-color: lighten($highlight, 5%); + color: darken($highlight, 10%); +} + +.bg-primary { + background-color: lighten($main-bg-color, 5%); +} + +.color-primary { + color: $highlight; +} + +// Message numbers +.navigation__counterItem { + background: darken($highlight, 10%); + color: lighten($text_color, 35%); +} + +// Message items +.item-container-row:hover::before, .item-container:hover::before { + border-color: lighten($highlight, 10%); +} + +.item-checkbox + .item-icon:hover, .item-checkbox:hover + .item-icon { + border-color: lighten($highlight, 25%); +} + +.item-checkbox:hover:not(:checked) + .item-icon .item-icon-fakecheck-icon { + fill: darken($highlight, 10%); +} + +// Storage indicator +.circle-chart__circle { + stroke: $highlight; +} + +// Top navigation +#dropdown-0 { + .dropDown-content::after, .dropDown-content::before, + &.dropDown:not(.dropDown--noCaret)::before, + .dropDown-content { + background: $base; + } +} + +.dropDown:not(.dropDown--noCaret)::before, +.dropDown::after, +.dropDown-logout-initials, +.dropDown-item-hr { + border-color: lighten($base, 5%) !important; +} + +#global_search.searchbox-field[type="search"] { + background-color: $search; + color: $text_color; +} + +.searchbox-advanced-search-button:active, +.searchbox-advanced-search-button:focus, +.searchbox-advanced-search-button:hover { + background-color: $base; +} + +.topnav-link, .topnav-link > .topnav-icon { + color: $navigation; + transition: color .2s ease-in-out; +} + +.topnav-link:active, .topnav-link:focus, +.topnav-link:hover, .topnav-link[aria-current="true"] { + color: $highlight; +} + +.topnav-link:active > .topnav-icon, .topnav-link:focus > .topnav-icon, +.topnav-link:hover > .topnav-icon, .topnav-link[aria-current=true] > .topnav-icon { + color: $highlight; +} + +.protonmail .text-purple { + color: $base !important; +} + +.protonmail .text-purple:hover { + color: darken($highlight, 10%) !important; +} + +// Dropdown +.dropDown-item-button:focus, .dropDown-item-button:hover, .dropDown-item-link:focus, .dropDown-item-link:hover { + color: $highlight; +} + +// Compose window +#pm_composer .composer, +.composerInputMeta-overlay { + .composerHeader-container { + background: lighten($base, 5%); + } +} + +#pm_composer .composer .fill { + background: $color-standard-text; +} + +// Conversation items +.conversation { + &.marked::before { + background: $highlight; + } +} + +.item-container, .item-container-row { + &:not(.item-is-selected):not(.item-contact):not(.read):not(.active) { + background: $color-standard-text; + } +} + +.item-container.selected, .item-container-row.selected, +.item-container.active, .item-is-selected { + background: rgba($highlight, 0.1); +} + +.selectBoxElement-container:hover { + .item-icon { + background-color: transparent; + border: 1px solid darken($highlight, 5%); + + .item-icon-fakecheck-icon { + fill: darken($highlight, 5%); + } + } + + .item-checkbox:checked + .item-icon { + background-color: darken($highlight, 5%); + border-color: darken($highlight, 5%); + } +} + +.item-checkbox:checked + .item-icon { + background-color: $highlight; + border-color: $highlight; +} + +.item-checkbox + .item-icon:hover { + background-color: darken($highlight, 5%); + border-color: darken($highlight, 5%); +} + +.item-checkbox + .item-icon:hover .item-icon-fakecheck-icon { + fill: $navigation; +} + +.item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon { + fill: $navigation; +} + +// Star icon +.starbutton { + fill: $highlight !important; + opacity: 0.7; +} + +.starbutton:focus, .starbutton:hover { + fill: $highlight; +} + +// Encryption icon +.autocompleteEmailsItem-icon svg.encryptionIcon { + fill: darken($highlight, 5%); +} + +.encryptionStatus .color-pm-blue svg { + color: darken($highlight, 5%); + fill: darken($highlight, 5%); +} + +.encryptionStatus .color-global-grey-dm svg { + color: black; +} + +// Highlighted text (seen when multiple messages are selected) +.color-pm-blue { + color: $highlight; +} + +// Radio buttons +.pm-radio:checked + .pm-radio-fakeradio::before { + background: $highlight; +} + +// Information blocks +.block-info-standard { + border-color: $info_color; +} + +.block-info-standard-warning { + border-color: $warning_color; +} + +.block-info-standard-error { + border-color: $danger_color; +} + +// Links across the site: +.link, a, .pm-button--link { + color: darken($highlight, 10%); + transition: color .2s ease-in-out; +} + +.link:active, .link:focus, .link:hover, +a:active, a:focus, a:hover, +.pm-button--link:hover { + color: darken($highlight, 10%); +} + +// Buttons +.pm-button { + &--primary { + background-color: $highlight; + border-color: $highlight; + } + + &--link, &.pm-button--link { + color: $highlight; + } +} + +.pm-button--error, .pm-button--error.pm-button--info, .pm-button--error.pm-button--redborder, .pm-button--primary, .pm-button--primary.pm-button--info, .pm-button--primary.pm-button--redborder, .pm-button--warning, .pm-button--warning.pm-button--info, .pm-button--warning.pm-button--redborder, .pm-button-blue, .pm-button-blue.pm-button--info, .pm-button-blue.pm-button--redborder, .pm-button.pm-button--error, .pm-button.pm-button--primary, .pm-button.pm-button--warning, .pm-button.pm-button-blue { + background-color: $highlight; + border-color: $highlight; +} + +.is-hover.pm-button--error, .is-hover.pm-button--error.pm-button--info, .is-hover.pm-button--error.pm-button--redborder, .is-hover.pm-button--primary, .is-hover.pm-button--primary.pm-button--info, .is-hover.pm-button--primary.pm-button--redborder, .is-hover.pm-button--warning, .is-hover.pm-button--warning.pm-button--info, .is-hover.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:focus, .pm-button--error.pm-button--info:focus-within, .pm-button--error.pm-button--info:hover, .pm-button--error.pm-button--redborder:focus, .pm-button--error.pm-button--redborder:focus-within, .pm-button--error.pm-button--redborder:hover, .pm-button--error:focus, .pm-button--error:focus-within, .pm-button--error:hover, .pm-button--primary.pm-button--info:focus, .pm-button--primary.pm-button--info:focus-within, .pm-button--primary.pm-button--info:hover, .pm-button--primary.pm-button--redborder:focus, .pm-button--primary.pm-button--redborder:focus-within, .pm-button--primary.pm-button--redborder:hover, .pm-button--primary:focus, .pm-button--primary:focus-within, .pm-button--primary:hover, .pm-button--warning.pm-button--info:focus, .pm-button--warning.pm-button--info:focus-within, .pm-button--warning.pm-button--info:hover, .pm-button--warning.pm-button--redborder:focus, .pm-button--warning.pm-button--redborder:focus-within, .pm-button--warning.pm-button--redborder:hover, .pm-button--warning:focus, .pm-button--warning:focus-within, .pm-button--warning:hover, .pm-button-blue.is-hover, .pm-button-blue.is-hover.pm-button--info, .pm-button-blue.is-hover.pm-button--redborder, .pm-button-blue.pm-button--info:focus, .pm-button-blue.pm-button--info:focus-within, .pm-button-blue.pm-button--info:hover, .pm-button-blue.pm-button--redborder:focus, .pm-button-blue.pm-button--redborder:focus-within, .pm-button-blue.pm-button--redborder:hover, .pm-button-blue:focus, .pm-button-blue:focus-within, .pm-button-blue:hover, .pm-button.is-hover.pm-button--error, .pm-button.is-hover.pm-button--primary, .pm-button.is-hover.pm-button--warning, .pm-button.pm-button--error:focus, .pm-button.pm-button--error:focus-within, .pm-button.pm-button--error:hover, .pm-button.pm-button--primary:focus, .pm-button.pm-button--primary:focus-within, .pm-button.pm-button--primary:hover, .pm-button.pm-button--warning:focus, .pm-button.pm-button--warning:focus-within, .pm-button.pm-button--warning:hover, .pm-button.pm-button-blue.is-hover, .pm-button.pm-button-blue:focus, .pm-button.pm-button-blue:focus-within, .pm-button.pm-button-blue:hover { + background: darken($highlight, 5%); + border: 1px solid darken($highlight, 5%); +} + +.is-active.pm-button--error, .is-active.pm-button--error.pm-button--info, .is-active.pm-button--error.pm-button--redborder, .is-active.pm-button--primary, .is-active.pm-button--primary.pm-button--info, .is-active.pm-button--primary.pm-button--redborder, .is-active.pm-button--warning, .is-active.pm-button--warning.pm-button--info, .is-active.pm-button--warning.pm-button--redborder, .pm-button--error.pm-button--info:not(div):active, .pm-button--error.pm-button--redborder:not(div):active, .pm-button--error:not(div):active, .pm-button--primary.pm-button--info:not(div):active, .pm-button--primary.pm-button--redborder:not(div):active, .pm-button--primary:not(div):active, .pm-button--warning.pm-button--info:not(div):active, .pm-button--warning.pm-button--redborder:not(div):active, .pm-button--warning:not(div):active, .pm-button-blue.is-active, .pm-button-blue.is-active.pm-button--info, .pm-button-blue.is-active.pm-button--redborder, .pm-button-blue.pm-button--info:not(div):active, .pm-button-blue.pm-button--redborder:not(div):active, .pm-button-blue:not(div):active, .pm-button.is-active.pm-button--error, .pm-button.is-active.pm-button--primary, .pm-button.is-active.pm-button--warning, .pm-button.pm-button--error:not(div):active, .pm-button.pm-button--primary:not(div):active, .pm-button.pm-button--warning:not(div):active, .pm-button.pm-button-blue.is-active, .pm-button.pm-button-blue:not(div):active { + background: darken($highlight, 10%); + border-color: darken($highlight, 10%); +} + +.pm-button-blueborder { + box-shadow: none; + border-color: $base; + color: $base; + transition: color .2s ease-in-out, border-color .2s ease-in-out; +} + +.pm-button-blueborder:hover { + box-shadow: none; + border-color: darken($highlight, 10%); + color: darken($highlight, 10%); +} + +.is-active.pm-button--primaryborder, +.pm-button--primaryborder:not(div):active, +.pm-button-blueborder.is-active, +.pm-button-blueborder:not(div):active { + border-color: darken($highlight, 10%); + color: darken($highlight, 10%); + background: transparent; +} + +.pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: darken($highlight, 10%); +} + +.bg-pm-blue-gradient { + .pm-button--transparent:hover { + color: $text_color; + border-color: $text_color; + } +} + +// Settings toggle button +.pm-toggle-checkbox:checked+.pm-toggle-label:before { + background: $highlight; + border-color: $highlight; +} + +// Message panel + +.composer-title-bar { + background: $base; +} + +.color-global-light { + color: $text_color; +} + +.angular-squire-iframe body { + a { + color: $highlight; + } +} + +// Attachment icon +.fill-pm-blue, +.message-attachmentIcon .file-outer-icon.is-embedded { + fill: $highlight; +} + +// Subscription plans +.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) { + border-color: $highlight; + color: $highlight; + + &::before { + background-color: $highlight; + } +} + +.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2), +.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2), +.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) { + border-color: $highlight; +} + +.pm-simple-table-row-th { + .fill-primary { + fill: $highlight; + } +} + +// Forms +.pm-checkbox-fakecheck, .pm-radio-fakeradio { + border-color: $base; + + [class*="icon-"] { + fill: $highlight; + } +} + +[class*="icon-"].color-primary { + color: $base; + + &:hover { + color: darken($highlight, 10%); + } +} + +.pm-field, .editor, +.editor-toolbar, +.border-bottom, +.border-top, +.message-container.is-opened > .message-header { + border-color: darken($base, 10%); +} + +// Badges +.badgeLabel, .badgeLabel-primary { + border-color: darken($highlight, 10%); +} + +.badgeLabel, +.badgeLabel-blue, +.badgeLabel-primary, +.bg-pm-blue { + background-color: darken($highlight, 10%); +}
\ No newline at end of file diff --git a/templates/@theme-base/_version.scss b/templates/@theme-base/_version.scss new file mode 100644 index 0000000..7ca0a56 --- /dev/null +++ b/templates/@theme-base/_version.scss @@ -0,0 +1,2 @@ +// Used to update theme version across all themes. +$version: 'v4.0.0-beta.33';
\ No newline at end of file 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 new file mode 100644 index 0000000..b20a714 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-aside.scss @@ -0,0 +1,29 @@ +/* + * aside bar + */ + + .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; + + .aside-linkIcon { + fill: $pm-primary; + } + + } + } + .aside-linkIcon { + width: 17px; + height: 17px; + fill: var(--fillcolor-icons, $pm-global-light); + } diff --git a/templates/@theme-base/pm-styles/_pm-badges.scss b/templates/@theme-base/pm-styles/_pm-badges.scss new file mode 100644 index 0000000..897fb50 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-badges.scss @@ -0,0 +1,67 @@ +/* + * badges/labels + */ +$border-width: 2px !default; +[class*="badgeLabel"] { + @extend .uppercase; + @extend .color-white; + @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: $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 { + @extend .bg-pm-blue; + border-color: $pm-blue; + } +} +@else { + .badgeLabel-primary, + .badgeLabel { + @extend .bg-pv-green; + 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-blue-theme.scss b/templates/@theme-base/pm-styles/_pm-blue-theme.scss new file mode 100644 index 0000000..227cb21 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-blue-theme.scss @@ -0,0 +1,16 @@ +@import "../reusable-components/design-system-config"; + +$main-bg-color: $pm-blue-dark; +$secondary-bg-color: $pm-blue-light; +$bgcolor-searchbox-field: rgba(0, 0, 0, 0.2); +$bgcolor-spacebar: rgba(255, 255, 255, 0.1); +$bgcolor-aside-link: rgba(0, 0, 0, 0.3); +$bgcolor-toolbar: $pm-blue-light; +$fillcolor-logo: $pm-global-light; +$fillcolor-icons: $white; +$color-nav-link: $white; +$color-nav-active: $white; +$color-standard-text: $white; +$boxshadow-main: none; + +@import "./pm-theme-config";
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss b/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss new file mode 100644 index 0000000..f1556e5 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-breadcrumb-domain.scss @@ -0,0 +1,34 @@ +/* + * Breadcrumb domain + */ +.breadcrumb-container { + @extend .bordered-container; +} +.breadcrumb-item:not(:last-of-type)::after { + content: ''; + display: inline-block; + width: 1.6rem; + height: 1.6rem; + background: transparent url("#{$path-images}sprite-for-css-only.svg#css-greater") 0 0 no-repeat; + background-size: 1.4rem; + position: relative; + top: 6px; + opacity: .3; +} +@if $rtl-option == true { + [dir="rtl"] { + .breadcrumb-item:not(:last-of-type)::after { + background-image: url("#{$path-images}sprite-for-css-only.svg#css-lesser"); + } + } +} +.breadcrumb-button { + padding: .4em; + opacity: .3; + color: inherit; +} +[disabled][aria-current="step"].breadcrumb-button { + font-weight: bold; + opacity: 1; + color: inherit; +}
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss b/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss new file mode 100644 index 0000000..c418354 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-buttons-mixins.scss @@ -0,0 +1,104 @@ +// these mixins are present to be called from pm-buttons and pm-darkmode +@import "../reusable-components/design-system-config"; + + +@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, .3 ); + pointer-events: none; + border-color: rgba( $pm-global-muted, .3 ); + & svg { + fill: rgba( $pm-global-muted, .3 ); + } +} + +@mixin pm-button-dark { + color: $white; + background-color: $pm-global-grey; + border-color: var(--bordercolor-input, $pm-global-border); + + &:focus, + &:hover, + &.is-hover { + color: $white; + background-color: rgba(0, 0, 0, 0.2); + } + &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns + &.is-active { + background-color: rgba(0, 0, 0, 0.5); + } + &[disabled], + &.is-disabled { + @include button-disabled-state-dm; + } + /* just to cancel examples */ + &.is-hover:hover { + background-color: rgba(0, 0, 0, 0.2); + } +} + + +@mixin pm-button-blueborder-dark { + border-color: $pm-primary-light; + color: $pm-primary-light; + background-color: $pm-global-grey; + + &:focus, + &:hover, + &:focus-within, + &.is-hover, + &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns + &.is-active { + background-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-color: rgba(0, 0, 0, 0.5); + } + &[disabled], + &.is-disabled { + @include button-disabled-state-dm; + } +} + +@mixin pv-button-greenborder-dark { + border-color: $pv-green-light; + color: $pv-green-light; + background-color: $pm-global-grey; + + &:focus, + &:hover, + &:focus-within, + &.is-hover, + &:active, + &.is-active { + background-color: rgba(0, 0, 0, 0.2); + border-color: $pv-green-dark; + color: $pv-green-dark; + } + &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns + &.is-active { + background-color: rgba(0, 0, 0, 0.5); + } + &[disabled], + &.is-disabled { + @include button-disabled-state-dm; + } +} diff --git a/templates/@theme-base/pm-styles/_pm-buttons.scss b/templates/@theme-base/pm-styles/_pm-buttons.scss new file mode 100644 index 0000000..5b053a0 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-buttons.scss @@ -0,0 +1,428 @@ + +/* + * Buttons + */ +@import "pm-buttons-mixins"; + +[class*="pm-button"], +[class*="pv-button"] { + border-radius: $global-border-radius; + padding: em(5) em(16) em(6); // design want 34px height + 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; + } + &:hover, + &:focus, + &:focus-within, + &:active { + text-decoration: none; + } +} + +.pm-button { + border-color: $pm-global-border; + background-color: $white; + color: $pm-global-grey; + + + &:hover, + &:focus, + &:focus-within, + &.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-image: radial-gradient(closest-side, transparent, rgba(black, .1)); + box-shadow: none; + } + &[disabled], + &.is-disabled { + @include button-disabled-state; + } + /* just to cancel examples */ + &.is-active:hover { + box-shadow: none; + } + &.is-hover:hover { + background-color: $white; + } + + &.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; + } + } +} + + +.pm-button-dark { + @include pm-button-dark; +} + + +.pm-button-blue, +.pm-button.pm-button-blue { + color: $white; + background-color: $pm-primary; + border: 1px solid $pm-primary; + + &:focus, + &:hover, + &:focus-within, + &.is-hover { + color: $white; + box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2); + background-color: $pm-primary-dark; + } + &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns + &.is-active { + 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 { + @include button-disabled-state($pm-primary); + } + /* just to cancel examples */ + &.is-hover:hover { + background-color: $pm-primary-dark; + } +} + +.pm-button-blueborder { + border-color: $pm-primary; + color: $pm-primary; + background-color: $white; + + &:focus, + &:hover, + &:focus-within, + &.is-hover { + box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2); + border-color: $pm-primary-dark; + color: $pm-primary-dark; + } + &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns + &.is-active { + border-color: $pm-primary-dark; + color: $pm-primary-dark; + background-image: radial-gradient(closest-side, transparent, rgba(black, .1)); + box-shadow: none; + } + &[disabled], + &.is-disabled { + @include button-disabled-state; + } +} + + +.pm-button-blueborder-dark { + @include pm-button-blueborder-dark; +} + +.pv-button-green, +.pm-button.pv-button-green { + color: $white; + background-color: $pv-green; + border: 1px solid $pv-green; + + &:focus, + &:hover, + &:focus-within, + &.is-hover { + color: $white; + box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2); + background-color: $pv-green-dark; + } + &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns + &.is-active { + 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 { + @include button-disabled-state($pv-green); + } + /* just to cancel examples */ + &.is-hover:hover { + background-color: $pv-green-dark; + } +} + +.pv-button-greenborder { + border-color: $pv-green; + color: $pv-green; + background-color: $white; + + &:focus, + &:hover, + &:focus-within, + &.is-hover { + box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2); + border-color: $pv-green-dark; + color: $pv-green-dark; + } + &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns + &.is-active { + border-color: $pv-green-dark; + color: $pv-green-dark; + background-image: radial-gradient(closest-side, transparent, rgba(black, .1)); + box-shadow: none; + } + &[disabled], + &.is-disabled { + @include button-disabled-state; + } +} + + +.pv-button-greenborder-dark { + @include pv-button-greenborder-dark; +} + + + +/* modifiers */ +.pm-button--large { + 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 +} + +.pm-button--for-icon { + padding-left: .75em; + padding-right: .75em; +} +.pm-button--for-smallicon { + padding-left: .25em; + padding-right: .25em; +} + +/* button group */ +.pm-group-buttons { + @extend .inline-flex; + @extend .flex-nowrap; +} +.pm-group-button, +.pm-group-button.is-active, +.pm-group-button:hover, +.pm-group-button:focus, +.pm-group-button:active { + border-radius: 0; + border-left-width: 0; +} +.pm-group-button:hover, +.pm-group-button:focus, +.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; +} +.pm-group-buttons > .pm-group-button:last-child { + border-radius: 0 $global-border-radius $global-border-radius 0; +} + +@if $rtl-option == true { + [dir="rtl"] { + .pm-group-buttons > .pm-group-button:not(.pagination-expand):first-child { + border-radius: 0 $global-border-radius $global-border-radius 0; + border-right-width: 1px; + border-left-width: 0; + } + .pm-group-buttons > .pm-group-button:not(.pagination-expand):last-child { + border-radius: $global-border-radius 0 0 $global-border-radius; + border-left-width: 1px; + } + } +} + +/* 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--primaryborderEvenInDarkMode { + @extend .pm-button-blueborder; + } + .pm-button--primaryborder-dark { + @extend .pm-button-blueborder-dark; + } +} +@else { + .pm-button--primary { + @extend .pv-button-green; + } + .pm-button--primaryborder, + .pm-button--primaryborderEvenInDarkMode { + @extend .pv-button-greenborder; + } + .pm-button--primaryborder-dark { + @extend .pv-button-greenborder-dark; + } +} +.pm-button--link, +.pm-button.pm-button--link { + color: $color-links; + border-width: 0; + box-shadow: none; + text-decoration: underline; + background-color: transparent; // to avoid heriting from other classes + padding-left: 0; + padding-right: 0; + &:focus, + &:hover, + &:not(div):active, + &:active { + color: $color-hover; + text-decoration: underline; + box-shadow: none; + background: transparent; // to avoid heriting from other classes + } + &[disabled], + &.is-disabled { + color: rgba( $pm-global-grey, .5 ); + pointer-events: none; + 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.pm-button--error { + @extend .pm-button-blue; + background-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.pm-button--warning { + @extend .pm-button-blue; + background-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.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--primary.pm-button.pm-button--whiteborder { + border: 1px solid $white; +} + +/* other modifiers requested */ +.pm-button--noborder { + border: 0; +} +.pm-button--currentColor { + color: currentColor; +} +.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 new file mode 100644 index 0000000..8cb6629 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-circlebar.scss @@ -0,0 +1,41 @@ +$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(--color-main-area, $pm-global-grey); + opacity: .2; + stroke-width: $stroke-width; + fill: transparent; +} +.circle-chart__background--bigger .circle-chart__background { + stroke: var(--bgcolor-input, rgba($pm-global-grey, .2)); + opacity: .4; +} + +.circle-chart__circle { + stroke: $pm-global-success; + stroke-width: $stroke-width; + fill: transparent; + animation: circle-chart-fill 2s reverse; + transform: rotate(-90deg); + transform-origin: center; +} +.circle-bar--medium .circle-chart__circle { + stroke: $pm-global-attention; +} +.circle-bar--full .circle-chart__circle { + stroke: $pm-global-warning; +} +.circle-chart__percent { + fill: var(--color-main-area, rgba($pm-global-grey, .5) ); +} + +.circle-chart-info { + color: var(--color-standard-text, $pm-global-light); +} + + +@keyframes circle-chart-fill { + to { stroke-dasharray: 0 100; } +} 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 new file mode 100644 index 0000000..e9b44a4 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-containers.scss @@ -0,0 +1,163 @@ +/* + * containers + */ +.bordered, +.bordered-container, +.dashed, +.dashed-container { + border: 1px solid var(--bordercolor-input, $pm-global-border); +} +.bordered-container, +.dashed-container { + border-radius: $global-border-radius; +} +.bordered-container--error { + border-color: $pm-global-warning; +} + +.dashed, +.dashed-container { + border-style: dashed; +} + +.border-bottom { + border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); +} +.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); +} +.border-top--dashed { + border-top-style: dashed; +} +.border-left { + border-left: 1px solid var(--bordercolor-input, $pm-global-border); +} +.border-right { + border-right: 1px solid var(--bordercolor-input, $pm-global-border); +} + +.border-currentColor { + border: 1px solid currentColor; +} + +.borderColor-primary { + border-color: $pm-primary; +} + +.shadow-container { + 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: var(--bgcolor-main-area, $white); + color: var(--color-main-area, $pm-global-grey); +} + +$block-info-border-width: 3px !default; +[class*="block-info"] { + padding: 0.5em 1.2em; + color: var(--color-main-area, $pm-global-grey); + background-color: var(--bordercolor-input, $pm-global-light); + border-left-width: $block-info-border-width; + border-left-style: solid; +} +@if $rtl-option == true { + [dir="rtl"] { + [class*="block-info"] { + border-left-width: 0; + border-right-width: $block-info-border-width; + border-right-style: solid; + } + } +} +.block-info { + border-color: $pm-primary; +} +.block-info-error { + border-color: $pm-global-warning; +} +.block-info-warning { + border-color: $pm-global-attention; +} +.block-info-success { + border-color: $pm-global-success; +} + +[class*="block-info-standard"] { + padding: 0.2em 1.2em; + background-color: transparent; +} +.block-info-standard { + border-color: $pm-primary; +} +.block-info-standard-error { + border-color: $pm-global-warning; +} +.block-info-standard-warning { + border-color: $pm-global-attention; +} +.block-info-standard-success { + border-color: $pm-global-success; +} +// other colors might be added later + +[class*="block-info"].color-white { + color: $white; +} + +/** + * details/summary + */ +details { + border-bottom: 1px solid $pm-global-border; + border-radius: $global-border-radius; + + & > summary::-webkit-details-marker { + display: none; + } + &:first-child { + border-top: 1px solid $pm-global-border; + } + &[open] > summary { + background: url(#{$path-images}sprite-for-css-only.svg#css-caret-close) 0 + 50% no-repeat; + } +} +summary { + padding: 1em 0 1em 2rem; + background: url(#{$path-images}sprite-for-css-only.svg#css-caret) 0 50% + no-repeat; + list-style: none; + 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 new file mode 100644 index 0000000..184516f --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-conversations.scss @@ -0,0 +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: 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%; +} + +.items-column-list, +.items-column-list--mobile, +.view-column-detail { + height: 100%; +} + +.view-column-detail { + 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 { + @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 { + height: $item-container-height; +} +// fix for Firefox multi-selection issue +.item-checkbox-label > .item-checkbox { + width: 100%; + height: 100%; + z-index: 1; +} + +.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-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-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: 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); +} + +.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 { + + // 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); + } +} + +.item-sender--smaller, +.item-date { + font-size: em(12); +} + +.message-header-metas-container { + height: $conversation-icon-size; +} + +.starbutton { + 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; + 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; + @extend %appearing-container; +} + +.message-header { + 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-container--hasAttachment { + .message-content { + border-radius: 0; + } +} + +.message-content { + 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-item-column-list, $pm-global-light); + line-height: .75; +} + +.message-attachments { + 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; + } +} + +.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: $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; + max-width: calc(100% - #{$message-attachment-icon-width}); +} + +.message-attachmentSize { + font-size: 1.2rem; + opacity: .5; +} + +.message-infobox { + background: var(--bgcolor-main-area, $white); +} + +.container-to { + 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); + transition: bottom .5s easing(easeOutQuart); + + &--is-higher { + bottom: 4em; + } + + &--inBackground { + z-index: 0; + } +} + + +@import "_pm-reset-display-messages"; diff --git a/templates/@theme-base/pm-styles/_pm-cursors.scss b/templates/@theme-base/pm-styles/_pm-cursors.scss new file mode 100644 index 0000000..49fe0ed --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-cursors.scss @@ -0,0 +1,8 @@ +/* + * Cursors + */ +$list-cursors: default, help, wait, grab, row-resize, pointer !default; + +@each $cursor in $list-cursors { + .cursor-#{$cursor} { cursor: #{$cursor}; } +}
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-custom-scrollbar.scss b/templates/@theme-base/pm-styles/_pm-custom-scrollbar.scss new file mode 100644 index 0000000..9770856 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-custom-scrollbar.scss @@ -0,0 +1,54 @@ +$scrollbar-track-color: transparent !default; +$scrollbar-size : .6rem !default; +$scrollbar-margin : .2rem !default; + +@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 new file mode 100644 index 0000000..7e3dbbc --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-dark-theme.scss @@ -0,0 +1,215 @@ +/* dark-mode + * Come to the Dark Mode, we have wookies + */ + +@import "./pm-buttons-mixins"; + +// forms/buttons +.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; +} + +// 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; +} + +$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--redborder, +.pm-button.pm-button--redborder { + background-color: transparent; + &:focus, + &:hover, + &:not(div):active, + &:active { + color: $pm-global-warning; + } +} + +.pm-button--link, +a, .link, +.pm-button.pm-button--link { + &:focus, + &:hover, + &:not(div):active, + &:active { + color: currentColor; + } + &[disabled], + &.is-disabled { + color: rgba( $white, .5 ); + } +} + +.pm-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"] { + background-image: url("#{$path-images}sprite-for-css-only.svg#css-search-white"); + } +} +@if $rtl-option == true { + [dir="rtl"] { + [type="search"].pm-field { + background-image: url("#{$path-images}sprite-for-css-only.svg#css-search-rtl-white"); + } + } +} + +.pm-field[disabled] { + color: rgba( $white, .5); + opacity: .6; +} + + +select.pm-field { + background-image: url("#{$path-images}sprite-for-css-only.svg#css-caret-white"); +} +.pm-checkbox { + &:indeterminate + .pm-checkbox-fakecheck { + background-image: url("#{$path-images}sprite-for-css-only.svg#css-dash-white"); + } +} +.pm-toggle-checkbox { + &[aria-busy="true"] + .pm-toggle-label { + &::before { + background-image: url(#{$path-images}loading-atom-smaller-dark.svg); + } + } + &[disabled] + .pm-toggle-label { + background-color: transparent; + opacity: .6; + } +} + +.searchbox-field[type="search"] { + background-image: none; +} + +.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); +} + +button[aria-busy="true"] { + background-image: url(#{$path-images}loading-atom-smaller-disabled-dark.svg); +} + + + +tr[aria-busy="true"] td, +td[aria-busy="true"] { + &::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 { + background-image: url(#{$path-images}sprite-for-css-only.svg#css-caret-close-white); + } +} +summary { + background-image: url(#{$path-images}sprite-for-css-only.svg#css-caret-white); +} + + +.appConfigBody-darkmode, // for Angular +.isDarkMode { + .display-on-darkmode { + display: flex; + } + .hide-on-darkmode { + display: none; + } +} + + + +// quick and dirty +.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-context-bar: #{$pm-secondary-grey}; + --bgcolor-subheader: #{$bluish-grey}; + --bgcolor-toolbar: #{$pm-global-altgrey}; + --color-main-area: #{$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}; + --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 new file mode 100644 index 0000000..66a51ee --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-dropdown-logout.scss @@ -0,0 +1,56 @@ +.dropDown-logout-button { + 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-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; +} + +.dropDown-logout-initials { + 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; + } + } +} diff --git a/templates/@theme-base/pm-styles/_pm-dropdown.scss b/templates/@theme-base/pm-styles/_pm-dropdown.scss new file mode 100644 index 0000000..c864c1a --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-dropdown.scss @@ -0,0 +1,198 @@ +/* dropdown examples */ +$dropDown-width: 200px !default; +$dropDown-wide-width: 450px !default; +$dropDown-narrow-width: 8em !default; + +.dropDown { + @extend .relative; +} +.dropDown-content { + position: absolute; + z-index: 10; + left: calc(50% - #{$dropDown-width/2}); + top: 100%; + margin-top: 2rem; + display: block; + opacity: 1; + transition: visibility 0s ease, transform .15s ease, opacity .15s ease ; + transform-origin: top center; + transform: scale(1,1); + visibility: visible; + transition-delay: 0s; + width: $dropDown-width; + background: var(--bgcolor-main-area, $white); + border-radius: $global-border-radius; + box-shadow: 0 0 16px 3px $input-shadow-color; + color: var(--color-main-area, $pm-global-grey); +} + +.dropDown-content--narrow { + left: calc(50% - #{$dropDown-narrow-width/2}); + width: $dropDown-narrow-width; +} + +.dropDown-content--wide { + left: calc(50% - #{$dropDown-wide-width/2}); + width: $dropDown-wide-width; +} + +.dropDown-content--rightbottom { + left: 100%; + bottom: 0; + top: auto; + margin-left: 2em; + transform-origin: center left; +} + +@if $rtl-option == true { + [dir="rtl"] { + .dropDown-content--rightbottom { + left: auto; + right: 100%; + margin-right: 2em; + transform-origin: center right; + } + } +} + + +/* This is the hidden state */ +[hidden].dropDown-content { + display: block; + opacity: 0; + visibility: hidden; + transform: scale(1,0); + transition-delay: .15s, 0s, 0s; +} +[hidden].dropDown-content--rightbottom { + transform: scale(0,1); +} + +.dropDown-contentInner { + position: relative; + overflow: auto; + min-height: 4em; + max-height: 30vh; + padding: 0; // no padding for the drop shadow :-\ + 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; + +} +.dropDown-contentInner { + &::before, + &::after { + content: ''; + position: relative; + display: block; + z-index: 1; + background: var(--bgcolor-main-area, $white); + height: 10px; + } +} + +/* position of dropDown variations */ +.dropDown--leftArrow .dropDown-content { + left: 0; +} +.dropDown--rightArrow .dropDown-content { + left: auto; + right: 0; +} + +@if $rtl-option == true { + [dir="rtl"] { + .dropDown--leftArrow .dropDown-content { + right: 0; + left: auto; + } + .dropDown--rightArrow .dropDown-content { + left: 0; + right: auto; + } + } +} + +/* arrow on top of dropdown */ +.dropDown-content::before { + content: ''; + position: absolute; + top: -2rem; + left: calc(50% - 1rem); + width: 1rem; + height: 1rem; + border: 1rem solid transparent; + border-bottom: 1rem solid var(--bgcolor-main-area, $white); +} + +.dropDown--leftArrow .dropDown-content::before { + left: 1rem; +} +.dropDown--rightArrow .dropDown-content::before { + left: auto; + right: 1rem; +} + +.dropDown--leftBottomArrow .dropDown-content::before { + top: auto; + left: -2rem; + bottom: 1rem; + border: 1rem solid transparent; + border-right: 1rem solid var(--bgcolor-main-area, $white); +} + +@if $rtl-option == true { + [dir="rtl"] { + .dropDown-content::before { + right: calc(50% - 1rem); + left: auto; + } + + .dropDown--leftArrow .dropDown-content::before { + right: 1rem; + left: auto; + } + .dropDown--rightArrow .dropDown-content::before { + right: auto; + left: 1rem; + } + + .dropDown--leftBottomArrow .dropDown-content::before { + left: 100%; + right: auto; + border: 1rem solid transparent; + border-left: 1rem solid var(--bgcolor-main-area, $white); + } + } +} + +.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 { + border-top: 1px solid var(--bordercolor-input, $pm-global-border); +} + +/* pagination caret */ +.expand-caret { + fill: currentColor; +} +.dropDown [aria-expanded="true"] .expand-caret { + @extend .rotateX-180; +} 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 new file mode 100644 index 0000000..3d424fb --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-forms.scss @@ -0,0 +1,530 @@ +/* input design */ +.placeholder, +::placeholder { + color: var(--color-input, rgba($pm-global-grey, .65)); + font-style: normal; + opacity: .6; +} + +// fix "autofill state" +input:-webkit-autofill{ + box-shadow: 200px 200px 100px var(--bgcolor-input, $pm-input-background) inset; +} + +/* removes X in input when typing in IE/EDGE */ +input::-ms-clear { + width: 0; + height: 0; +} +/* removes native password revealer for IE/EDGE */ +input::-ms-reveal { + display: none; +} + +$field-container: 26rem !default; +.pm-field-container { + width: $field-container; + @extend .mw100; + @extend .inbl; + @extend .relative; + &.auto { + @extend .auto; + } +} + +.pm-field { + filter: none; // fixes Firefox autofill color + border: 1px solid var(--bordercolor-input, $input-defaut-border); + padding: em(6) em(16); // design want 34px height (actually 35 to avoid .5px) + background-color: var(--bgcolor-input, $pm-input-background); + 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 $input-shadow-color; + } + &[aria-invalid="true"]:not(:focus), + &[aria-invalid="true"]:not(.ng-pristine) { + border-color: $pm-global-warning; + box-shadow: none; + } + &.is-valid:not(:focus) { + border-color: $pm-global-success; + } + &[disabled] { + color: rgba( $pm-global-grey, .3 ); + } + &.w100 { + width: 100%; + } + &.wauto { + width: auto; + } + &:-moz-ui-invalid { // fixes some Firefox issues with HTML5 validation + box-shadow: none; + } + + &[type="search"] { + background: url("#{$path-images}sprite-for-css-only.svg#css-search") 6px 50% no-repeat; + background-size: 1.5rem; + padding-left: 2em; + &::-webkit-search-cancel-button { + display: none; + } + } + + &[type="number"] { + padding-right: .25em; + } +} +@if $rtl-option == true { + [dir="rtl"] { + [type="search"].pm-field { + padding-left: 0; + padding-right: 2em; + background: url("#{$path-images}sprite-for-css-only.svg#css-search-rtl") calc(100% - 6px) 50% no-repeat; + } + } +} + +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; + 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 */ +textarea[required].pm-field.field-pristine:invalid { + box-shadow: none; +} + +@if $rtl-option == true { + [dir="rtl"] { + select.pm-field { + background-position: 6px 50%; + padding-right: 1em; + padding-left: 20px; + } + } +} + +/* errors */ +.error-zone { + transition: transform .15s linear, max-height .15s linear; + transform: scaleY(1); + transform-origin: top center; + &:empty { + transform: scaleY(0); + } +} + +// general rule: if focus is on the field => don't display error yet +.pm-field-icon-container:focus-within + .error-zone, +.pm-field:focus + .error-zone { + transform: scaleY(0); + max-height: 0; +} + + + + +/* sizes/other modifiers */ +.pm-field--tiny { + padding: em(6); // useful for address group +} +.pm-field--small { + padding: em(2) em(16); // design want 26px height (actually 27 to avoid .5px) +} +.pm-field--large { + padding: em(10) em(16); // design want 42px height (actually 43 to avoid .5px) +} +.pm-field--highlight { + border-color: $pm-primary; + border-width: 2px; + background-color: rgba($pm-primary, .1); +} + +/* checkboxes */ +.pm-checkbox-fakecheck { + display: inline-flex; + border: 1px solid var(--bordercolor-input, $pm-global-border); + border-radius: 2px; + min-width: 1.6rem; + width: 1.6rem; + height: 1.6rem; + margin: auto .5rem auto 0; +} +.item-icon-compact .pm-checkbox-fakecheck { + margin: auto; + background: var(--bgcolor-input, $white); +} +.pm-checkbox-fakecheck-img { + margin: auto; + width: 1rem; + transform: scale(0); + transition: .15s transform linear; +} +.pm-checkbox { + @extend .sr-only; + &:checked + .pm-checkbox-fakecheck { + .pm-checkbox-fakecheck-img { + transform: scale(1); + } + } + &:focus + .pm-checkbox-fakecheck { + box-shadow: 0 0 10px 0 $input-shadow-color; + } + &[disabled] + .pm-checkbox-fakecheck, + &:indeterminate + .pm-checkbox-fakecheck { + background: var(--bgcolor-disabled-checkboxes-radios, $pm-global-muted); + } + &:indeterminate + .pm-checkbox-fakecheck { + content: ''; + width: 1.6rem; + height: 1.6rem; + background-image: url("#{$path-images}sprite-for-css-only.svg#css-dash"); + background-repeat: no-repeat; + } +} + +// exception for toolbar +.pm-select-all { + .pm-checkbox-fakecheck { + border: 1px solid #585C67; + background-color: var(--bgcolor-aside-link, #484E59); + } + .pm-checkbox-fakecheck-img { + fill: var(--fillcolor-icons, $white); + } +} + + +/* radios */ +.pm-radio-fakeradio { + @extend .pm-checkbox-fakecheck; + border-radius: 50%; +} +.pm-radio--onTop .pm-radio-fakeradio { + margin-top: .25em; +} + +.pm-radio-fakeradio::before { + content: ''; + margin: auto; + width: .8rem; + height: .8rem; + border-radius: 50%; + background: transparent; + transform: scale(0); + transition: .15s transform linear; +} + +.pm-radio { + @extend .sr-only; + &:checked + .pm-radio-fakeradio::before { + background: $pm-primary; + transform: scale(1); + } + &:focus + .pm-radio-fakeradio { + box-shadow: 0 0 10px 0 $input-shadow-color; + } + &[disabled] + .pm-radio-fakeradio { + background: var(--bgcolor-disabled-checkboxes-radios, $pm-global-muted); + } +} + + +/* toggle */ +$width: 5.5em !default; +.pm-toggle-label { + margin-top: .15em; + // height: 2em; + width: $width; + display: inline-flex; + border: 1px solid var(--bordercolor-input, $pm-global-border); + 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-context-bar, $pm-global-muted); + top: 2px; + left: 0; + bottom: 2px; + transform: translateX(2px); + border: 1px solid var(--bordercolor-input, $pm-global-border); + } + & > .pm-toggle-label-text { + align-self: center; + margin: 0; + text-align: center; + border-radius: 2rem; + padding: em(6) 0; + width: #{$width/2}; + position: relative; + z-index: 2; + display: inline-flex; + & .pm-toggle-label-img { + transition: fill .1s steps(1, end); + } + } +} +@if $rtl-option == true { + [dir="rtl"] { + .pm-toggle-label { + &::before { + left: auto; + right: 0; + transform: translateX(-2px); + } + } + } +} + +.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:first-child .pm-toggle-label-img { + fill: var(--bordercolor-input, $black); + } + & > .pm-toggle-label-text:last-child .pm-toggle-label-img { + fill: $white; + } + &::before { + background: $pm-primary; + transform: translateX( #{$width/2} ) translateX(-2px); + // transform: translateX( calc( 2.5rem - 2px) ); does NOT work in IE11 + 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 $input-shadow-color; + } + &[disabled] + .pm-toggle-label { + background: rgba($pm-global-muted, .6); + .pm-toggle-label-text { + opacity: .3; + } + } + &[aria-busy="true"] + .pm-toggle-label { + border-color: $pm-global-border; + &::before { + border-color: transparent; + transform: translateX( #{$width/4} ) translateX(-2px); + background: transparent url(#{$path-images}loading-atom-smaller.svg) 50% 50% no-repeat; + } + & > .pm-toggle-label-text { + opacity: 0; + } + } + +} +@if $rtl-option == true { + [dir="rtl"] { + .pm-toggle-checkbox { + &:checked + .pm-toggle-label { + &::before { + transform: translateX( -#{$width/2} ) translateX(2px); + } + } + &[aria-busy="true"] + .pm-toggle-label { + &::before { + //background-color: $pm-primary; + transform: translateX( -#{$width/4} ) translateX(2px); + } + } + } + } +} + + +.pm-toggle-label--small { + margin-top: .25em; + font-size: .8em; + & .pm-toggle-label-img { + width: 1.3rem; + height: 1.3rem; + } +} + + + +/* label */ +// $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: 2.4em !default; +.pm-form--iconLabels .pm-label { + width: $pm-label-icon-width; +} + +/* container address */ +.pm-field-container--address { + margin-top: -1.6em; +} + + +/* 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; + width: calc(100% - 1.5em); + } + &:focus-within { + > .pm-field { + background-color: transparent; + box-shadow: none; + outline: 0; + } + } +} +.pm-field-icon-container--invalid:not(:focus-within) { + border-color: $pm-global-warning; + > .pm-field { + border-color: $pm-global-warning; + } +} + +/* @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) { + .pm-modalContainer .pm-field-container--full { + width: $field-container; + } +} +@include respond-to(830) { + .pm-modalContainer .pm-field-container--full { + width: calc(100% - var(--label-width, #{$pm-label-width})); + } +} + +@include respond-to($breakpoint-small) { + .pm-modalContainer .pm-field-container--full { + width: 100%; + } +} +/* 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 new file mode 100644 index 0000000..169dc02 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-header-searchbar.scss @@ -0,0 +1,110 @@ +.searchbox-container { + width: $conversations-column-width; +} +.searchbox-container:empty { + width: 0; + + // if there is no search bar, the next element (navigation) is pushed to the right (VPN/settings/etc.) + + // & + .topnav-container { + + // & .topnav-list { + // justify-content: flex-end; + + // & > li:last-child { + // margin-left: 0; + // } + + // } + + // } +} +.searchbox-container input::placeholder { + color: var(--color-standard-text, rgba(255, 255, 255, .6) ); +} +.searchbox-field[type="search"] { + height: 4rem; + background-color: var(--bgcolor-searchbox-field, rgba($black, .3)); + background-image: none; + border-color: var(--main-bg-color, $black); + box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05); + background-size: 2rem; + padding-left: calc(2em + 2rem); + padding-right: 4rem; + color: var(--color-standard-text, $white); + border-width: 0; +} +.searchbox-search-button { + position: absolute; + left: 1em; + top: 0; + bottom: 0; + & > .searchbox-search-button-icon { + width: 2.2rem; + height: 2.2rem; + fill: var(--fillcolor-icons, $white); + } +} +.searchbox-advanced-search-button { + position: absolute; + 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); + } +} + +.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; + } +} + +@if $rtl-option == true { + [dir="rtl"] { + .searchbox-field[type="search"] { + padding-right: calc(2em + 2rem); + padding-left: 4rem; + background-image: none; + background-size: 2rem; + } + .searchbox-search-button-icon { + @extend .mirror; + } + .searchbox-search-button { + right: 1em; + left: auto; + } + .searchbox-advanced-search-button { + 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; + } + } + } +} diff --git a/templates/@theme-base/pm-styles/_pm-header-topnav.scss b/templates/@theme-base/pm-styles/_pm-header-topnav.scss new file mode 100644 index 0000000..64b60db --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-header-topnav.scss @@ -0,0 +1,143 @@ +.topnav-link { + 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; + } + } +} + +/* Decrease margins (was 1em) */ +@include respond-to(1500) { + .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; + } + } + } +} + +@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; + } +} + + +@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); + } +} + 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 new file mode 100644 index 0000000..5ded72d --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-layout.scss @@ -0,0 +1,23 @@ +/* for 1px-high hr */ +hr { + background-color: $color-hr; + border: 0; + color: $color-hr; + height: $hr-height; + margin: 0 0 1em; + padding: 0; +} + +/* 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; } + +kbd { + @extend .rounded; + background-color: var(--bgcolor-main-area, $pm-global-light); + border: 1px solid var(--bordercolor-input, $pm-global-border); +} diff --git a/templates/@theme-base/pm-styles/_pm-light-theme.scss b/templates/@theme-base/pm-styles/_pm-light-theme.scss new file mode 100644 index 0000000..b8bf232 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-light-theme.scss @@ -0,0 +1,16 @@ +@import "../reusable-components/design-system-config"; + +$main-bg-color: $pm-global-light; +$secondary-bg-color: $white; +$bgcolor-searchbox-field: $white; +$bgcolor-spacebar: rgba(0, 0, 0, 0.05); +$bgcolor-aside-link: #e3e4e7; +$bgcolor-toolbar: $pm-global-light; +$fillcolor-logo: $pm-blue; +$fillcolor-icons: $pm-global-grey; +$color-nav-link: $pm-global-grey; +$color-nav-active: $pm-blue-dark; +$color-standard-text: $pm-global-grey; +$boxshadow-main: 0 0 15px 0 rgba(0, 0, 0, 0.1); + +@import "./pm-theme-config";
\ 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 new file mode 100644 index 0000000..79d4682 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-loader-animation.scss @@ -0,0 +1,79 @@ +// 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; + } + } + } + } +} diff --git a/templates/@theme-base/pm-styles/_pm-loadingcontent.scss b/templates/@theme-base/pm-styles/_pm-loadingcontent.scss new file mode 100644 index 0000000..0cf480b --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-loadingcontent.scss @@ -0,0 +1,76 @@ +[aria-busy="true"] { + background-image: url(#{$path-images}loading-atom-smaller.svg); + background-position: 50% 50%; + background-repeat: no-repeat; +} + +button[aria-busy="true"] { + 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"] { + 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: 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; + } +} + +@keyframes backgroundLoading { + 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 new file mode 100644 index 0000000..b717caf --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-meterbar.scss @@ -0,0 +1,88 @@ +@mixin meterbar-size($size: 1.5rem) { + height: $size; + border-radius: #{$size/2}; + + &::-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}; + } + + &::-webkit-meter-suboptimum-value { + border-radius: #{$size/2}; + } + + &::-webkit-meter-even-less-good-value { + border-radius: #{$size/2}; + } +} + +.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 new file mode 100644 index 0000000..65368bd --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-mini-calendar.scss @@ -0,0 +1,177 @@ +$minicalendar-day-color: $black !default; +$minicalendar-day-color-on-dark-background: $white !default; +$minicalendar-fontsize: 1.2rem !default; +$minicalendar-cell-size: 2em !default; +$minicalendar-bg-color-range-selection: #51555F !default; + +.minicalendar { + font-size: $minicalendar-fontsize; +} + +.minicalendar-grid--displayWeekNumber { + display: grid; + grid-template-columns: 30px auto; + grid-template-rows: auto; +} + +.minicalendar-weekdays, +.minicalendar-weeknumbers, +.minicalendar-day--inactive-month { + opacity: .4; +} + +.minicalendar-weekdays { + display: grid; + grid-template-columns: repeat( var(--minicalendar-weekdays-numberOfDaysInWeek, 7), 1fr); + grid-template-rows: 1fr; +} +.minicalendar-days { + display: grid; + grid-template-columns: repeat( var(--minicalendar-days-numberOfDays, 7), 1fr); + grid-template-rows: repeat( var(----minicalendar-days-numberOfWeeks, 4), 1fr); + grid-gap: 1px 0px; +} + +.minicalendar-day { + color: var(--color-main-area, $minicalendar-day-color); +} +.minicalendar-days { + user-select: none; +} + +.minicalendar-weekdays { + border-bottom: 1px dotted $pm-global-border; +} + +.minicalendar-weeknumbers > span { + + &:first-of-type { + border-bottom: 1px dotted $pm-global-border; + } + &:not(:first-of-type) { + min-height: $minicalendar-cell-size; + } + +} +.minicalendar-weeknumbers-heading { + display: inline-block; + transform: scale(.7); +} + +.minicalendar-day { + position: relative; + min-width: #{$minicalendar-cell-size + 0.35em}; + min-height: #{$minicalendar-cell-size + 0.35em}; + border-radius: 50%; + &:focus, + &:hover { + background: rgba($minicalendar-bg-color-range-selection, .25); + } +} + +.minicalendar-grid--displayWeekNumber .minicalendar-day { + min-width: $minicalendar-cell-size; + min-height: $minicalendar-cell-size; +} + +.minicalendar-day[aria-current="date"]::before { + content: attr(data-current-day); + speak: none; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + font-weight: bold; + line-height: 2.3; // check modifier below when no week displayed + color: $white; + 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 { + line-height: 2; + } +} + +.minicalendar--onDarkBackground { + .minicalendar-day { + color: $minicalendar-day-color-on-dark-background; + &:focus, + &:hover { + background: rgba($minicalendar-bg-color-range-selection, .8); + } + } +} + +.minicalendar-day[aria-pressed=true] { + color: $white; + background: $calendar-selected-day-color; + border-radius: 50%; +} + +$minicalendar-day-marker-size: 3px !default; +.minicalendar-day--marker { + position: absolute; + bottom: 1px; + left: calc(50% - #{$minicalendar-day-marker-size/2}); + height: $minicalendar-day-marker-size; + width: $minicalendar-day-marker-size; + background-color: $pm-primary; + border-radius: 50%; + display: block; + margin-left: auto; + margin-right: auto; +} + +.minicalendar-day[aria-pressed=true], +.minicalendar-day[aria-pressed=date] { + .minicalendar-day--marker { + background-color: $white; + } +} + +.minicalendar-day--range { + width: 100%; +} + +.minicalendar-day--range-bound { + background: $pm-primary; +} + +.minicalendar-day--range[aria-pressed=true], +.minicalendar-day--range[aria-pressed=true]:hover, +.minicalendar-day--range[aria-pressed=true]:focus { + background: $minicalendar-bg-color-range-selection; + border-radius: 0; +} + +// ranges +.minicalendar { + .minicalendar-day--range-bound-begin, + .minicalendar-day--range-bound-begin:hover, + .minicalendar-day--range-bound-begin:focus { + border-top-left-radius: 40%; + border-bottom-left-radius: 40%; + } + .minicalendar-day--range-bound-end, + .minicalendar-day--range-bound-end:hover, + .minicalendar-day--range-bound-end:focus { + border-top-right-radius: 40%; + border-bottom-right-radius: 40%; + } + .minicalendar-day--range-bound-begin.minicalendar-day--range-bound-end { + border-radius: 50%; + } +} + diff --git a/templates/@theme-base/pm-styles/_pm-modal.scss b/templates/@theme-base/pm-styles/_pm-modal.scss new file mode 100644 index 0000000..5ea41aa --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-modal.scss @@ -0,0 +1,287 @@ +/* + * Modals + */ +/* overlay covers everything */ +$modal-width: 50% !default; +$modal-max-width: 70rem !default; + +$modal-breakpoint-width: 52em !default; +$modal-breakpoint-height: 22em !default; +$breakpoint-low-height-modal: em(500, 16) !default; + +$modal-max-height: 80% !default; + +$modal-wider-width: 70% !default; +$modal-wider-max-width: 100rem !default; + +$modal-full-dimension: 98% !default; +$modal-full-max-width: 150rem !default; + +$modal-smaller-width: 28em !default; + +.pm-modalOverlay { + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + background: rgba( 0, 0, 0, .4 ); + z-index: 666; + animation: pm-modalOverlayIn ease .5s 1 normal ; +} + +.pm-modalContainer { + position: fixed; + top: 0; left: 0; bottom: 0; right: 0; + display: flex; + justify-content: center; + flex-direction: column; + z-index: 666; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); +} + +.pm-modalContainer--inBackground { + z-index: 600; +} + +.pm-modalOverlayOut { + animation: pm-modalOverlayOut ease .5s 1 normal ; + animation-fill-mode: forwards; +} + + +@keyframes pm-modalOverlayIn { + 0% { + background: rgba( 0, 0, 0, 0 ); + } + 100% { + background: rgba( 0, 0, 0, .4 ); + } +} + +@keyframes pm-modalOverlayOut { + 0% { + background: rgba( 0, 0, 0, .4 ); + } + 100% { + background: rgba( 0, 0, 0, 0 ); + } +} + +.pm-modal { + position: relative; + width: $modal-max-width; + max-height: $modal-max-height; + max-width: $modal-max-width; + background: var(--bgcolor-main-area, $white); + color: var(--color-main-area, $pm-global-grey); + padding: 0; + overflow: hidden; + border-radius: $global-border-radius; + box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.3); + animation: pm-modalIn ease .15s 1 normal; + animation-fill-mode: both; + animation-delay: .1s; // stupid fix for Safari crazy display bug + margin: auto; + display: flex; + flex-direction: column; + cursor: default; +} + +@keyframes pm-modalIn { + 0% { + opacity: 0; + transform: scale(.8); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes pm-modalOut { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(.8); + } +} + +.pm-modalOut { + animation: pm-modalOut ease .15s 1 normal ; + animation-fill-mode: both; +} + +.pm-modal--auto { + width: auto; +} +.pm-modal--smaller { + width: $modal-smaller-width; +} +.pm-modal--wider { + width: $modal-wider-width; + max-width: $modal-wider-max-width; +} +.pm-modal--full { + width: $modal-full-dimension; + max-width: $modal-full-dimension; + height: $modal-full-dimension; + max-height: $modal-full-dimension; + margin: 1%; +} +.pm-modal--heightAuto { + height: auto; + max-height: $modal-full-dimension; + margin-top: 1%; + margin-bottom: 1%; +} + + + + +.pm-modalClose { + position: absolute; + right: .5rem; + top: .5rem; + @extend .flex; + overflow: hidden; + background: transparent; + border-radius: 1em; + border: 0; + font-size: 1em; + padding: 0; + line-height: 1; + cursor: pointer; + z-index: 1; +} + +// not defined, left this in case of +// .pm-modalClose:focus, +// .pm-modalClose:hover, +// .pm-modalClose:active { +// } +// .pm-modalClose:hover, +// .pm-modalClose:active { +// } +@if $rtl-option == true { + [dir="rtl"] { + .pm-modalClose { + left: .5rem; + right: auto; + } + } +} + +.pm-modalContent { + display: flex; + flex-direction: column; + flex: 1 1 auto; + overflow: auto; + position: relative; +} + +.pm-modalHeader { + padding: rem(30) rem(30) rem(15) rem(30); + flex: 0; +} +.pm-modalTitle { + font-size: 2.2rem; + line-height: 1.5; + margin-bottom: 0; +} +.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; + } +} + +.pm-modalContentInner { + position: relative; + overflow-x: hidden; + overflow-y: auto; + flex: 1 1 auto; + padding: 0 rem(30); + + background: var(--bgcolor-main-area, $white) no-repeat; + + > p:first-child { + margin-top: 0; + } + > p:last-child { + margin-bottom: 0; + } +} + +// adaptation for labels +$pm-label-shorter-width: 10em !default; +.pm-modal--shorterLabels .pm-label { + width: var(--label-shorter-width, $pm-label-shorter-width); +} + +@include respond-to($breakpoint-small) { + .pm-modal--shorterLabels .onmobile-flex-column .pm-label { + width: 100%; + } +} + + +// 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; +} +@if $rtl-option == true { + [dir="rtl"] { + .pm-modalFooter [class*="pm-button"]:only-child { + margin-right: auto; + margin-left: 0; + } + } +} + +@media (max-height: $breakpoint-low-height-modal) { + .pm-modal { + max-height: $modal-full-dimension; + } + .pm-modalFooter { + padding-bottom: 1rem; + min-height: 5.9rem; // only for Safari the ugly + } + .pm-modalHeader { + padding-top: 1rem; + padding-bottom: .5rem; + } +} + + +// small viewports +@media (max-width: $modal-breakpoint-width) { + .pm-modal { + margin: 1%; + min-width: 0; + width: 98%; + max-width: 98%; + max-height: 98%; + align-self: center; + } +} + +@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 new file mode 100644 index 0000000..d8e7e0a --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-navigation.scss @@ -0,0 +1,180 @@ +/* + * navigation + */ +$navigation-fillcolor-icons: #6D7178 !default; +$padding-left-link: 2rem !default; + +.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, + .navigation__link--groupHeader { + padding: .95rem $padding-left-link .95rem 1em; + } + } +} + +.navigation__icon { + color: var(--fillcolor-icons, $navigation-fillcolor-icons); +} + +.navigation__refresh { + display: none; +} + +.navigation__link:focus, +.navigation__link:hover { + background: $navigation-hover-bg-color; + color: var(--color-nav-link, $pm-global-light); + text-decoration: none; +} +[aria-current="page"].navigation__link { + background: $navigation-hover-bg-color; + color: var(--color-nav-active, $white); + font-weight: bold; + + &:hover .navigation__icon:not(.navigation__icon--expand), + .navigation__icon { + 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: $pm-primary; + color: $white; + font-size: 1.1rem; + 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 + } +} + + +/* 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 new file mode 100644 index 0000000..6215758 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-notifications.scss @@ -0,0 +1,99 @@ +/* + * Notifications + */ +.notifications-container { + position: fixed; + top: 1em; + left: 50%; + z-index: 777; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); +} + +[class*="notification-"] { + border-radius: $global-border-radius; + overflow: hidden; + display: block; +} +.notification { + &-alert { + background: $pm-global-warning; + color: $pm-global-light; + } + &-success { + background: $pm-global-success; + color: $pm-global-light; + } + &-warning { + background: $pm-global-attention; + color: $pm-global-grey; + } + &-info { + background: $pm-primary; + color: $white; + } +} + +.notificationIn { + animation-duration: 1s; + animation-fill-mode: forwards; + animation-timing-function: ease; + animation-name: notificationIn; +} + +.notificationOut { + animation-duration: 1s; + animation-fill-mode: forwards; + animation-timing-function: ease; + animation-name: notificationOut; +} + + +@keyframes notificationIn { + 0% { + opacity: 0; + -webkit-transform: translateY(-50px); + transform: translateY(-50px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes notificationOut { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + opacity: 0; + -webkit-transform: scale(0); + transform: scale(0); + max-height: 0; + padding: 0; + margin-bottom: 0; + } +} + + +@include respond-to($breakpoint-small) { + + .notifications-container { + text-align: center; + } +} + +@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-panels.scss b/templates/@theme-base/pm-styles/_pm-panels.scss new file mode 100644 index 0000000..4016245 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-panels.scss @@ -0,0 +1,54 @@ +/* + * Information panels + */ +.information-panel-image { + position: absolute; + width: 48px; + height: 36px; + top: 19px; + left: -12px; + border: 1px solid var(--bordercolor-input, $pm-global-border); + border-radius: $global-border-radius; + border-bottom-left-radius: 0; + background-color: var(--bgcolor-main-area, $pm-global-light); + + &::before { + content: ''; + position: absolute; + display: inline-block; + width: 12px; + height: 10px; + top: calc(100% + 1px); + left: -1px; + border: 6px solid transparent; + border-top: 6px solid var(--bordercolor-input, $pm-global-border); + border-right: 6px solid var(--bordercolor-input, $pm-global-border); + } +} + +.information-panel-content { + margin: 1.6rem 2.3rem 1.6rem 5.1rem; +} + +.information-panel-icon { + fill: var(--fillcolor-icons, $black); +} + +@if $rtl-option == true { + [dir="rtl"] { + .information-panel-image { + left: auto; + right: -12px; + &::before { + left: auto; + right: -1px; + border: 6px solid transparent; + border-top: 6px solid var(--bordercolor-input, $pm-global-border); + border-left: 6px solid var(--bordercolor-input, $pm-global-border); + } + } + .information-panel-content { + margin: 1.6rem 5.1rem 1.6rem 2.3rem; + } + } +}
\ 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-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 new file mode 100644 index 0000000..e5baac2 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-sticky-header.scss @@ -0,0 +1,62 @@ +/* + * sticky header and container for sections + */ + +$sticky-title-height: 10rem !default; +.sticky-title { + position: -webkit-sticky; + position: sticky; + top: 0; + box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1); + padding: .5em .75em; + background: inherit; + z-index: 11; +} +.sticky-title--onTop { + box-shadow: none; +} +.sticky-title--noPadding { + padding: 0; +} + +.container-section-sticky { + padding: 3em 2em 0 2em; + 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: 8rem; +} + + +/* trick for fixing anchor links */ +.header-height-anchor { + position: absolute; + top: -#{$sticky-title-height}; +} + +// not sticky on mobile +@include respond-to($breakpoint-small) { + .sticky-title:not(.onmobile-remain-sticky) { + position: static; + box-shadow: none; + } + .container-section-sticky-section { + margin-bottom: 8rem; + } + .header-height-anchor { + position: static; + top: 0; + } +} + diff --git a/templates/@theme-base/pm-styles/_pm-table-plans.scss b/templates/@theme-base/pm-styles/_pm-table-plans.scss new file mode 100644 index 0000000..55096ce --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-table-plans.scss @@ -0,0 +1,145 @@ +/* + * Plans tables + */ + .pm-plans-table { + @extend .noborder; + @extend .w100; + border-collapse: separate; + border-spacing: 0; + @extend .min-w35e; +} + +.pm-plans-table { + caption { + transform: scale(0); + } + td, + th { + padding: em(16); + border: 1px solid $pm-global-border; + border-bottom: 0; + border-right: 0; + } + th.is-empty { + border: 0; + } + th:not(.pm-simple-table-row-th) { + @extend .uppercase; + } + tr td:last-child, + tr th:last-child { + border-right: 1px solid $pm-global-border; + } + thead { + tr:first-of-type { + & :nth-child(2) { + border-top-left-radius: $global-border-radius; + } + & :last-child { + border-top-right-radius: $global-border-radius; + } + } + } + tbody { + tr:last-of-type { + td, + th { + border-bottom: 1px solid $pm-global-border; + } + & :first-child { + border-bottom-left-radius: $global-border-radius; + } + & :last-child { + border-bottom-right-radius: $global-border-radius; + } + } + } + tbody tr { + .pm-simple-table-row-th { + padding-left: 2em; + } + &:first-of-type .pm-simple-table-row-th { + border-top-left-radius: $global-border-radius; + } + } + + +} + + +@include respond-to(1100) { + + .pm-plans-table { + tbody tr { + .pm-simple-table-row-th { + padding: em(10); + } + } + + } + +} + +@include respond-to($breakpoint-medium) { + + .pm-plans-table { + td, + th { + padding: em(10); + } + + } + +} + + + +/* modifiers for highlighting a plan */ +/* ADR : + - getting type or unit from attr is not supported by any browser => https://developer.mozilla.org/en-US/docs/Web/CSS/attr + - CSS custom properties can't be used in selectors => https://css-irl.info/practical-tips-css-variables/ + - content attribute can't be herited https://stackoverflow.com/questions/7175113/content-attribute-to-inherit-node-value + */ + +$border-width: 2px !default; +$nb-plans-max: 4 !default; + +@for $i from 1 through $nb-plans-max { + + .pm-table--highlight[data-plan-number="#{$i}"] { + & tr td:nth-child(#{$i+1}), + & tr th:nth-child(#{$i+1}) { + border-left: #{$border-width} solid $pm-primary; + border-right: #{$border-width} solid $pm-primary; + } + & tr:last-child td:nth-child(#{$i+1}) { + border-bottom: #{$border-width} solid $pm-primary; + } + & tr th:nth-child(#{$i+1}) { + border-top: #{$border-width} solid $pm-primary; + position: relative; + color: $pm-primary; + &:before { + content: attr(data-highlight); + display: block; + position: absolute; + bottom: 100%; + left: -#{$border-width}; + right: -#{$border-width}; + background-color: $pm-primary; + color: $white; + text-align: center; + font-weight: bold; + text-transform: uppercase; + font-size: 1.2rem; + padding: .25em; + border-radius: $global-border-radius $global-border-radius 0 0; + } + } + & tr td:nth-child(#{$i+2}), + & tr th:nth-child(#{$i+2}) { + border-left: 0; + } + } + +}
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-table.scss b/templates/@theme-base/pm-styles/_pm-table.scss new file mode 100644 index 0000000..867cf26 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-table.scss @@ -0,0 +1,119 @@ +/* + * tables + */ +.pm-simple-table { + @extend .border-collapse; + @extend .noborder; + @extend .w100; + + caption { + transform: scale(0); + } + + td, + th { + padding: em(9); + border-bottom: 1px solid var(--bordercolor-input, $pm-global-border); + } + + 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); + } + } + } + + 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; + } +} + + +/* + * 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 new file mode 100644 index 0000000..b726541 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-tabs.scss @@ -0,0 +1,63 @@ +.tabs-list { + margin: 0; + padding: 0; + @extend .unstyled; + @extend .flex; + @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: 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 { + @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; + } +} + +[aria-selected="true"].tabs-list-link { + border-bottom: 2px solid $pm-primary; + color: var(--color-main-area, $pm-global-grey); +} + +.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-theme-config.scss b/templates/@theme-base/pm-styles/_pm-theme-config.scss new file mode 100644 index 0000000..3e82024 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-theme-config.scss @@ -0,0 +1,14 @@ +:root { + --main-bg-color: #{$main-bg-color}; + --secondary-bg-color: #{$secondary-bg-color}; + --bgcolor-searchbox-field: #{$bgcolor-searchbox-field}; + --bgcolor-spacebar: #{$bgcolor-spacebar}; + --bgcolor-aside-link: #{$bgcolor-aside-link}; + --bgcolor-toolbar: #{$bgcolor-toolbar}; + --fillcolor-logo: #{$fillcolor-logo}; + --fillcolor-icons: #{$fillcolor-icons}; + --color-nav-link: #{$color-nav-link}; + --color-nav-active: #{$color-nav-active}; + --color-standard-text: #{$color-standard-text}; + --boxshadow-main: #{$boxshadow-main}; +}
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-toolbar.scss b/templates/@theme-base/pm-styles/_pm-toolbar.scss new file mode 100644 index 0000000..d9e4fa8 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-toolbar.scss @@ -0,0 +1,127 @@ +/* + * 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); + 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 + // resets to avoid pm-button styles + padding: unset; + background: unset; + border: unset; + border-radius: unset; + + padding-left: var(--padding-toolbar-button); + padding-right: var(--padding-toolbar-button); + display: flex; // alignment fix on Chrome + + &:hover { + box-shadow: unset; + background-color: var(--bgcolor-spacebar, #505560); + } + &[disabled] { + background: unset; + opacity: .4; + } + &:active, + &.is-active, + &:not(div):active, + [aria-expanded="true"] { + background: unset; + background-color: var(--bgcolor-spacebar, #2F333E); + } +} +.toolbar-button--dropdown { + padding-left: var(--padding-toolbar-button-dropdown); + padding-right: var(--padding-toolbar-button-dropdown); +} +.toolbar-icon, +.expand-caret.toolbar-icon { + fill: var(--fillcolor-icons, $white); +} +.toolbar-separator { + width: 2px; + background-image: linear-gradient(90deg, var(--bgcolor-spacebar, #4F5460) 0, var(--bgcolor-spacebar, #4F5460) 1px, var(--bgcolor-spacebar, #353A46) 1px); +} +.toolbar button[aria-disabled="true"], +.toolbar .toolbar-button[aria-disabled="true"] { + opacity: .5; + pointer-events: none; +} + +.toolbar-select { + padding-left: em(16, $base-font); + padding-right: em(16, $base-font); + color: var(--fillcolor-icons, $white); + background: url("#{$path-images}sprite-for-css-only.svg#css-caret-white") calc(100% - 6px) 50% no-repeat; +} +.toolbar-select option { + color: $black; // for Chrome bug +} +.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; + } +} diff --git a/templates/@theme-base/pm-styles/_pm-tooltips.scss b/templates/@theme-base/pm-styles/_pm-tooltips.scss new file mode 100644 index 0000000..b5443e5 --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-tooltips.scss @@ -0,0 +1,84 @@ +/* + * tooltips + */ + $tooltip-width: 14em; + $arrow-width: .5em; + + [class*="tooltip-"][aria-hidden="true"]:not(.tooltip-container) { + display: none; + } + + /* position relative for containers */ + .tooltip-container { + @extend .relative; + @extend .inbl; + } + + /* tooltip styles */ + /* factorisation */ + [class*="tooltip-"]:not(.tooltip-container) { + position: absolute; + z-index: 666; + width: $tooltip-width; + border-radius: $global-border-radius; + background: $pm-global-grey; + color: $pm-global-light; + padding: .5em; + text-align: center; + } + .tooltip-top { + bottom: calc(100% + #{$arrow-width} + 10px ); // 100% from bottom + arrow width + small margin + left: calc(50% - #{$tooltip-width/2} ); + } + .tooltip-right { + left: calc(100% + #{$arrow-width} + 10px ); + top: 0; + } + .tooltip-bottom { + top: calc(100% + #{$arrow-width} + 10px ); // 100% from bottom + arrow width + small margin + left: calc(50% - #{$tooltip-width/2} ); + } + .tooltip-left { + right: calc(100% + #{$arrow-width} + 10px ); + top: 0; + } + + /* used pseudo-element to make arrows */ + /* factorisation */ + [class*="tooltip-"]:not(.tooltip-container)::before { + content: ''; + speak: none; + position: absolute; + z-index: 666; + width: $arrow-width; + height: $arrow-width; + pointer-events: none; + } + + .tooltip-top::before { + top: 100%; + left: calc(50% - #{$arrow-width} ); + border: $arrow-width solid transparent; + border-top: $arrow-width solid $pm-global-grey; + } + .tooltip-right::before { + top: calc(50% - #{$arrow-width} ); + left: -#{$arrow-width*2}; + border: $arrow-width solid transparent; + border-right: $arrow-width solid $pm-global-grey; + } + .tooltip-bottom::before { + bottom: 100%; + left: calc(50% - #{$arrow-width} ); + border: $arrow-width solid transparent; + border-bottom: $arrow-width solid $pm-global-grey; + } + .tooltip-left::before { + top: calc(50% - #{$arrow-width} ); + right: -#{$arrow-width*2}; + border: $arrow-width solid transparent; + border-left: $arrow-width solid $pm-global-grey; + } + + + /* responsive ? */
\ No newline at end of file diff --git a/templates/@theme-base/pm-styles/_pm-treeview.scss b/templates/@theme-base/pm-styles/_pm-treeview.scss new file mode 100644 index 0000000..aef046d --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-treeview.scss @@ -0,0 +1,108 @@ +/* + Tree view (subfolders, etc.) + */ + +$treeview-border-width: 1px !default; +$treeview-indentation-margin: 3rem !default; + + +.treeview-item { + + border-bottom : $treeview-border-width solid var(--bordercolor-input, $pm-global-border); + margin-bottom: -$treeview-border-width; + + $arrow-width: .9rem !default; + $arrow-height: .7rem !default; + $circle-size: .8rem !default; + + &--moveInside, + &--moveTop, + &--moveBottom { + &::before { + content: ''; + position: absolute; + } + } + &--moveInside { + &::before { + left: -$arrow-width; + height: 0; + width: 0; + border: $arrow-height solid transparent; + border-left-color: $pm-primary; + border-left-width: $arrow-width; + } + } + &--moveTop, + &--moveBottom { + &::before { + left: -#{$circle-size/2}; + height: $circle-size; + width: $circle-size; + border-radius: 50%; + background: $pm-primary; + } + } + &--moveInside#{&}--selfGrabbed { // no primary color on the self grabbed element + &::before { + border-left-color: $pm-global-muted; + } + } + &--moveTop::before { + top: -#{$circle-size/2}; + } + &--moveBottom::before { + bottom: -#{$circle-size/2}; + } + + &--moveTop::after, + &--moveBottom::after { + content: ''; + position: absolute; + left: 0; + right: 0; + height: 1px; + background: $pm-primary; + } + &--moveTop::after { + top: 0; + } + &--moveBottom::after { + bottom: -1px; + } + &--moveInside { + background-color: var(--bgcolor-highlight, $pm-global-light); + } + + .treeview-item .treeview-item { + padding-left: $treeview-indentation-margin; + &.treeview-item--moveInside { + background: linear-gradient(to right, transparent 0, transparent #{$treeview-indentation-margin}, var(--bgcolor-highlight, $pm-global-light) #{$treeview-indentation-margin}); + &::before { + left: calc(-#{$arrow-width} + #{$treeview-indentation-margin}); + } + } + &.treeview-item--moveTop, + &.treeview-item--moveBottom { + &::before { + left: calc(-#{$circle-size/2} + #{$treeview-indentation-margin}); + } + } + &--moveTop::after, + &--moveBottom::after { + left: #{$treeview-indentation-margin}; + } + } + +} + + + + + +@include respond-to($breakpoint-medium) { + .treeview-toggle, + .treeview-actions { + width: em(100); + } +} diff --git a/templates/@theme-base/pm-styles/_pm-wizard.scss b/templates/@theme-base/pm-styles/_pm-wizard.scss new file mode 100644 index 0000000..85204dc --- /dev/null +++ b/templates/@theme-base/pm-styles/_pm-wizard.scss @@ -0,0 +1,102 @@ +/* + * wizard + */ + +$height-wizard: 6px !default; +$size-current-pin: 16px !default; + +.wizard-container { + position: relative; + padding-top: 1.5em; + padding-left: 2px; // "optical" alignment, difficult to align text and circle ^^ +} + +.wizard-container--noTextDisplayed { + padding-top: 0; +} + +.wizard { + height: $height-wizard; + display: flex; +} + +.wizard-marker { + display: flex; + width: $size-current-pin; + height: $size-current-pin; + border-radius: 50%; + position: relative; + top: -#{$height-wizard - 1}; + background-image: radial-gradient(circle, $pm-primary 0, $pm-primary #{$height-wizard/2}, transparent #{$height-wizard/2}); +} + +.wizard-item { + + background: var(--bordercolor-input, $pm-global-border); + + &:not(:last-child) { + @extend .flex-item-fluid; + } + + // positionned first element always with a aria-current/is-complete + &:first-child { + background: none; + background-image: linear-gradient(to left, var(--bordercolor-input, $pm-global-border) 0, var(--bordercolor-input, $pm-global-border) calc(100% - #{$height-wizard/2}), transparent calc(100% - #{$height-wizard/2}) ); + } + &:last-child { + background: none; + background-image: linear-gradient(to right, var(--bordercolor-input, $pm-global-border) 0, var(--bordercolor-input, $pm-global-border) 50%, transparent 50%); + &.is-complete::after { + content: none; + } + } + + &[aria-current="step"], + &.is-complete { + &::before { + content: ''; + position: relative; + display: block; + border-radius: 50%; + z-index: 1; + top: -#{$height-wizard - 1}; + left: -1px; + width: $size-current-pin; + height: $size-current-pin; + } + + .wizard-marker { + display: none; + } + } + &[aria-current="step"]::before { + background-image: radial-gradient(circle, $white 0, $white #{$height-wizard/2}, $pm-primary #{$height-wizard/2}); + } + &.is-complete::before { + background: $pm-primary url("#{$path-images}sprite-for-css-only.svg#css-on") 50% 50% no-repeat; + background-size: #{$size-current-pin - $height-wizard}; + } + &.is-complete::after { + content: ''; + position: relative; + display: block; + width: 100%; + height: $height-wizard; + top: -$size-current-pin; + background-color: $pm-primary; + } + &[aria-current="step"] .wizard-item-inner { + position: absolute; + top: 0; + left: 0; + font-size: 2rem; + font-weight: bold; + } + &:not([aria-current]) .wizard-item-inner { + @extend .invisible; + } +} + +.wizard-container--noTextDisplayed .wizard-item[aria-current="step"] .wizard-item-inner { + @extend .invisible; +}
\ No newline at end of file diff --git a/templates/@theme-base/reusable-components/_design-system-colors.scss b/templates/@theme-base/reusable-components/_design-system-colors.scss new file mode 100644 index 0000000..650d1aa --- /dev/null +++ b/templates/@theme-base/reusable-components/_design-system-colors.scss @@ -0,0 +1,339 @@ +/* PM and VPN colors */ +.bg-global-grey { + background-color: $pm-global-grey; +} +.bg-global-altgrey { + background-color: $pm-global-altgrey; +} +.bg-global-altgrey-gradient { + background-image: linear-gradient(to bottom, $pm-global-grey, $pm-global-altgrey); +} +.bg-global-light { + background-color: $pm-global-light; +} +.bg-global-border { + background-color: var(--bordercolor-input, $pm-global-border); +} +.bg-global-muted { + background-color: $pm-global-muted; +} +.bg-global-muted-dm { + background-color: var(--bgcolor-muted, $pm-global-muted); +} +.bg-global-success { + background-color: $pm-global-success; +} +.bg-global-warning { + background-color: $pm-global-warning; +} +.bg-global-attention { + background-color: $pm-global-attention; +} +.bg-global-info { + background-color: $pm-global-info; +} +.bg-pm-blue { + background-color: $pm-blue; +} +.bg-pm-blue-dark { + background-color: $pm-blue-dark; +} +.bg-pm-blue-light { + background-color: $pm-blue-light; +} +.bg-pm-blue-gradient { + background-image: $pm-blue-gradient; +} + +.bg-global-highlight { + background-color: var(--bgcolor-highlight, $pm-global-light); +} + + +.bg-pv-green { + background-color: $pv-green; +} +.bg-pv-green-dark { + background-color: $pv-green-dark; +} +.bg-pv-green-light { + background-color: $pv-green-light; +} + +.bg-white { + background-color: $white; +} +.bg-black { + background-color: $black; +} + +.bg-white-dm { + background-color: var(--bgcolor-main-area, $white); +} + +.bg-visionary { + background-color: $visionary; +} +.bg-plus { + background-color: $plus; +} +.bg-professional { + background-color: $professional; +} +.bg-vpnbasic { + background-color: $vpnbasic; +} +.bg-vpnplus { + background-color: $vpnplus; +} +.bg-primary { + background-color: $pm-primary; +} +.bg-inherit { + background: inherit; +} +.bg-currentColor { + background: currentColor; +} + +.fill-global-grey { + fill: $pm-global-grey; +} +.fill-global-altgrey { + fill: $pm-global-altgrey; +} +.fill-global-light { + fill: $pm-global-light; +} +.fill-global-highlight { + fill: var(--bgcolor-highlight, $pm-global-light); +} +.fill-global-border { + fill: $pm-global-border; +} +.fill-global-muted { + fill: $pm-global-muted; +} +.fill-global-success { + fill: $pm-global-success; +} +.fill-global-warning { + fill: $pm-global-warning; +} +.fill-global-attention { + fill: $pm-global-attention; +} +.fill-pm-blue { + fill: $pm-blue; +} +.fill-pm-blue-dark { + fill: $pm-blue-dark; +} +.fill-pm-blue-light { + fill: $pm-blue-light; +} + +.fill-pv-green { + fill: $pv-green; +} +.fill-pv-green-dark { + fill: $pv-green-dark; +} +.fill-pv-green-light { + fill: $pv-green-light; +} + +.fill-white { + fill: $white; +} +.fill-white-dm { + fill: var(--bgcolor-main-area, $white); +} +.fill-black { + fill: $black; +} +.fill-currentColor { + fill: currentColor; +} +.fill-primary { + fill: $pm-primary; +} + +.fill-visionary { + fill: $visionary; +} +.fill-plus { + fill: $plus; +} +.fill-professional { + fill: $professional; +} +.fill-vpnbasic { + fill: $vpnbasic; +} +.fill-vpnplus { + fill: $vpnplus; +} +.fill-beta.fill-beta { // specificity because bold class is applied and after + fill: $pm-primary-dark; + font-weight: normal; + font-style: italic; +} + +.stroke-global-grey { + stroke: $pm-global-grey; +} +.stroke-global-altgrey { + stroke: $pm-global-altgrey; +} +.stroke-global-light { + stroke: $pm-global-light; +} +.stroke-global-border { + stroke: $pm-global-border; +} +.stroke-global-muted { + stroke: $pm-global-muted; +} +.stroke-global-success { + stroke: $pm-global-success; +} +.stroke-global-warning { + stroke: $pm-global-warning; +} +.stroke-global-attention { + stroke: $pm-global-attention; +} +.stroke-pm-blue { + stroke: $pm-blue; +} +.stroke-pm-blue-dark { + stroke: $pm-blue-dark; +} +.stroke-pm-blue-light { + stroke: $pm-blue-light; +} + +.stroke-pv-green { + stroke: $pv-green; +} +.stroke-pv-green-dark { + stroke: $pv-green-dark; +} +.stroke-pv-green-light { + stroke: $pv-green-light; +} + +.stroke-white { + stroke: $white; +} +.stroke-black { + stroke: $black; +} +.stroke-currentColor { + stroke: currentColor; +} +.stroke-primary { + stroke: $pm-primary; +} + + +.stroke-visionary { + stroke: $visionary; +} +.stroke-plus { + stroke: $plus; +} +.stroke-professional { + stroke: $professional; +} +.stroke-vpnbasic { + stroke: $vpnbasic; +} +.stroke-vpnplus { + stroke: $vpnplus; +} + + + +.color-global-grey { + color: $pm-global-grey; +} +.color-global-grey-dm { + color: var(--color-main-area, $pm-global-grey); +} +.color-global-altgrey { + color: $pm-global-altgrey; +} +.color-global-light { + color: $pm-global-light; +} +.color-global-border { + color: $pm-global-border; +} +.color-global-muted { + color: $pm-global-muted; +} +.color-global-success { + color: $pm-global-success; +} +.color-global-warning { + color: $pm-global-warning; +} +.color-global-attention { + color: $pm-global-attention; +} +.color-global-info { + color: $pm-global-info; +} +.color-pm-blue { + color: $pm-blue; +} +.color-pm-blue-dark { + color: $pm-blue-dark; +} +.color-pm-blue-light { + color: $pm-blue-light; +} +.color-subheader { + color: var(--bgcolor-subheader, $text-sub-header); +} + +.color-pv-green { + color: $pv-green; +} +.color-pv-green-dark { + color: $pv-green-dark; +} +.color-pv-green-light { + color: $pv-green-light; +} + +.color-white { + color: $white; +} +.color-black { + color: $black; +} +.color-currentColor { + color: currentColor; +} +.color-primary { + color: $pm-primary; +} + +.color-visionary { + color: $visionary; +} +.color-plus { + color: $plus; +} +.color-professional { + color: $professional; +} +.color-vpnbasic { + color: $vpnbasic; +} +.color-vpnplus { + color: $vpnplus; +} diff --git a/templates/@theme-base/reusable-components/_design-system-config.scss b/templates/@theme-base/reusable-components/_design-system-config.scss new file mode 100644 index 0000000..98473cd --- /dev/null +++ b/templates/@theme-base/reusable-components/_design-system-config.scss @@ -0,0 +1,481 @@ +// Sass variables: adapt them to your designs globally + +// base size for text +$base-font : 14 !default; // if "14" then 1em = 14px +// default line-height +$l-h : 1.5 !default; + +$size-h1 : 36 !default; +$size-h2 : 28 !default; +$size-h3 : 20 !default; +$size-h4 : 18 !default; +$size-h5 : 17 !default; +$size-h6 : 16 !default; + +// Use typo helpers on demand +$use-other-typo-helpers : true !default; +$use-other-line-height-helpers: true !default; + +$size-smallest : 9 !default; +$size-smaller : 10 !default; +$size-small : 12 !default; +$size-big : 16 !default; +$size-bigger : 18 !default; +$size-biggest : 20 !default; + +// fonts +$font-family : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !default; +$font-family-monospace : SFMono-Regular,Consolas,"Liberation Mono","Menlo",monospace,monospace !default; +// explanation for double monospace http://code.iamkate.com/html-and-css/fixing-browsers-broken-monospace-font-handling/ + +// project colors +$pm-global-grey : #262a33 !default; +$pm-global-altgrey : #3c414e !default; +$bluish-grey : #9799a6 !default; +$pm-global-light : #f6f7fa !default; +$pm-global-border : #dde6ec !default; +$pm-global-muted : #eeeff3 !default; +$pm-global-info : #008cff !default; +$pm-global-success : #5db039 !default; +$pm-global-warning : #ec5858 !default; +$pm-global-attention : #eac819 !default; +$pm-blue : #657ee4 !default; +$pm-blue-dark : #526ee0 !default; +$pm-blue-light : #788ee8 !default; +$pm-blue-gradient : linear-gradient(130deg, #657ee4 -7%, #7351d1 64%, #7350d1 127%); + +$white : #fff !default; +$black : #000 !default; + +$pv-green : #4da358 !default; +$pv-green-dark : #3e8447 !default; +$pv-green-light : #5fb364 !default; + +// plans +$visionary : #6ddcfb !default; +$plus : #c6e422 !default; +$professional : #d4b46e !default; +$vpnbasic : #f67f60 !default; +$vpnplus : #9ccc23 !default; + +// primary +$pm-primary : $pm-blue !default; +$pm-primary-light : $pm-blue-light !default; +$pm-primary-dark : $pm-blue-dark !default; + +// not approved colors +$pm-input-background : #fcfdff !default; +$plan-logo-color : #8ed60f !default; +$conversation-selected-bg: rgba($pm-blue, .5) !default; +$input-shadow-color : rgba(0, 0, 0, 0.16) !default; +$autocomplete-bg-color-hover : #f4f4f4 !default; +$text-sub-header : #767676 !default; + +// needed for darkmode +$pm-secondary-grey : #2e323d !default; +$pm-tertiary-grey : #505560 !default; // border input + +// needed globally +$calendar-selected-day-color: $pm-blue-light !default; +$calendar-today-color: $pm-primary-dark !default; + +$navigation-hover-bg-color: rgba(white, .05) !default; + +// colors +$color-links : $pm-primary !default; +$color-hover : $black !default; +$color-hr : $pm-global-border !default; +$hr-height : 1px !default; +$color-alert : $pm-global-warning !default; +$color-bg-button : $white !default; +$color-txt-button : $black !default; + +$global-border-radius : 3px !default; + +// inputs +$input-defaut-border : $pm-global-border !default; + +// main breakpoints +$breakpoint-large : 1500 !default; +$breakpoint-medium-landscape : 1100 !default; +$breakpoint-medium : 910 !default; +$breakpoint-small : 680 !default; +$breakpoint-tiny : 450 !default; + +// RTL +$rtl-option : false !default; +// RTL = Right To Left => +// to adapt a website in a language that is written from right to left +// designed for multilingual websites with LTR et RTL + +// Custom scrollbar everywhere +$custom-scroll : true !default; + + +// hyphens +$hyphenation : false !default; + +// clear floats +$use-clearleft_right : false !default; +$use-clearhidden : false !default; +$use-clearfix : false !default; + +// color reset for mark tag +$use-color-reset-mark : true !default; +$default-bgColor-mark : #ff0 !default; + + +// vertical rhythm +// possible values : 'double_top_single_bottom', 'single_top_single_bottom', 'single_top', 'single_bottom' +$vertical-rhythm : 'single_bottom' !default; + +// units for typo +// possible values : 'use_em', 'use_rem', 'use_rem_with_em_fallback' +$typo-unit : 'use_rem' !default; + +// applies 62.5% on html (to make 10px default font size), simplifies rem calculation +$root-equiv-10-px : true !default; + +// basic premise: default user setting for font size is at 16 pixels in the browser +// you should NEVER update this value, however… who can predict the future… +$root-default-font-size: 16 !default; + +// applies main colors on body tag +$apply-body-styles : true !default; + +// others +$use-reset-button : true !default; +$use-ie-calc-font-fallback: false !default; +$use-old-ie-fallbacks : true !default; +$use-height-auto-img : true !default; +$use-height-auto-td : true !default; +$use-height-auto-table : true !default; + +// default config for webpack, can be overriden by "global config" in styles-pm.scss +$path-images : '../../assets/img/shared/' !default; + + +// variables for global layouts, allowing you to use calc for components and adapt quickly if needed +$header-height : 8rem !default; +$width-sidebar : 24rem !default; // main navigation +$toolbar-height : 5rem !default; +$context-bar-width : 25vw !default; // context bar on the right +$context-bar-min-width : 30rem !default; +$context-bar-max-width : 40rem !default; + +$default-height-fields : 3.5rem !default; + +$conversations-column-width: 35% !default; // used also to align search bar on top + +$pm-label-width: 18em !default; + + +// Sass functions: don’t touch if you are not sure ;) + +@function em($px, $base: $base-font) { + + @return ($px / $base) * 1em; + +} + +@function rem($px, $reset-applied: $root-equiv-10-px, $user-default-font-size: $root-default-font-size) { + + @if ( $reset-applied == true ) { + @return ($px / 10) * 1rem; + } + @else { + @return ($px / $user-default-font-size) * 1rem; + } + +} + + +// calculated via https://rocssti.net/en/builder-css +// based on http://soqr.fr/vertical-rhythm/ thanks @goetter & @eQRoeil + +@function line-height ($font-size, $base-height, $base-font, $type-vr) { + + $coef: ceil(1 / ($base-height * $base-font / $font-size)); + $height: ($base-font * $base-height / $font-size) ; + + @return ($height * $coef) ; + +} + + +@function margin-em ($font-size, $base-height, $base-font, $type-vr) { + + $coef: ceil(1 / ($base-height * $base-font / $font-size)); + $other_coef: ceil($base-height * $base-font / $font-size); + $height: ($base-font * $base-height / $font-size) ; + $margin: ($height * $coef ); + + @if $type-vr == 'double_top_single_bottom' { + @return ( ($margin * $other_coef)*1em 0 ( ($margin/2) * $other_coef) *1em 0 ); + } + @if $type-vr == 'single_top_single_bottom' { + @return ( ( ($margin/2) * $other_coef) *1em 0 ); + } + @else if $type-vr == 'single_bottom' { + @return ( 0 0 ( ($margin/2) * $other_coef) *1em 0 ); + } + @else if $type-vr == 'single_top' { + @return ( ( ($margin/2) * $other_coef) *1em 0 0 0 ); + } + @else if $type-vr == 'double_top_double_bottom_without_coef' { + @return (($margin *1em) 0); + } +} + + +@mixin rhythm( $value, $type-vr: $vertical-rhythm, $type-unit: $typo-unit ){ + + @if $type-unit == 'use_em' { + font-size: em($value); + } + @else if $type-unit == 'use_rem' { + font-size: rem($value); + } + @else if $type-unit == 'use_rem_with_em_fallback' { + font-size: em($value); + font-size: rem($value); + } + line-height: line-height($value, $l-h, $base-font, $type-vr); + margin: margin-em($value, $l-h, $base-font, $type-vr) ; + +} + + +@mixin vendor-prefix($property, $value, $prefixes: webkit moz ms o) { + + @if $prefixes { + @each $prefix in $prefixes { + #{'-' + $prefix + '-' + $property}: $value; + } + } + #{$property}: $value; + +} + + +@mixin color-opacity($color, $opacity: 0.9) { + color: $color; /* The Fallback */ + color: rgba($color, $opacity); +} + +@mixin background-opacity($color, $opacity: 0.9) { + background-color: $color; /* The Fallback */ + background-color: rgba($color, $opacity); +} + + + +// Replace `$search` with `$replace` in `$string` +// @author Hugo Giraudel +// @param {String} $string - Initial string +// @param {String} $search - Substring to replace +// @param {String} $replace ('') - New value +// @return {String} - Updated string +@function str-replace($string, $search, $replace: "") { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; +} + + + + +// Generate margins +// example +// $list-margin: mt, mr, mb, ml, m; +// $list-margin-values: 0, 1, 2, 3; // specify 2.5 if needed + +@mixin margin-generator ($list-margin, $list-margin-values, $prefix: "") { + + @each $margin-type in $list-margin { + @each $margin in $list-margin-values { + //$temp_m : str-slice($margin-type, 0, 1); + $temp_t : str-slice($margin-type, 2, 3); + + $property: margin; + + @if $temp_t == t { + $property: margin-top; + } @else if $temp_t == r { + $property: margin-right; + } @else if $temp_t == b { + $property: margin-bottom; + } @else if $temp_t == l { + $property: margin-left; + } + + + $value : $margin + 0em; + /* #{$value} */ + + @if $margin == 0 { + $value : $margin; + } + + // convert to string + $text-margin: $margin + ''; + // 1.5 = 1-5 + $property-class: str-replace($text-margin, '.', '-'); + + // . mr 1-5 { margin-right: 1.5em ;} + .#{$prefix}#{$margin-type}#{$property-class} { #{$property}: #{$value}; } + + + } + } + +} + + + +// Generate paddings +// example +// $list-padding: pt, pr, pb, pl, p; +// $list-padding-values: 0, 1, 2, 3; // specify 2.5 if needed + +@mixin padding-generator ($list-padding, $list-padding-values, $prefix: "") { + + @each $padding-type in $list-padding { + @each $padding in $list-padding-values { + //$temp_p : str-slice($padding-type, 0, 1); + $temp_t : str-slice($padding-type, 2, 3); + + $property: padding; + + @if $temp_t == t { + $property: padding-top; + } @else if $temp_t == r { + $property: padding-right; + } @else if $temp_t == b { + $property: padding-bottom; + } @else if $temp_t == l { + $property: padding-left; + } + + $value : $padding + 0em; + @if $padding == 0 { + $value : $padding; + } + + // convert to string + $text-padding: $padding + ''; + // 1.5 = 1-5 + $property-class: str-replace($text-padding, '.', '-'); + + .#{$prefix}#{$padding-type}#{$property-class} { #{$property}: #{$value}; } + + + } + } +} + + +// +// Responsive management in em +// + +@mixin respond-to ($breakpoint, $query-type : 'max') { + @if $query-type == "max" { + @media (max-width: em($breakpoint, $root-default-font-size)) { + @content; + } + } + + @else if $query-type == "min" { + @media (min-width: em($breakpoint + 1, $root-default-font-size)) { + @content; + } + } + + @else if $query-type == "height" { + @media (max-height: em($breakpoint, $root-default-font-size)) { + @content; + } + } + + @else if $query-type == "min-height" { + @media (min-height: em($breakpoint, $root-default-font-size)) { + @content; + } + } + + @else { + @warn "Type non supported."; + } +} + + +// +// body::before: to get current breakpoint in JS +// +@mixin body-before ($value-content, $display-none : false) { + @if $value-content != "" { + body::before { + content: '#{$value-content}'; + @if $display-none == true { + display: none; + } + } + } + @else { + @warn "$value-content not specified"; + } + +} + + +// +// Easing functions for transitions and animations +// Learn more at http://easings.net/ +// + +@function easing($type: 'ease') { + + $value: ''; + + @if $type == 'linear' { $value: '0, 0, 1, 1'; } + @else if $type == 'ease' { $value: '0.25, 0.1, 0.25, 1'; } + @else if $type == 'easeIn' { $value: '0.42, 0, 1, 1'; } + @else if $type == 'easeOut' { $value: '0, 0, 0.58, 1'; } + @else if $type == 'easeInOut' { $value: '0.42, 0, 0.58, 1'; } + + @else if $type == 'easeInSine' { $value: '0.12, 0, 0.39, 0'; } + @else if $type == 'easeInQuad' { $value: '0.11, 0, 0.5, 0'; } + @else if $type == 'easeInCubic' { $value: '0.32, 0, 0.67, 0'; } + @else if $type == 'easeInQuart' { $value: '0.5 , 0, 0.75, 0'; } + @else if $type == 'easeInQuint' { $value: '0.64, 0, 0.78, 0'; } + @else if $type == 'easeInExpo' { $value: '0.7 , 0, 0.84, 0'; } + @else if $type == 'easeInCirc' { $value: '0.55, 0, 1, 0.45'; } + @else if $type == 'easeInBack' { $value: '0.36, 0, 0.66, -0.56'; } + + @else if $type == 'easeOutSine' { $value: '0.61, 1, 0.88, 1'; } + @else if $type == 'easeOutQuad' { $value: '0.5, 1, 0.89, 1'; } + @else if $type == 'easeOutCubic' { $value: '0.33, 1, 0.68, 1'; } + @else if $type == 'easeOutQuart' { $value: '0.25, 1, 0.5, 1'; } + @else if $type == 'easeOutQuint' { $value: '0.22, 1, 0.36, 1'; } + @else if $type == 'easeOutExpo' { $value: '0.16, 1, 0.3, 1'; } + @else if $type == 'easeOutCirc' { $value: '0, 0.55, 0.45, 1'; } + @else if $type == 'easeOutBack' { $value: '0.34, 1.56, 0.64, 1'; } + + @else if $type == 'easeInOutSine' { $value: '0.37, 0, 0.63, 1'; } + @else if $type == 'easeInOutQuad' { $value: '0.45, 0, 0.55, 1'; } + @else if $type == 'easeInOutCubic' { $value: '0.65, 0, 0.35, 1'; } + @else if $type == 'easeInOutQuart' { $value: '0.76, 0, 0.24, 1'; } + @else if $type == 'easeInOutQuint' { $value: '0.83, 0, 0.17, 1'; } + @else if $type == 'easeInOutExpo' { $value: '0.87, 0, 0.13, 1'; } + @else if $type == 'easeInOutCirc' { $value: '0.85, 0, 0.15, 1'; } + @else if $type == 'easeInOutBack' { $value: '0.68, -0.6, 0.32, 1.6'; } + + @else { @error "'#{$type}' is not a correct value for easing()."; } + + @return cubic-bezier(unquote($value)); +} diff --git a/templates/@theme-base/reusable-components/_design-system-forms.scss b/templates/@theme-base/reusable-components/_design-system-forms.scss new file mode 100644 index 0000000..8b34cdb --- /dev/null +++ b/templates/@theme-base/reusable-components/_design-system-forms.scss @@ -0,0 +1,80 @@ +/* + * inputs + */ +/* resets */ + +/* makes you want to click on */ +label, +button, +input[type="submit"], +input[type="button"], +input[type="reset"] { + cursor: pointer; +} +button[disabled], +input[type="submit"][disabled], +input[type="button"][disabled], +input[type="reset"][disabled] { + cursor: default; + pointer-events: none; +} + +/* for field texts */ +.label { + display: inline-block; +} + +/* avoid dummy resize */ +textarea { + resize: vertical; + cursor: auto; // fixes an issue on Chrome using CSS custom scroll +} +/* remove a Firefox difference on button tag */ +button::-moz-focus-inner { border: 0; padding: 0; } + +label, +button, +input, +select { + color: currentColor; + vertical-align: middle; +} + +@if $use-reset-button == false { + /** fix typo inputs **/ + input, + select, + textarea, + optgroup, + button { + font: inherit; + } +} + +/* + * avoids dimensioning for radio, checkboxes and images + * and a different display on IE + */ +input[type="radio"], +input[type="checkbox"], +input[type="image"] { + background-color: transparent; + border: 0; + width: auto; +} +// for components that rely on checkboxes +input[type="radio"], +input[type="checkbox"] { + opacity: 0; + // this is a crazy fix for Firefox - for having ::after stuff working on it for mail conversations + // to have increased area around checkbox for clicking + /* autoprefixer: ignore next */ + -moz-appearance: initial; +} + +/* to cancel input sizing or other if needed */ +.auto { + width: auto; + min-width: 0; +} + diff --git a/templates/@theme-base/reusable-components/_design-system-layout-modules.scss b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss new file mode 100644 index 0000000..8b2b5be --- /dev/null +++ b/templates/@theme-base/reusable-components/_design-system-layout-modules.scss @@ -0,0 +1,920 @@ +/** + * layout + */ + +/* it depends, it exceeds (french joke) */ +%reset-responsive-height-max-width { + height: auto; + max-width: 100%; +} + +blockquote, +code, +pre, +textarea, +input, +svg { + @extend %reset-responsive-height-max-width; +} + +%reset-responsive-max-width-only { + max-width: 100%; +} + +@if $use-height-auto-td==true { + td { + @extend %reset-responsive-height-max-width; + } +} +@else { + td { + @extend %reset-responsive-max-width-only; + } +} + +@if $use-height-auto-img==true { + img { + @extend %reset-responsive-height-max-width; + } +} +@else { + img { + @extend %reset-responsive-max-width-only; + } +} +@if $use-height-auto-table==true { + table { + @extend %reset-responsive-height-max-width; + } +} +@else { + table { + @extend %reset-responsive-max-width-only; + } +} + +/* no reset on embed, object & video, some players don't like */ + + +.hauto { + height: auto; +} + +/* useful to manage floats */ +/* containing floats */ +.mod, +.scroll-if-needed { + overflow: auto; +} + +.scroll-horizontal-if-needed { + overflow-x: auto; +} + +.mod--hidden, +.no-scroll { + overflow: hidden; +} + +.scroll-smooth-touch { + -webkit-overflow-scrolling: touch; +} + +/* some floattings */ +.left { + float: left; +} + +.right { + float: right; +} + +@if $rtl-option==true { + + /* RTL */ + [dir="rtl"] .left { + float: right; + } + + [dir="rtl"] .right { + float: left; + } +} + +/* clear floats */ +.clear { + clear: both; +} + +@if $use-clearleft_right==true { + .clearleft { + clear: left; + } + + .clearright { + clear: right; + } + + @if $rtl-option==true { + + /* RTL */ + [dir="rtl"] .clearleft { + clear: right; + } + + [dir="rtl"] .clearright { + clear: left; + } + } +} + +@if $use-clearhidden==true { + .clearhidden { + clear: both; + margin: 0; + padding: 0; + visibility: hidden; + } +} + +@if $use-clearfix==true { + .clearfix:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; + } +} + +/* gut: "spacing" empty div */ +.gut { + height: 1px; +} + +/* table-design in CSS */ +.row { + display: table; + table-layout: fixed; +} + +.inline-row { + display: inline-table; + table-layout: fixed; +} + +.line { + display: table-row; +} + +.col { + display: table-cell; + vertical-align: top; +} + +.col-noalign { + display: table-cell; +} + +/* alignments */ +.aligntop { + vertical-align: top; +} + +.alignbottom { + vertical-align: bottom; +} + +.alignmiddle { + vertical-align: middle; +} + +.alignbaseline { + vertical-align: baseline; +} + +.alignsub { + vertical-align: sub; +} + +/* block */ +.bl { + display: block; +} + +.inline { + display: inline; +} + +/* inline-block, useful for grids, and not only */ +.inbl { + display: inline-block; +} + +/* grid = element of inline-grid */ +.grid { + @extend .inbl; + @extend .aligntop; +} + +/* to relativize */ +.relative { + position: relative; +} + +/* centered block */ +.center { + margin-left: auto; + margin-right: auto; +} + +/* to absolute */ +.absolute { + position: absolute; + z-index: 1; +} +.z667 { + z-index: 667; +} + +/* to centered absolute */ +.centered-absolute { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.centered-absolute-horizontal { + left: 50%; + transform: translate(-50%, 0%); +} + +.covered-absolute { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +/* to top right */ +.top-right { + top: 0; + right: 0; +} + +.bottom { + bottom: 0; +} + +@if $rtl-option==true { + [dir="rtl"] { + .top-right { + left: 0; + right: auto; + } + } +} + +.right-icon, +.right-text { + top: 0; + right: .5em; + height: $default-height-fields; // height of field + align-content: center; +} +.right-text { + right: 1em; +} +.right-text-inner { + padding-bottom: .2rem; +} + +@if $rtl-option==true { + [dir="rtl"] { + .right-icon, + .right-text { + left: .5em; + right: auto; + } + .right-text { + left: 1em; + } + } +} + + + +.fixed { + position: fixed; +} + + +.sticky { + &-top, + &-bottom { + position: sticky; + z-index: 1; + } + + &-top { + top: 0; + } + + &-bottom { + bottom: 0; + } +} + +/* hardware-acceleration activation */ +.hardware-accelerated { + @include vendor-prefix(transform, translateZ(0)); +} + +/* block widths */ +.w0 { + width: 0; +} + +.w1 { + width: 1%; +} + +.w2 { + width: 2%; +} + +.w3 { + width: 3%; +} + +.w5 { + width: 5%; +} + +.w10 { + width: 10%; +} + +.w15 { + width: 15%; +} + +.w20 { + width: 20%; +} + +.w25 { + width: 25%; +} + +.w30 { + width: 30%; +} + +.w33 { + width: 33.333%; +} + +.w40 { + width: 40%; +} + +.w45 { + width: 45%; +} + +.w49 { + width: 49%; +} + +.w50 { + width: 50%; +} + +.w60 { + width: 60%; +} + +.w66 { + width: 66.666%; +} + +.w70 { + width: 70%; +} + +.w75 { + width: 75%; +} + +.w80 { + width: 80%; +} + +.w90 { + width: 90%; +} + +.w95 { + width: 95%; +} + +.w100 { + width: 100%; +} + +/* here you may add px widths */ +$list-width-px: 40, 50, 70, 150, 200, 500 !default; +// ex .w500p { width: 500px; } + +@each $width in $list-width-px { + .w#{$width}p { + width: #{$width}px; + } +} + +/* here you may add rem widths */ +$list-width-rem: 33 !default; // say 33 +// ex .w500p { width: 500px; } + +@each $width in $list-width-rem { + .w#{$width}r { + width: #{$width}rem; + } +} + +/* here you may add em widths */ +$list-width-em: 2, 6, 8, 10, 11, 13, 14, 16 !default; +// ex .w16e { width: 16em; } + +@each $width in $list-width-em { + .w#{$width}e { + width: #{$width}em; + } +} + +/* max-block widths */ + +/* here you may add max-widths % */ +$list-max-widths: 50, 60, 80, 100 !default; +@each $max-width in $list-max-widths { + .mw#{$max-width} { + max-width: #{$max-width * 1%}; + } +} + +/* here you may add pixel max-widths */ +$list-max-width-px: 100, 650 !default; + +@each $max-width in $list-max-width-px { + .mw#{$max-width}p { + max-width: #{$max-width}px; + } +} + +/* here you may add ch max-widths */ +$list-max-width-ch: 70 !default; + +@each $max-width in $list-max-width-ch { + .mw#{$max-width}ch { + max-width: #{$max-width}ch; + } +} + +/* here you may add em max-widths */ +$list-max-width-em: 5, 7, 8, 13, 15, 18, 30, 37, 40, 50 !default; + +@each $max-width in $list-max-width-em { + .mw#{$max-width}e { + max-width: #{$max-width}em; + } +} + +$list-min-width-em: 1.4, 3, 5, 14, 35 !default; + +@each $min-width in $list-min-width-em { + $fragment-class: str-replace(inspect($min-width), '.', '-'); // inspect to convert to string + + .min-w#{$fragment-class}e { + min-width: #{$min-width}em; + } +} + + +$list-min-height-em: 5, 16 !default; + +@each $min-height in $list-min-height-em { + .min-h#{$min-height}e { + min-height: #{$min-height}em; + } +} + + +.h100 { + height: 100%; +} + +.h100v { + height: 100vh; +} + +/* margins */ +.mt1r { + margin-top: 1rem; +} + +.mt0-5r { + margin-top: .5rem; +} + +.mr0-5r { + margin-right: .5rem; +} + +$list-margins: m, mt, mr, mb, ml !default; +$list-margins-values: 0, 0.1, 0.25, 0.4, 0.5, 0.6, 0.75, 1, 1.5, 2, 4 !default; // specify 2.5 if needed + +@include margin-generator($list-margins, $list-margins-values); + +.mtauto { + margin-top: auto; +} + +.mrauto { + margin-right: auto; +} + +.mbauto { + margin-bottom: auto; +} + +.mlauto { + margin-left: auto; +} + +.mauto { + margin: auto; +} + +@if $rtl-option==true { + [dir="rtl"] { + .mrauto { + margin-right: 0; + margin-left: auto; + } + + .mlauto { + margin-left: 0; + margin-right: auto; + } + } +} + +/* paddings */ + +$list-paddings: p, pt, pr, pb, pl !default; +$list-paddings-values: 0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4 !default; // specify 2.5 if needed + +@include padding-generator($list-paddings, $list-paddings-values); + +/* to hide text with accessibility… a11y */ +.invisible, +.sr-only { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + top: 0; // needed for Safari dumb and 💩 behaviour +} + +.nonvisible { + visibility: hidden; +} + +.opacity-50 { + opacity: 0.5; +} + +.opacity-40 { + opacity: 0.4; +} + +.opacity-30 { + opacity: 0.3; +} + +.filter-blur { + filter: blur(4px); +} + +.hidden, +[hidden], +.display-on-darkmode { + display: none; +} + +/* hidden everywhere */ +.nodesktop { + display: none; +} + +/* hidden on desktop */ +/*.noprint {} /* hidden on print */ +/*.notablet {} /* hidden on tablets */ +/*.nomobile {} /* hidden on mobile */ + +.list-2columns { + -webkit-column-count: 2; + -moz-column-count: 2; + column-count: 2; + -webkit-column-gap: 0; + -moz-column-gap: 0; + column-gap: 0; + + & > * { + -webkit-column-break-inside: avoid; + /* Chrome, Safari, Opera */ + page-break-inside: avoid; + /* Firefox */ + break-inside: avoid; + /* IE 10+ */ + break-inside: avoid-column; + /* W3C */ + } +} + +/* + * ratio container (for responsive iframes/videos/etc.) + */ +[class*="ratio-container-"] { + width: 100%; + height: 0; + @extend .relative; +} + +.ratio-container-square { + padding-top: 100%; +} + +.ratio-container-16-9 { + padding-top: 56.25%; +} + +.ratio-container-5-1 { + padding-top: 20%; +} + +.inner-ratio-container { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +/* + * Flexbox helpers, also name tartiflex + */ +.inline-flex, +.inline-flex-vcenter { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.flex, +.flex-flex-children, +.flex-noMinChildren { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.flex-row { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} + +.flex-reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} + +.flex-column { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.flex-column-reverse { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; +} + +.flex-spacebetween { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.flex-spacearound { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-around; +} + +.flex-justify-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; +} + +.flex-justify-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; +} + +.flex-justify-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.flex-nowrap { + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +/* fix aspect ratio */ +.flex > *, +.no-min-dims { + min-height: 0; + min-width: 0; +} + +.flex-flex-children > * { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.inline-flex-vcenter > *, +.flex-item-centered-vert { + margin-top: auto; + margin-bottom: auto; + align-self: center; +} + +.flex-items-center { + -webkit-box-align: center; + -ms-flex-align: center; + -ms-grid-row-align: center; + align-items: center; +} + +.flex-items-baseline { + -webkit-box-align: baseline; + -ms-flex-align: baseline; + -ms-grid-row-align: baseline; + align-items: baseline; +} + +.flex-items-start { + -webkit-box-align: start; + -ms-flex-align: start; + -ms-grid-row-align: flex-start; + align-items: flex-start; +} + +.flex-items-end { + -webkit-box-align: end; + -ms-flex-align: end; + -ms-grid-row-align: flex-end; + align-items: flex-end; +} + +.flex-items-stretch { + align-items: stretch; +} + +.flex-item-fluid { + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0px; +} + +.flex-item-fluid-auto { + flex: 1 1 auto; +} + +.flex-item-noshrink { + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.flex-item-nogrow { + -webkit-box-flex: 0; + -ms-flex-positive: 0; + flex-grow: 0; +} + +.flex-item-grow-2 { + -webkit-box-flex: 2; + -ms-flex-positive: 2; + flex-grow: 2; +} + +.flex-item-noflex { + -webkit-box-flex: 0; + -ms-flex: 0; + flex: 0; +} + +.flex-self-vcenter { + -ms-flex-item-align: center; + align-self: center; +} + +.flex-self-start { + -ms-flex-item-align: start; + align-self: flex-start; +} + +.flex-self-end { + -ms-flex-item-align: end; + align-self: flex-end; +} + +.flex-autogrid { + margin: 0 -0.5em; + @extend .flex; + @extend .flex-spacebetween; +} + +.flex-autogrid-item { + @extend .flex-item-fluid; + padding: 0 0.5em 1em; +} + +.flex-autogrid-item.pb0 { + padding-bottom: 0; +} + +.inline-grid-container { + display: inline-grid; +} + +/* RTL/others */ +.mirror, +[dir="rtl"] .on-rtl-mirror { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +.rotateX-180 { + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); +} + +.rotateZ-90 { + -webkit-transform: rotateZ(90deg); + transform: rotateZ(90deg); +} + +.rotateZ-270 { + -webkit-transform: rotateZ(270deg); + transform: rotateZ(270deg); +} + +/* increase surface click/tap */ +.increase-surface-click::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.no-pointer-events, +.no-pointer-events-children * { + pointer-events: none; +} diff --git a/templates/@theme-base/reusable-components/_design-system-links-icons.scss b/templates/@theme-base/reusable-components/_design-system-links-icons.scss new file mode 100644 index 0000000..0207be2 --- /dev/null +++ b/templates/@theme-base/reusable-components/_design-system-links-icons.scss @@ -0,0 +1,107 @@ +/* links */ + +/* remember focus */ +a, +.link { + color: $color-links; + text-decoration: underline; + cursor: pointer; + + &:focus, + &:hover, + &:active { + color: $color-hover; + text-decoration: underline; + } +} + +.nodecoration { + text-decoration: none; +} +.underline { + text-decoration: underline; +} +.underline-hover:hover, +.underline-hover:focus { + text-decoration: underline; +} + +.primary-link { + &:focus, + &:hover { + color: $pm-primary; + } +} + +.hover-same-color { + &:focus, + &:hover { + &.color-white { + color: $white; + } + &.primary-link { + color: $pm-primary; + } + } +} + +.button-showOnHover:focus, +.button-showOnHover:hover { + .button-showOnHover-element { + visibility: visible; + } +} + + + +/* links with icons, may use DATA-URI */ + +/* external links */ +/*a[href^="http://"], +a[href^="https://"] { + +}*/ +/* if full URL of the website in an internal link, remove icon */ +/*a[href^="http://www.mydomain.com"] { + +}*/ +/* contact, mailto links */ +/*.mail, +a[href^="mailto:"] { + +}*/ +/* if URL ends with .pdf or whatever */ +/*a[href$=".pdf"] { + +}*/ + +/* facto icons */ +[class*="icon-"] { + @extend .alignmiddle; + @extend .inbl; + fill: currentColor; +} + +$list-icon-pixels: 6,8,10,11,12,14,16,18,20,24,28,40,42,60,100 !default; + +@each $width in $list-icon-pixels { + .icon-#{$width}p { + width: #{$width}px; + height: #{$width}px; + } +} + +$list-icon-percent: 50 !default; +@each $width in $list-icon-percent { + .icon-#{$width} { + width: percentage($width / 100); + height: percentage($width / 100); + } +} + +.path2x { + stroke-width: 1px; + &.fill-global-light { + stroke: $pm-global-light; + } +} diff --git a/templates/@theme-base/reusable-components/_design-system-print.scss b/templates/@theme-base/reusable-components/_design-system-print.scss new file mode 100644 index 0000000..eadc123 --- /dev/null +++ b/templates/@theme-base/reusable-components/_design-system-print.scss @@ -0,0 +1,102 @@ +@media print { + /** + * add in this all elements which need to be hardly reseted for print + */ + body, + html, + .page, + .reset4print { + background-color: $white; + background-image: none; + border: 0; + box-shadow: none; + color: $black; + float: none; + height: auto; + margin: 0; + max-width: 100%; + min-height: 0; + padding: 0; + position: static; + width: auto; + opacity: 1; + visibility: visible; + max-height: none; + display: block; + } + + .is-printed-version { + .pm-modalContainer, + .pm-modal, + .pm-modalContentInner, + .pm-modalContent { + @extend .reset4print; + } + .pm-modalContentInner::before, + .pm-modalContentInner::after { + content: none; + } + } + + body { + padding: .5em; + overflow: auto; + + /* put back normal mode for print :) */ + --bgcolor-item-column-list: initial; + --bgcolor-unread-item-column-list: initial; + --bgcolor-view-column-detail: initial; + --bgcolor-main-area: initial; + --bgcolor-context-bar: initial; + --bgcolor-toolbar: initial; + --color-context-bar-link: initial; + --color-main-area: initial; + --fillcolor-icons: initial; + --bgcolor-disabled-checkboxes-radios: initial; + --bgcolor-item-column-active: initial; + --bordercolor-input: initial; + --bgcolor-input: initial; + --bgcolor-highlight: initial; + --color-input: initial; + + .pm-button:not(.pm-button--primary):not(.pm-button--link), .pm-button--info { + border-color: $pm-global-border; + background: $white; + color: $pm-global-grey; + } + + } + + + /* hide unnecessary elements */ + .noprint { + display: none; + } + .is-printed-version { + .app-root, + .pm-modalOverlay, + .pm-modalHeader, + .pm-modalFooter, + .pm-modalContentInnerTopShadow, + .pm-modalContentInnerBottomShadow, + .item-icon, + [class^="scrollshadow-"] { + @extend .noprint; + } + } + + /* display specific elements for print */ + .onprint { + display: block; + } + + /* avoid problematic page break */ + ul, ol { + page-break-inside: avoid; + } + h1, h2, h3, caption { + page-break-after: avoid; + } + + +} /* end print */ diff --git a/templates/@theme-base/reusable-components/_design-system-reduced-motion.scss b/templates/@theme-base/reusable-components/_design-system-reduced-motion.scss new file mode 100644 index 0000000..437cc53 --- /dev/null +++ b/templates/@theme-base/reusable-components/_design-system-reduced-motion.scss @@ -0,0 +1,9 @@ +/** + * reduced motion MQ: for vestibular disorders + */ +@media (prefers-reduced-motion: reduce) { + *, *:before, *:after { + animation-duration: 0s !important; + transition-duration: 0s !important; + } +}
\ No newline at end of file diff --git a/templates/@theme-base/reusable-components/_design-system-reset.scss b/templates/@theme-base/reusable-components/_design-system-reset.scss new file mode 100644 index 0000000..3554888 --- /dev/null +++ b/templates/@theme-base/reusable-components/_design-system-reset.scss @@ -0,0 +1,181 @@ +/* for HTML 5 */ +article, aside, datagrid, datalist, details, dialog, figure, footer, header, main, menu, nav, section { display: block; } +audio, canvas, progress, video { display: inline-block; } +abbr, eventsource, mark, meter, time, output, bb { display: inline; } + +/* to comment/fallback if you care about IE<8 */ +html { box-sizing: border-box; } +*, *:before, *:after { + box-sizing: inherit; +} + +/* reset minimum */ +html, body, blockquote, ul, ol, form, button, figure { margin: 0; padding: 0; } +button, progress { border: 0; } +p, ul, ol, dl, blockquote, pre, menu, td, th { + font-size: 1em; + line-height: $l-h; + margin: $l-h * 1em 0; +} + +@if $use-reset-button == true { + /* reset buttons, remember to style them in forms */ + input, select, textarea, optgroup, button { + background: transparent; + border: 0; + font: inherit; + -webkit-appearance: none; + } + // -webkit-appearance: none makes vocalization failing + input[type="checkbox"] { + -webkit-appearance: checkbox; + } + input[type="radio"] { + -webkit-appearance: radio; + } + +} +@else { + input, select, textarea, optgroup, button { + font: inherit; + } +} + +/* fix display img/iframe */ +img, +iframe { vertical-align: middle; } + +ul, ol, menu { padding-left: 2em; } + +dd { margin-left: 2em; } + + +@if $rtl-option == true { + /* RTL */ + [dir="rtl"] { + ul, + ol { + padding-left: 0; + padding-right: 2em; + } + dd { + margin-left: 0; + margin-right: 2em; + } + } +} + + +@if $root-equiv-10-px == true { + /* base font size at 10px */ + html { + font-size: 62.5%; + @if ( $use-ie-calc-font-fallback == true ){ + font-size: calc(1em * 0.625); + } + } +} + +@if $apply-body-styles == true { + body { + background: $pm-global-grey; + color: $pm-global-light; + font-family: $font-family; + text-rendering: geometricPrecision; + -webkit-font-smoothing: antialiased; + + @if $typo-unit == 'use_em' { + @if $root-equiv-10-px == true { + font-size: em($base-font, 10); + } + @else { + font-size: em($base-font, $root-default-font-size); + } + } + @else if $typo-unit == 'use_rem' { + font-size: var(--body-fontsize, rem($base-font)); + } + @else if $typo-unit == 'use_rem_with_em_fallback' { + @if $root-equiv-10-px == true { + font-size: em($base-font, 10); + } + @else { + font-size: em($base-font, $root-default-font-size); + } + font-size: rem($base-font); + } + line-height: $l-h; + min-height: 100%; + } +} + + +// Sass placeholder, don't touch if you are not sure ;) +%bold { + font-weight: bold; +} +b, strong { + @extend %bold; +} + +/* harmonization between Chrome/Firefox */ +pre, code, kbd, samp { + font-family: $font-family-monospace; + font-size: 1em; +} +pre { + white-space: pre-wrap; + word-wrap: break-word; +} + +// tiny reset for mark tag +mark { + @if ( $use-color-reset-mark == true ) { + background-color: unset; + } + @else { + background-color: var(--bgcolor-mark, $default-bgColor-mark); + } + color: var(--color-mark, currentColor); + font-weight: bold; +} + +small { + font-size: 80%; +} + + +/* avoid border on images in links + fix border image IE */ +a:link img, +a:visited img, +img { + border-style: none; +} + +/* tiny control */ +audio:not([controls]) { + display: none; + height: 0; +} + +/* important, abbr are good */ +/* only those with a title are shown */ +abbr[title] { + border-bottom: dotted 1px; + cursor: help; + text-decoration: none; + /* color inherited from text */ +} + + +code, +pre, +samp { + white-space: pre-wrap; +} +code { + line-height: 1; +} +dfn { + font-style: italic; +} diff --git a/templates/@theme-base/reusable-components/_design-system-responsive.scss b/templates/@theme-base/reusable-components/_design-system-responsive.scss new file mode 100644 index 0000000..83edd6d --- /dev/null +++ b/templates/@theme-base/reusable-components/_design-system-responsive.scss @@ -0,0 +1,299 @@ +/* general case */ +@include body-before ('desktop', true); + + +/** + * medium/tablet landscape minor breakpoint + */ +@include respond-to($breakpoint-medium-landscape) { + + $list-paddings-medium-landscape: p, pt, pr, pb, pl !default; + $list-paddings-medium-landscape-values: 0, 1 !default; // specify 2.5 if needed + + @include padding-generator($list-paddings-medium-landscape, $list-paddings-medium-landscape-values, "ontablet-landscape-"); + +} + +/** + * medium/tablet breakpoint + */ +@include respond-to($breakpoint-medium, 'min') { + .ondesktop { + &-h100 { + height: 100%; + } + } +} + +/** + * medium/tablet breakpoint + */ +@include respond-to($breakpoint-medium) { + + /** + * layout/modules + */ + + /* display elements */ + .nodesktop { display: block; } + + /* hide unnecessary elements */ + .notablet { display: none; } + + /* linearization of floating content/table-layout */ + .autotablet { + float: none; + display: block; + width: auto; + } + + /* margins */ + $list-margins-tablet: m, mt, mr, mb, ml !default; + $list-margins-tablet-values: 0, 1, 2 !default; // specify 2.5 if needed + + @include margin-generator($list-margins-tablet, $list-margins-tablet-values, "ontablet-"); + + /* paddings */ + $list-paddings-tablet: p, pt, pr, pb, pl !default; + $list-paddings-tablet-values: 0, 1, 2 !default; // specify 2.5 if needed + + @include padding-generator($list-paddings-tablet, $list-paddings-tablet-values, "ontablet-"); + + /* text aligns */ + .ontablet- { + &alignleft { text-align: left; } + &aligncenter { text-align: center; } + &alignright { text-align: right; } + } + + .ontablet- { + &flex-column { + flex-direction: column; + & > * { + width: 100%; + flex-basis: auto; + } + } + + &w25 { width: 25%; } + &w100 { width: 100%; } + &mw100 { max-width: 100%; } + &wauto { width: auto; } + + @for $i from 2 through 3 { + &hideTd#{$i} { + td:nth-child(#{$i}) { + display: none; + } + } + } + + &list-1column { + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; + } + + } + + /** + * global structure adaptation (page / skip links / header / main content / footer) + */ + @include body-before ('tablet'); + +} + + + + +/** + * small/mobile breakpoint + */ +@include respond-to($breakpoint-small) { + + /** + * layout/modules + */ + + /* display elements */ + .notablet { display: block; } + + /* hide unnecessary elements */ + .nomobile { display: none; } + + /* linearization of floating content/table-layout */ + .automobile { + float: none; + display: block; + width: auto; + } + + /* margins */ + $list-margins-mobile: m, mt, mr, mb, ml !default; + $list-margins-mobile-values: 0, 0.25, 0.5, 1, 2, 3.5 !default; // specify 2.5 if needed + + @include margin-generator($list-margins-mobile, $list-margins-mobile-values, "onmobile-"); + + /* paddings */ + $list-paddings-mobile: p, pt, pr, pb, pl !default; + $list-paddings-mobile-values: 0, 0.25, 0.5, 1, 2 !default; // specify 2.5 if needed + + @include padding-generator($list-paddings-mobile, $list-paddings-mobile-values, "onmobile-"); + + /* text aligns */ + .onmobile- { + &alignleft { text-align: left; } + &aligncenter { text-align: center; } + &alignright { text-align: right; } + } + + .onmobile- { + &flex-column { + flex-direction: column; + & > * { + width: 100%; + flex-basis: auto; + } + &.flex-autogrid { + margin: 0; + &.mb1 { + margin-bottom: 1em; + } + } + & > .flex-autogrid-item { + padding: 0; + min-height: auto; + } + } + &flex-column-nostretch { + flex-direction: column; + & > * { + align-self: center; + } + } + &flex-item-fluid { + flex: 1 1 0px; + } + &flex-item-fluid-auto { + flex: 1 1 auto; + } + &no-flex { + flex: 0 0 auto; + } + &flex-shrink { + flex-shrink: 1; + } + &flex-self-start { + align-self: start; + } + &flex-wrap { + flex-wrap: wrap; + } + &mw100 { + max-width: 100%; + } + &min-w100 { + min-width: 100%; + } + &wauto { + width: auto; + } + &w25{ + width: 25%; + } + &w33{ + width: 33%; + } + &w100 { + width: 100%; + } + &no-border { + border: 0; + } + + &static { + position: static; + } + @for $i from 2 through 5 { + &hideTd#{$i} { + td:nth-child(#{$i}) { + display: none; + } + } + } + &list-1column { + -webkit-column-count: 1; + -moz-column-count: 1; + column-count: 1; + } + } + + + /** + * global structure adaptation (page / skip links / header / main content / footer) + */ + @include body-before ('mobile'); + +} + + + +/** + * tiny/small mobile breakpoint + */ +@include respond-to($breakpoint-tiny) { + + /** + * layout/modules + */ + + /* display elements */ + /*.nomobile { display: block; }*/ + + /* hide unnecessary elements */ + .notinymobile { display: none; } + + /* linearization of floating content/table-layout */ + .autotinymobile { + float: none; + display: block; + width: auto; + } + .ontinymobile- { + &wauto { + width: auto; + } + &flex-self-start { + align-self: flex-start; + } + &flex-column { + flex-direction: column; + & > * { + width: 100%; + flex-basis: auto; + } + } + &hideTd3 { + td:nth-child(3) { + display: none; + } + } + } + /* margins */ + $list-margins-tinymobile: m, mt, mr, mb, ml !default; + $list-margins-tinymobile-values: 0, 1 !default; + + @include margin-generator($list-margins-tinymobile, $list-margins-tinymobile-values, "ontinymobile-"); + + /* paddings */ + //$list-paddings-tinymobile: p, pt, pr, pb, pl !default; + //$list-paddings-tinymobile-values: 0, 1, 2 !default; // specify 2.5 if needed + + //@include padding-generator($list-paddings-tinymobile, $list-paddings-tinymobile-values, "ontinymobile-"); + + /** + * global structure adaptation (page / skip links / header / main content / footer) + */ + @include body-before ('tinymobile'); + +} diff --git a/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss b/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss new file mode 100644 index 0000000..b54dd8f --- /dev/null +++ b/templates/@theme-base/reusable-components/_design-system-util-typo-fix.scss @@ -0,0 +1,222 @@ +.noborder, +iframe, +dialog { border: 0; } + +.border-collapse { + border-collapse: collapse; +} + +.unstyled { + padding-left: 0; + list-style-type: none; +} + +@if $rtl-option == true { + /* RTL */ + [dir="rtl"] { + .unstyled { + padding-right: 0; + } + } +} + +/* + * taken from http://tinytypo.tetue.net/ made by @tetue + * tuned with the help of https://www.nicolas-hoffmann.net/utilitaires/codes-hexas-ascii-unicode-utf8-caracteres-usuels.php + * + * see https://en.wikipedia.org/wiki/Quotation_mark#Summary_table for reference + */ +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} +:lang(fr) > q { + quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019"; +} +:lang(en) > q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} +q:before { + content: open-quote; +} +q:after { + content: close-quote; +} + +@import './_includes/_resets/typo-sub-sup'; + +/* avoid margin problems */ +@if $vertical-rhythm == 'single_top' or $vertical-rhythm == 'double_top_single_bottom' { + h1,.h1, + h2,.h2, + h3,.h3, + h4,.h4, + h5,.h5, + h6,.h6{ + &:first-child { + margin-top: 0; + } + } + /* remove bottom margin on last child */ + p, + ul, + ol, + dl, + blockquote, + pre, + table { + &:last-child { + margin-bottom: 0; + } + } +} + +/* avoid margin on nested elements */ +li p, +li ul { + margin-bottom: 0; + margin-top: 0; +} + +/* Hyphenation: Thou shalt not pass (Moïse or Gandalf, don’t remember) */ +@if $hyphenation == true { + textarea, + table, + td, + th, + code, + pre, + samp, + div, + p { + word-break: break-word; + } + @supports (-webkit-hyphens: auto) or (hyphens: auto) { + textarea, + table, + td, + th, + code, + pre, + samp, + div, + p { + word-break: normal; + @include vendor-prefix(hyphens, auto, webkit); + } + } +} +@else { + .cut { + word-break: break-word; + } + @supports (-webkit-hyphens: auto) or (hyphens: auto) { + .cut { + word-break: normal; + @include vendor-prefix(hyphens, auto, webkit); + } + } +} + +/* remove hyphenation if needed */ +.nocut { + word-wrap: normal; +} +@supports (-webkit-hyphens: auto) or (hyphens: auto) { + .nocut { + @include vendor-prefix(hyphens, none, webkit); + } +} + +.break { + word-break: break-word; +} +.hyphens { + @include vendor-prefix(hyphens, auto, webkit); +} + +kbd { + border: solid 1px; + border-top-left-radius: .5em; + border-top-right-radius: .5em; + padding: 0 .25em; +} +table { + margin-bottom: 1.5em; + table-layout: fixed; +} + +/* text aligns */ +.alignright { text-align: right; } +.aligncenter { text-align: center; } +.alignleft { text-align: left; } + +@if $rtl-option == true { + /* RTL */ + [dir="rtl"] .alignright { text-align: left; } + [dir="rtl"] .alignleft { text-align: right; } +} + +.ellipsis { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.ellipsis-two-lines, +.ellipsis-four-lines { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; +} +.ellipsis-two-lines { + -webkit-line-clamp: 2; +} +.ellipsis-four-lines { + -webkit-line-clamp: 4; +} + +.uppercase { + text-transform: uppercase; +} +.capitalize { + text-transform: capitalize; +} +.capitalize-block { + text-transform: lowercase; + &:first-letter { + text-transform: uppercase; + } +} + +.strong, .bold { + @extend %bold; +} +.nobold { + font-weight: normal; +} + +.semibold { + font-weight: 600; +} + +.italic { + font-style: italic; +} + +.no-outline { + outline: 0; +} + +.strike { + text-decoration: line-through; +} + +.pre-wrap { + white-space: pre-wrap; +} +.no-wrap { + white-space: nowrap; +} +.pre { + white-space: pre; +} + diff --git a/templates/@theme-base/reusable-components/_design-system-viewport-fix.scss b/templates/@theme-base/reusable-components/_design-system-viewport-fix.scss new file mode 100644 index 0000000..01a82ae --- /dev/null +++ b/templates/@theme-base/reusable-components/_design-system-viewport-fix.scss @@ -0,0 +1,33 @@ +/* fix viewport for Win8 (snap mode) and preparing day + * when viewport will be supported by all render engines + * + * Examples: http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ + * width=device-width => width: device-width; + * height=device-height => height: device-height; + * initial-scale=2 => zoom: 2; + * maximum-scale=2 => max-zoom: 2; + * minimum-scale=0.5 => min-zoom: 0.5; + * user-scalable=no => user-zoom: fixed; + * + * for Win8 snap mode => only width: device-width; works for the moment + */ + + +/* if anyone has a mixin for this, feel free to share */ + + +@-webkit-viewport { + width: device-width; +} +@-moz-viewport { + width: device-width; +} +@-ms-viewport { + width: device-width; +} +@-o-viewport { + width: device-width; +} +@viewport { + width: device-width; +} diff --git a/templates/@theme-base/reusable-components/_includes/_resets/_typo-sub-sup.scss b/templates/@theme-base/reusable-components/_includes/_resets/_typo-sub-sup.scss new file mode 100644 index 0000000..6e9b3d7 --- /dev/null +++ b/templates/@theme-base/reusable-components/_includes/_resets/_typo-sub-sup.scss @@ -0,0 +1,12 @@ +/* avoid ugly line-height */ +sup, +sub { + vertical-align: 0; + position: relative; +} +sup { + bottom: 1ex; +} +sub { + top: .5ex; +} |