From 0241268cded264722c3e527eda191e67cf3af3b3 Mon Sep 17 00:00:00 2001 From: Jordy Kommeren Date: Thu, 8 Nov 2018 09:40:07 +0100 Subject: [PATCH] Added magento-ui sass and implemented multiple bug-fixes --- src/scss/_boilerplate.scss | 1 + src/scss/boilerplate/_menu.scss | 4 - src/scss/boilerplate/_variables.scss | 17 +- .../magento-ui/_actions-toolbar.scss | 131 ++ .../boilerplate/magento-ui/_breadcrumbs.scss | 175 +++ src/scss/boilerplate/magento-ui/_buttons.scss | 434 ++++++ .../boilerplate/magento-ui/_dropdowns.scss | 574 ++++++++ src/scss/boilerplate/magento-ui/_forms.scss | 1224 +++++++++++++++++ src/scss/boilerplate/magento-ui/_grids.scss | 224 +++ src/scss/boilerplate/magento-ui/_icons.scss | 323 +++++ src/scss/boilerplate/magento-ui/_layout.scss | 132 ++ src/scss/boilerplate/magento-ui/_lib.scss | 55 + src/scss/boilerplate/magento-ui/_loaders.scss | 88 ++ .../boilerplate/magento-ui/_messages.scss | 273 ++++ .../boilerplate/magento-ui/_navigation.scss | 521 +++++++ src/scss/boilerplate/magento-ui/_pages.scss | 430 ++++++ src/scss/boilerplate/magento-ui/_popups.scss | 290 ++++ src/scss/boilerplate/magento-ui/_rating.scss | 224 +++ src/scss/boilerplate/magento-ui/_resets.scss | 103 ++ .../boilerplate/magento-ui/_sections.scss | 283 ++++ src/scss/boilerplate/magento-ui/_tables.scss | 494 +++++++ .../boilerplate/magento-ui/_tooltips.scss | 205 +++ .../boilerplate/magento-ui/_typography.scss | 605 ++++++++ .../boilerplate/magento-ui/_utilities.scss | 403 ++++++ .../variables/_actions-toolbar.scss | 17 + .../magento-ui/variables/_breadcrumbs.scss | 71 + .../magento-ui/variables/_buttons.scss | 97 ++ .../magento-ui/variables/_colors.scss | 103 ++ .../magento-ui/variables/_components.scss | 8 + .../magento-ui/variables/_dropdowns.scss | 94 ++ .../magento-ui/variables/_email.scss | 19 + .../magento-ui/variables/_forms.scss | 310 +++++ .../magento-ui/variables/_global.scss | 16 + .../magento-ui/variables/_icons.scss | 80 ++ .../magento-ui/variables/_layout.scss | 35 + .../magento-ui/variables/_loaders.scss | 25 + .../magento-ui/variables/_messages.scss | 209 +++ .../magento-ui/variables/_navigation.scss | 110 ++ .../magento-ui/variables/_pages.scss | 106 ++ .../magento-ui/variables/_popups.scss | 75 + .../magento-ui/variables/_rating.scss | 14 + .../magento-ui/variables/_responsive.scss | 13 + .../magento-ui/variables/_sections.scss | 84 ++ .../magento-ui/variables/_structure.scss | 24 + .../magento-ui/variables/_tables.scss | 50 + .../magento-ui/variables/_tooltips.scss | 23 + .../magento-ui/variables/_typography.scss | 240 ++++ 47 files changed, 9030 insertions(+), 6 deletions(-) create mode 100755 src/scss/boilerplate/magento-ui/_actions-toolbar.scss create mode 100755 src/scss/boilerplate/magento-ui/_breadcrumbs.scss create mode 100755 src/scss/boilerplate/magento-ui/_buttons.scss create mode 100755 src/scss/boilerplate/magento-ui/_dropdowns.scss create mode 100755 src/scss/boilerplate/magento-ui/_forms.scss create mode 100755 src/scss/boilerplate/magento-ui/_grids.scss create mode 100755 src/scss/boilerplate/magento-ui/_icons.scss create mode 100755 src/scss/boilerplate/magento-ui/_layout.scss create mode 100755 src/scss/boilerplate/magento-ui/_lib.scss create mode 100755 src/scss/boilerplate/magento-ui/_loaders.scss create mode 100755 src/scss/boilerplate/magento-ui/_messages.scss create mode 100755 src/scss/boilerplate/magento-ui/_navigation.scss create mode 100755 src/scss/boilerplate/magento-ui/_pages.scss create mode 100755 src/scss/boilerplate/magento-ui/_popups.scss create mode 100755 src/scss/boilerplate/magento-ui/_rating.scss create mode 100755 src/scss/boilerplate/magento-ui/_resets.scss create mode 100755 src/scss/boilerplate/magento-ui/_sections.scss create mode 100755 src/scss/boilerplate/magento-ui/_tables.scss create mode 100755 src/scss/boilerplate/magento-ui/_tooltips.scss create mode 100755 src/scss/boilerplate/magento-ui/_typography.scss create mode 100755 src/scss/boilerplate/magento-ui/_utilities.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_actions-toolbar.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_breadcrumbs.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_buttons.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_colors.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_components.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_dropdowns.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_email.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_forms.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_global.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_icons.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_layout.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_loaders.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_messages.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_navigation.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_pages.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_popups.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_rating.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_responsive.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_sections.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_structure.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_tables.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_tooltips.scss create mode 100755 src/scss/boilerplate/magento-ui/variables/_typography.scss diff --git a/src/scss/_boilerplate.scss b/src/scss/_boilerplate.scss index 85f26e8..ab3b2bf 100644 --- a/src/scss/_boilerplate.scss +++ b/src/scss/_boilerplate.scss @@ -4,6 +4,7 @@ * Author: Epartment E-commerce B.V. * License: MIT */ +@import 'boilerplate/magento-ui/lib'; @import 'boilerplate/variables'; @import 'boilerplate/fonts'; diff --git a/src/scss/boilerplate/_menu.scss b/src/scss/boilerplate/_menu.scss index b334ef8..c00cd40 100644 --- a/src/scss/boilerplate/_menu.scss +++ b/src/scss/boilerplate/_menu.scss @@ -30,10 +30,6 @@ &:hover { color: $menu-bar-menu-item-hover-color; background: $menu-bar-menu-item-hover-background; - border-top: $menu-bar-menu-item-hover-border-top; - border-bottom: $menu-bar-menu-item-hover-border-bottom; - border-left: $menu-bar-menu-item-hover-border-left; - border-right: $menu-bar-menu-item-hover-border-right; } } } diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss index 45978ef..527f2ae 100644 --- a/src/scss/boilerplate/_variables.scss +++ b/src/scss/boilerplate/_variables.scss @@ -21,6 +21,17 @@ $color-boilerplate-gray: rgb(148, 148, 148) !default; $color-primary-gradient-color: linear-gradient(red, orange) !default; $color-secondary-gradient-color: linear-gradient(magenta, blue) !default; + +/* + * Responsive breakpoints + */ +$breakpoint-mobile-small: $screen__xxs !default; +$breakpoint-mobile-portrait: $screen__xs !default; +$breakpoint-mobile-landscape: $screen__s !default; +$breakpoint-tablet-portrait: $screen__m !default; +$breakpoint-tablet-landscape: $screen__l !default; +$breakpoint-desktop: $screen__xl !default; + /* * Fonts */ @@ -148,6 +159,7 @@ $button-default-border: 1px solid $color-boilerplate-blue !default; $button-default-border-radius: 3px !default; $button-default-color: $color-boilerplate-light-gray !default; $button-default-font-family: $font-default-font-family-primary !default; +$button-default-line-height: $font-default-font-line-height; $button-default-font-size: 1.4rem !default; $button-default-font-weight: 400 !default; $button-default-transition: all .34s ease-in-out !default; @@ -157,14 +169,15 @@ $button-default-text-transform: none !default; /* Button default states */ $button-default-hover-background-color: $color-boilerplate-orange !default; $button-default-hover-border: 1px solid $color-boilerplate-blue !default; -$button-default-hover-color: $color-boilerplate-gray !default; +$button-default-hover-color: white !default; /* Button primary */ $button-primary-background-color: $button-default-background-color !default; $button-primary-border: $button-default-border !default; $button-primary-border-radius: $button-default-border-radius; $button-primary-color: $button-default-color !default; -$button-primary-font-family: $button-default-font-family !default; +$button-primary-font-family: $font-default-font-family-primary !default; +$button-primary-line-height: $font-default-font-line-height; $button-primary-font-weight: 600 !default; $button-primary-font-size: $button-default-font-size !default; $button-primary-transition: $button-default-transition !default; diff --git a/src/scss/boilerplate/magento-ui/_actions-toolbar.scss b/src/scss/boilerplate/magento-ui/_actions-toolbar.scss new file mode 100755 index 0000000..3400b1e --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_actions-toolbar.scss @@ -0,0 +1,131 @@ +// +// Actions-toolbar +// _____________________________________________ + +@mixin lib-actions-toolbar( + $_actions-toolbar-actions-position : $actions-toolbar-actions__position, + $_actions-toolbar-actions-reverse : $actions-toolbar-actions__reverse, + $_actions-toolbar-margin : $actions-toolbar__margin, + $_actions-toolbar-padding : $actions-toolbar__padding, + $_actions-toolbar-actions-margin : $actions-toolbar-actions__margin, + $_actions-toolbar-primary-actions-margin : $actions-toolbar-actions-primary__margin, + $_actions-toolbar-secondary-actions-margin : $actions-toolbar-actions-secondary__margin, + $_actions-toolbar-actions-links-margin-top : $actions-toolbar-actions-links__margin-top, + $_actions-toolbar-primary-actions-links-margin-top : $actions-toolbar-actions-links-primary__margin-top, + $_actions-toolbar-secondary-actions-links-margin-top : $actions-toolbar-actions-links-secondary__margin-top +) { + @include lib-clearfix(); + @include lib-css(margin, $_actions-toolbar-margin); + @include lib-css(padding, $_actions-toolbar-padding); + @include _lib-actions-toolbar-align($_actions-toolbar-actions-position); + @include _lib-actions-toolbar-floats($_actions-toolbar-actions-position, $_actions-toolbar-actions-reverse); + .primary, + .secondary { + display: inline-block; + + .action { + @include lib-css(margin, $_actions-toolbar-actions-margin); + } + + a.action { + display: inline-block; + @include lib-css(margin-top, $_actions-toolbar-actions-links-margin-top); + } + } + + .primary { + .action { + @include lib-css(margin, $_actions-toolbar-primary-actions-margin); + } + + a.action { + @include lib-css(margin-top, $_actions-toolbar-primary-actions-links-margin-top); + } + } + + .secondary { + .action { + @include lib-css(margin, $_actions-toolbar-secondary-actions-margin); + } + + a.action { + @include lib-css(margin-top, $_actions-toolbar-secondary-actions-links-margin-top); + } + } +} + +// +// Actions-toolbar-clear-floats +// --------------------------------------------- + +@mixin lib-actions-toolbar-clear-floats() { + .primary, + .secondary { + display: block; + float: none; + } +} + +// +// Internal use mixins +// --------------------------------------------- + +@mixin _lib-actions-toolbar-align($_actions-toolbar-actions-position) { + @if $_actions-toolbar-actions-position != justify { + @include lib-css(text-align, $_actions-toolbar-actions-position); + } +} + +@mixin _lib-actions-toolbar-floats( + $_actions-toolbar-actions-position, + $_actions-toolbar-actions-reverse +) { + @if $_actions-toolbar-actions-position == justify { + @if $_actions-toolbar-actions-reverse { + .primary { + float: right; + } + .secondary { + float: left; + } + } + @else { + .primary { + float: left; + } + .secondary { + float: right; + } + } + } + @else if $_actions-toolbar-actions-position == left { + @if $_actions-toolbar-actions-reverse { + .secondary { + float: left; + } + } + @else { + .primary { + float: left; + } + } + } + @else if $_actions-toolbar-actions-position == right { + @if $_actions-toolbar-actions-reverse { + .primary { + float: right; + } + } + @else { + .secondary { + float: right; + } + } + } + @else if $_actions-toolbar-actions-position == center { + .primary, + .secondary { + vertical-align: top; + } + } +} diff --git a/src/scss/boilerplate/magento-ui/_breadcrumbs.scss b/src/scss/boilerplate/magento-ui/_breadcrumbs.scss new file mode 100755 index 0000000..7d34f7f --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_breadcrumbs.scss @@ -0,0 +1,175 @@ +// +// Breadcrumbs +// _____________________________________________ + +@mixin lib-breadcrumbs( + $_breadcrumbs-font-size : $breadcrumbs__font-size, + $_breadcrumbs-display : $breadcrumbs__display, + $_breadcrumbs-container-margin : $breadcrumbs__container-margin, + $_breadcrumbs-padding : $breadcrumbs__padding, + + // Breadcrumbs separating symbol + $_breadcrumbs-separator-symbol : $breadcrumbs-separator__symbol, + $_breadcrumbs-separator-color : $breadcrumbs-separator__color, + + // Use icon as a separating symbol + $_breadcrumbs-icon-use : $breadcrumbs-icon__use, + $_breadcrumbs-icon-font-content : $breadcrumbs-icon__font-content, + $_icon-font : $breadcrumbs-icon__font, + $_icon-font-size : $breadcrumbs-icon__font-size, + $_icon-font-line-height : $breadcrumbs-icon__font-line-height, + $_icon-font-color : $breadcrumbs-icon__font-color, + $_icon-font-margin : $breadcrumbs-icon__font-margin, + $_icon-font-vertical-align : $breadcrumbs-icon__font-vertical-align, + + // Breadcrumbs current + $_breadcrumbs-current-color : $breadcrumbs-current__color, + $_breadcrumbs-current-font-weight : $breadcrumbs-current__font-weight, + $_breadcrumbs-current-background : $breadcrumbs-current__background, + $_breadcrumbs-current-border : $breadcrumbs-current__border, + $_breadcrumbs-current-gradient : $breadcrumbs-current__gradient, + $_breadcrumbs-current-gradient-direction : $breadcrumbs-current__gradient-direction, + $_breadcrumbs-current-gradient-color-start : $breadcrumbs-current__gradient-color-start, + $_breadcrumbs-current-gradient-color-end : $breadcrumbs-current__gradient-color-end, + + // Breadcrumbs link - gradient + $_breadcrumbs-link-gradient : $breadcrumbs-link__gradient, + $_breadcrumbs-link-gradient-direction : $breadcrumbs-link__gradient-direction, + + // Breadcrumbs link color - default + $_breadcrumbs-link-color : $breadcrumbs-link__color, + $_breadcrumbs-link-background : $breadcrumbs-link__background, + $_breadcrumbs-link-border : $breadcrumbs-link__border, + $_breadcrumbs-link-text-decoration : $breadcrumbs-link__text-decoration, + $_breadcrumbs-link-gradient-color-start : $breadcrumbs-link__gradient-color-start, + $_breadcrumbs-link-gradient-color-end : $breadcrumbs-link__gradient-color-end, + + // Breadcrumbs link - visited + $_breadcrumbs-link-color-visited : $breadcrumbs-link__visited__color, + $_breadcrumbs-link-background-visited : $breadcrumbs-link__visited__background, + $_breadcrumbs-link-border-visited : $breadcrumbs-link__visited__border, + $_breadcrumbs-link-text-decoration-visited : $breadcrumbs-link__visited__text-decoration, + $_breadcrumbs-link-gradient-color-start-visited : $breadcrumbs-link__visited__gradient-color-start, + $_breadcrumbs-link-gradient-color-end-visited : $breadcrumbs-link__visited__gradient-color-end, + + // Breadcrumbs link - hover + $_breadcrumbs-link-color-hover : $breadcrumbs-link__hover__color, + $_breadcrumbs-link-background-hover : $breadcrumbs-link__hover__background, + $_breadcrumbs-link-border-hover : $breadcrumbs-link__hover__border, + $_breadcrumbs-link-text-decoration-hover : $breadcrumbs-link__hover__text-decoration, + $_breadcrumbs-link-gradient-color-start-hover : $breadcrumbs-link__hover__gradient-color-start, + $_breadcrumbs-link-gradient-color-end-hover : $breadcrumbs-link__hover__gradient-color-end, + + // Breadcrumbs link - active + $_breadcrumbs-link-color-active : $breadcrumbs-link__active__color, + $_breadcrumbs-link-background-active : $breadcrumbs-link__active__background, + $_breadcrumbs-link-border-active : $breadcrumbs-link__active__border, + $_breadcrumbs-link-text-decoration-active : $breadcrumbs-link__active__text-decoration, + $_breadcrumbs-link-gradient-color-start-active : $breadcrumbs-link__active__gradient-color-start, + $_breadcrumbs-link-gradient-color-end-active : $breadcrumbs-link__active__gradient-color-end +) { + @include lib-css(margin, $_breadcrumbs-container-margin); + .items { + @include lib-font-size($_breadcrumbs-font-size); + @include lib-css(color, $_breadcrumbs-current-color); + @include lib-list-inline(); + } + + .item { + margin: 0; + } + + a { + @include lib-css(background, $_breadcrumbs-link-background); + @include lib-background-gradient( + $_breadcrumbs-link-gradient-color-start, + $_breadcrumbs-link-gradient-color-end, + $_breadcrumbs-link-gradient-direction, + $_breadcrumbs-link-gradient + ); + @include lib-css(border, $_breadcrumbs-link-border); + @include lib-css(color, $_breadcrumbs-link-color); + @include lib-css(display, $_breadcrumbs-display); + @include lib-css(padding, $_breadcrumbs-padding); + @include lib-css(text-decoration, $_breadcrumbs-link-text-decoration); + + &:visited { + @include lib-css(background, $_breadcrumbs-link-background-visited); + @include lib-background-gradient( + $_breadcrumbs-link-gradient-color-start-visited, + $_breadcrumbs-link-gradient-color-end-visited, + $_breadcrumbs-link-gradient-direction, + $_breadcrumbs-link-gradient + ); + @include lib-css(border, $_breadcrumbs-link-border-visited); + @include lib-css(color, $_breadcrumbs-link-color-visited); + @include lib-css(text-decoration, $_breadcrumbs-link-text-decoration-visited); + } + + &:hover { + @include lib-css(background, $_breadcrumbs-link-background-hover); + @include lib-background-gradient( + $_breadcrumbs-link-gradient-color-start-hover, + $_breadcrumbs-link-gradient-color-end-hover, + $_breadcrumbs-link-gradient-direction, + $_breadcrumbs-link-gradient + ); + @include lib-css(border, $_breadcrumbs-link-border-hover); + @include lib-css(color, $_breadcrumbs-link-color-hover); + @include lib-css(text-decoration, $_breadcrumbs-link-text-decoration-hover); + } + + &:active { + @include lib-css(background, $_breadcrumbs-link-background-active); + @include lib-background-gradient( + $_breadcrumbs-link-gradient-color-start-active, + $_breadcrumbs-link-gradient-color-end-active, + $_breadcrumbs-link-gradient-direction, + $_breadcrumbs-link-gradient + ); + @include lib-css(border, $_breadcrumbs-link-border-active); + @include lib-css(color, $_breadcrumbs-link-color-active); + @include lib-css(text-decoration, $_breadcrumbs-link-text-decoration-active); + } + } + + strong { + @include lib-css(background, $_breadcrumbs-current-background); + @include lib-background-gradient( + $_breadcrumbs-current-gradient-color-start, + $_breadcrumbs-current-gradient-color-end, + $_breadcrumbs-current-gradient-direction, + $_breadcrumbs-current-gradient + ); + @include lib-css(border, $_breadcrumbs-current-border); + @include lib-css(display, $_breadcrumbs-display); + @include lib-css(font-weight, $_breadcrumbs-current-font-weight); + @include lib-css(padding, $_breadcrumbs-padding); + } + + // Insert separating symbol to "content" + @if $_breadcrumbs-separator-symbol != '' and $_breadcrumbs-separator-symbol != false { + .item:not(:last-child) { + &:after { + @include lib-css(color, $_breadcrumbs-separator-color); + @include lib-css(content, $_breadcrumbs-separator-symbol); + } + } + } + + // Use font icon as a separating symbol + @if $_breadcrumbs-icon-use { + .item:not(:last-child) { + @include lib-icon-font( + $_icon-font-content: $_breadcrumbs-icon-font-content, + $_icon-font: $_icon-font, + $_icon-font-size: $_icon-font-size, + $_icon-font-line-height: $_icon-font-line-height, + $_icon-font-color: $_icon-font-color, + $_icon-font-margin: $_icon-font-margin, + $_icon-font-vertical-align: $_icon-font-vertical-align, + $_icon-font-position: after + ); + } + } +} diff --git a/src/scss/boilerplate/magento-ui/_buttons.scss b/src/scss/boilerplate/magento-ui/_buttons.scss new file mode 100755 index 0000000..a3f4f78 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_buttons.scss @@ -0,0 +1,434 @@ +// +// Buttons +// _____________________________________________ + +// +// Button with solid or pictire background +// --------------------------------------------- + +@mixin lib-button( + $_button-font-family : $button__font-family, + $_button-font-size : $button__font-size, + $_button-font-weight : $button__font-weight, + $_button-cursor : $button__cursor, + $_button-display : $button__display, + $_button-disabled-opacity : $button__disabled__opacity, + $_button-line-height : $button__line-height, + $_button-width : $button__width, + $_button-margin : $button__margin, + $_button-padding : $button__padding, + $_button-color : $button__color, + $_button-background : $button__background, + $_button-border : $button__border, + + $_button-color-hover : $button__hover__color, + $_button-background-hover : $button__hover__background, + $_button-border-hover : $button__hover__border, + $_button-color-active : $button__active__color, + $_button-background-active : $button__active__background, + $_button-border-active : $button__active__border, + + $_button-gradient : $button__gradient, + $_button-gradient-direction : $button__gradient-direction, + $_button-gradient-color-start : $button__gradient-color-start, + $_button-gradient-color-end : $button__gradient-color-end, + $_button-gradient-color-start-hover : $button__hover__gradient-color-start, + $_button-gradient-color-end-hover : $button__hover__gradient-color-end, + $_button-gradient-color-start-active : $button__active__gradient-color-start, + $_button-gradient-color-end-active : $button__active__gradient-color-end, + + $_button-icon-use : $button-icon__use, + $_button-font-content : $button-icon__content, + $_button-icon-font : $button-icon__font, + $_button-icon-font-size : $button-icon__font-size, + $_button-icon-font-line-height : $button-icon__line-height, + $_button-icon-font-color : $button-icon__color, + $_button-icon-font-color-hover : $button-icon__hover__font-color, + $_button-icon-font-color-active : $button-icon__active__font-color, + $_button-icon-font-margin : $button-icon__margin, + $_button-icon-font-vertical-align : $button-icon__vertical-align, + $_button-icon-font-position : $button-icon__position, + $_button-icon-font-text-hide : $button-icon__text-hide +) { + background-image: none; // Reset unusual Firefox-on-Android default style + @include lib-css(background, $_button-background); + @include lib-background-gradient( + $_button-gradient-color-start, + $_button-gradient-color-end, + $_button-gradient-direction, + $_button-gradient + ); + @include lib-css(border, $_button-border); + @include lib-css(color, $_button-color); + @include lib-css(cursor, $_button-cursor); + @include lib-css(display, $_button-display); + @include lib-css(font-family, $_button-font-family); + @include lib-css(font-weight, $_button-font-weight); + @include lib-css(margin, $_button-margin); + @include lib-css(padding, $_button-padding); + @include lib-css(width, $_button-width); + @include lib-font-size($_button-font-size); + @include lib-line-height($_button-line-height); + box-sizing: border-box; + vertical-align: middle; + + @include _lib-button-icon ( + $_button-icon-use : $_button-icon-use, + $_icon-font-content : $_button-font-content, + $_icon-font : $_button-icon-font, + $_icon-font-size : $_button-icon-font-size, + $_icon-font-line-height : $_button-icon-font-line-height, + $_icon-font-color : $_button-icon-font-color, + $_icon-font-color-hover : $_button-icon-font-color-hover, + $_icon-font-color-active : $_button-icon-font-color-active, + $_icon-font-margin : $_button-icon-font-margin, + $_icon-font-vertical-align : $_button-icon-font-vertical-align, + $_icon-font-position : $_button-icon-font-position, + $_icon-font-text-hide : $_button-icon-font-text-hide + ); + + &:focus, + &:active { + @include lib-css(background, $_button-background-active); + @include lib-background-gradient( + $_button-gradient-color-start-active, + $_button-gradient-color-end-active, + $_button-gradient-direction, + $_button-gradient + ); + @include lib-css(border, $_button-border-active); + @include lib-css(color, $_button-color-active); + } + + &:hover { + @include lib-css(background, $_button-background-hover); + @include lib-background-gradient( + $_button-gradient-color-start-hover, + $_button-gradient-color-end-hover, + $_button-gradient-direction, + $_button-gradient + ); + @include lib-css(border, $_button-border-hover); + @include lib-css(color, $_button-color-hover); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + @include lib-css(opacity, $_button-disabled-opacity); + cursor: default; + pointer-events: none; // Disabling of clicks + } +} + +// +// Button size +// --------------------------------------------- + +@mixin lib-button-size( + $_button-line-height : $button__line-height, + $_button-padding : $button__padding +) { + @include lib-line-height($_button-line-height); + @include lib-css(padding, $_button-padding); +} + +// +// Large buttons +// --------------------------------------------- + +@mixin lib-button-l( + $_button-l-font-size : $button__font-size__l, + $_button-l-height : $button__line-height__l, + $_button-l-padding : $button__padding__l +) { + @include lib-button-size( + $_button-line-height : $_button-l-height, + $_button-padding : $_button-l-padding + ); + @include lib-font-size($_button-l-font-size); +} + +// +// Small buttons +// --------------------------------------------- + +@mixin lib-button-s( + $_button-s-font-size : $button__font-size__s, + $_button-s-height : $button__line-height__s, + $_button-s-padding : $button__padding__s +) { + @include lib-button-size( + $_button-line-height : $_button-s-height, + $_button-padding : $_button-s-padding + ); + @include lib-font-size($_button-s-font-size); +} + +// +// Link as button +// --------------------------------------------- + +@mixin lib-link-as-button() { + @include lib-css(display, $button__display); + text-decoration: none; + + &:hover, + &:active, + &:focus { + text-decoration: none; + } +} + +// +// Button as link +// --------------------------------------------- + +@mixin lib-button-as-link( + $_link-color : $link__color, + $_link-color-hover : $link__hover__color, + $_line-height : $line-height__base, + $_disabled_opacity : $button__disabled__opacity, + $_margin : 0, + $_padding : 0 +) { + @include lib-css(line-height, $_line-height); + @include lib-css(margin, $_margin); + @include lib-css(padding, $_padding); + @include lib-link(); + background: none; + border: 0; + display: inline; + + &:hover { + @include lib-css(color, $_link-color-hover); + } + + &:hover, + &:active, + &:focus { + background: none; + border: 0; + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + @include lib-css(color, $_link-color); + @include lib-css(opacity, $_disabled_opacity); + cursor: default; + pointer-events: none; // Disabling of clicks + text-decoration: underline; + } +} + +// +// Responsive +// --------------------------------------------- + +@mixin lib-button-responsive() { + width: 100%; +} + +// +// Button reset +// --------------------------------------------- + +@mixin lib-button-reset() { + background-image: none; // Reset unusual Firefox-on-Android default style + background: none; + -moz-box-sizing: content-box; // Hack: fix Firefox button line-height problem + border: 0; + box-shadow: none; + line-height: inherit; + margin: 0; + padding: 0; + text-decoration: none; + text-shadow: none; + @include lib-css(font-weight, $font-weight__regular); + + &:focus, + &:active { + background: none; + border: none; + } + + &:hover { + background: none; + border: none; + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + pointer-events: none; // Disabling of clicks + @include lib-css(opacity, $button__disabled__opacity); + } +} + +// +// Button primary +// --------------------------------------------- + +@mixin lib-button-primary( + $_button-line-height : $button-primary__line-height, + $_button-width : $button-primary__width, + $_button-margin : $button-primary__margin, + $_button-padding : $button-primary__padding, + $_button-color : $button-primary__color, + $_button-background : $button-primary__background, + $_button-border : $button-primary__border, + $_button-gradient-color-start : $button-primary__gradient-color-start, + $_button-gradient-color-end : $button-primary__gradient-color-end, + $_button-color-hover : $button-primary__hover__color, + $_button-background-hover : $button-primary__hover__background, + $_button-border-hover : $button-primary__hover__border, + $_button-gradient-color-start-hover : $button-primary__hover__gradient-color-start, + $_button-gradient-color-end-hover : $button-primary__hover__gradient-color-end, + $_button-color-active : $button-primary__active__color, + $_button-background-active : $button-primary__active__background, + $_button-border-active : $button-primary__active__border, + $_button-gradient-color-start-active : $button-primary__active__gradient-color-start, + $_button-gradient-color-end-active : $button-primary__active__gradient-color-end, + $_button-gradient : $button-primary__gradient, + $_button-gradient-direction : $button-primary__gradient-direction +) { + @include lib-button( + $_button-line-height : $_button-line-height, + $_button-width : $_button-width, + $_button-margin : $_button-margin, + $_button-padding : $_button-padding, + $_button-color : $_button-color, + $_button-background : $_button-background, + $_button-border : $_button-border, + $_button-color-hover : $_button-color-hover, + $_button-background-hover : $_button-background-hover, + $_button-border-hover : $_button-border-hover, + $_button-color-active : $_button-color-active, + $_button-background-active : $_button-background-active, + $_button-border-active : $_button-border-active, + $_button-gradient : $_button-gradient, + $_button-gradient-direction : $_button-gradient-direction, + $_button-gradient-color-start : $_button-gradient-color-start, + $_button-gradient-color-end : $_button-gradient-color-end, + $_button-gradient-color-start-hover : $_button-gradient-color-start-hover, + $_button-gradient-color-end-hover : $_button-gradient-color-end-hover, + $_button-gradient-color-start-active : $_button-gradient-color-start-active, + $_button-gradient-color-end-active : $_button-gradient-color-end-active + ); +} + +// +// Button revert secondary color +// --------------------------------------------- + +@mixin lib-button-revert-secondary-color( + $_button-color : $button__color, + $_button-background : $button__background, + $_button-border : $button__border, + + $_button-color-hover : $button__hover__color, + $_button-background-hover : $button__hover__background, + $_button-border-hover : $button__hover__border, + + $_button-color-active : $button__active__color, + $_button-background-active : $button__active__background, + $_button-border-active : $button__active__border +) { + @include lib-css(background, $_button-background); + @include lib-css(border, $_button-border); + @include lib-css(color, $_button-color); + + &:focus, + &:active { + @include lib-css(background, $_button-background-active); + @include lib-css(border, $_button-border-active); + @include lib-css(color, $_button-color-active); + } + + &:hover { + @include lib-css(background, $_button-background-hover); + @include lib-css(border, $_button-border-hover); + @include lib-css(color, $_button-color-hover); + } +} + +// +// Button revert secondary size +// --------------------------------------------- + +@mixin lib-button-revert-secondary-size( + $_button-font-size : $button__font-size, + $_button-line-height : $button__line-height, + $_button-padding : $button__padding +) { + @include lib-font-size($_button-font-size); + @include lib-button-size( + $_button-line-height : $_button-line-height, + $_button-padding : $_button-padding + ) +} + +// +// Inner buttons mixins +// --------------------------------------------- + +@mixin _lib-button-icon ( + $_button-icon-use : $button-icon__use, + $_icon-font-content : $button-icon__content, + $_icon-font : $button-icon__font, + $_icon-font-size : $button-icon__font-size, + $_icon-font-line-height : $button-icon__line-height, + $_icon-font-color : $button-icon__color, + $_icon-font-color-hover : $button-icon__hover__font-color, + $_icon-font-color-active : $button-icon__active__font-color, + $_icon-font-margin : $button-icon__margin, + $_icon-font-vertical-align : $button-icon__vertical-align, + $_icon-font-position : $button-icon__position, + $_icon-font-text-hide : $button-icon__text-hide +) { + @if $_button-icon-use { + @include lib-button-icon ( + $_icon-font-content : $_icon-font-content, + $_icon-font : $_icon-font, + $_icon-font-size : $_icon-font-size, + $_icon-font-line-height : $_icon-font-line-height, + $_icon-font-color : $_icon-font-color, + $_icon-font-color-hover : $_icon-font-color-hover, + $_icon-font-color-active : $_icon-font-color-active, + $_icon-font-margin : $_icon-font-margin, + $_icon-font-vertical-align: $_icon-font-vertical-align, + $_icon-font-position : $_icon-font-position, + $_icon-font-text-hide : $_icon-font-text-hide + ); + } +} + +@mixin lib-button-icon( + $_icon-font-content, + $_icon-font: $button-icon__font, + $_icon-font-size: $button-icon__font-size, + $_icon-font-line-height: $button-icon__line-height, + $_icon-font-color: $button-icon__color, + $_icon-font-color-hover: $button-icon__hover__font-color, + $_icon-font-color-active: $button-icon__active__font-color, + $_icon-font-margin: $button-icon__margin, + $_icon-font-vertical-align: $button-icon__vertical-align, + $_icon-font-position: $button-icon__position, + $_icon-font-text-hide: $button-icon__text-hide +) { + @include lib-icon-font( + $_icon-font-content: $_icon-font-content, + $_icon-font: $_icon-font, + $_icon-font-size: $_icon-font-size, + $_icon-font-line-height: $_icon-font-line-height, + $_icon-font-color: $_icon-font-color, + $_icon-font-color-hover: $_icon-font-color-hover, + $_icon-font-color-active: $_icon-font-color-active, + $_icon-font-margin: $_icon-font-margin, + $_icon-font-vertical-align: $_icon-font-vertical-align, + $_icon-font-position: $_icon-font-position, + $_icon-font-text-hide: $_icon-font-text-hide + ); +} diff --git a/src/scss/boilerplate/magento-ui/_dropdowns.scss b/src/scss/boilerplate/magento-ui/_dropdowns.scss new file mode 100755 index 0000000..0517b8f --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_dropdowns.scss @@ -0,0 +1,574 @@ +// +// Dropdowns +// _____________________________________________ + +// +// Simple dropdown +// --------------------------------------------- + +@mixin lib-dropdown( + $_toggle-selector : ".action.toggle", + $_options-selector : "ul.dropdown", + + $_dropdown-actions-padding : $dropdown-actions__padding, + $_dropdown-list-min-width : $dropdown-list__min-width, + $_dropdown-list-width : $dropdown-list__width, + $_dropdown-list-height : $dropdown-list__height, + $_dropdown-list-margin-top : $dropdown-list__margin-top, + $_dropdown-list-position-top : $dropdown-list__position-top, + $_dropdown-list-position-bottom : $dropdown-list__position-bottom, + $_dropdown-list-position-left : $dropdown-list__position-left, + $_dropdown-list-position-right : $dropdown-list__position-right, + $_dropdown-list-background : $dropdown-list__background, + $_dropdown-list-border : $dropdown-list__border, + $_dropdown-list-pointer : $dropdown-list__pointer, + $_dropdown-list-pointer-border : $dropdown-list-pointer__border, + $_dropdown-list-pointer-position : $dropdown-list-pointer__position, + $_dropdown-list-pointer-position-top : $dropdown-list-pointer__position-top, + $_dropdown-list-pointer-position-left-right : $dropdown-list-pointer__position-left-right, + $_dropdown-list-item-border : $dropdown-list-item__border, + $_dropdown-list-item-padding : $dropdown-list-item__padding, + $_dropdown-list-item-margin : $dropdown-list-item__margin, + $_dropdown-list-item-hover : $dropdown-list-item__hover, + $_dropdown-list-shadow : $dropdown-list__shadow, + $_dropdown-list-z-index : $dropdown-list__z-index, + + $_dropdown-toggle-icon-content : $dropdown-toggle-icon__content, + $_dropdown-toggle-active-icon-content : $dropdown-toggle-icon__active__content, + + $_icon-font : $dropdown-toggle-icon__font, + $_icon-font-size : $dropdown-toggle-icon__font-size, + $_icon-font-line-height : $dropdown-toggle-icon__font-line-height, + $_icon-font-color : $dropdown-toggle-icon__font-color, + $_icon-font-color-hover : $dropdown-toggle-icon__font-color-hover, + $_icon-font-color-active : $dropdown-toggle-icon__font-color-active, + $_icon-font-margin : $dropdown-toggle-icon__font-margin, + $_icon-font-position : $dropdown-toggle-icon__position, + $_icon-font-vertical-align : $dropdown-toggle-icon__font-vertical-align, + $_icon-font-text-hide : $dropdown-toggle-icon__text-hide +) { + @include lib-clearfix(); + display: inline-block; + position: relative; + + #{$_toggle-selector} { + @include lib-css(padding, $_dropdown-actions-padding); + cursor: pointer; + + @include _lib-dropdown-icon( + $_dropdown-toggle-icon-content, + $_dropdown-toggle-active-icon-content, + $_icon-font, + $_icon-font-size, + $_icon-font-line-height, + $_icon-font-color, + $_icon-font-color-hover, + $_icon-font-color-active, + $_icon-font-margin, + $_icon-font-vertical-align, + $_icon-font-position, + $_icon-font-text-hide + ); + } + + @include _lib-dropdown-styles( + $_options-selector, + $_dropdown-list-min-width, + $_dropdown-list-width, + $_dropdown-list-height, + $_dropdown-list-margin-top, + $_dropdown-list-background, + $_dropdown-list-border, + $_dropdown-list-z-index, + $_dropdown-list-shadow, + $_dropdown-list-item-padding, + $_dropdown-list-item-margin, + $_dropdown-list-item-border, + $_dropdown-list-item-hover, + $_dropdown-list-position-top, + $_dropdown-list-position-bottom, + $_dropdown-list-position-left, + $_dropdown-list-position-right, + $_dropdown-list-pointer, + $_dropdown-list-pointer-border, + $_dropdown-list-pointer-position, + $_dropdown-list-pointer-position-top, + $_dropdown-list-pointer-position-left-right + ); +} + +// +// Split dropdown +// --------------------------------------------- + +@mixin lib-dropdown-split( + $_toggle-selector : ".action.toggle", + $_options-selector : "ul.dropdown", + $_button-selector : ".action.split", + + $_dropdown-split-actions-padding : $dropdown-split-actions__padding, + $_dropdown-split-button-actions-padding : $dropdown-split-button__actions__padding, + $_dropdown-split-toggle-actions-padding : $dropdown-split-toggle__actions__padding, + $_dropdown-split-toggle-position : $dropdown-split-toggle__position, + $_dropdown-split-list-min-width : $dropdown-split-list__min-width, + $_dropdown-split-list-width : $dropdown-split-list__width, + $_dropdown-split-list-height : $dropdown-split-list__height, + $_dropdown-split-list-margin-top : $dropdown-split-list__margin-top, + $_dropdown-split-list-position-top : $dropdown-split-list__position-top, + $_dropdown-split-list-position-bottom : $dropdown-split-list__position-bottom, + $_dropdown-split-list-position-left : $dropdown-split-list__position-left, + $_dropdown-split-list-position-right : $dropdown-split-list__position-right, + $_dropdown-split-list-background : $dropdown-split-list__background, + $_dropdown-split-list-border : $dropdown-split-list__border, + $_dropdown-split-list-pointer : $dropdown-split-list__pointer, + $_dropdown-split-list-pointer-border : $dropdown-split-list__pointer-border, + $_dropdown-split-list-pointer-position : $dropdown-split-list__pointer-position, + $_dropdown-split-list-pointer-position-top : $dropdown-split-list__pointer-position-top, + $_dropdown-split-list-pointer-position-left-right : $dropdown-split-list__pointer-position-left-right, + $_dropdown-split-list-item-border : $dropdown-split-list__item-border, + $_dropdown-split-list-item-padding : $dropdown-split-list__item-padding, + $_dropdown-split-list-item-margin : $dropdown-split-list__item-margin, + $_dropdown-split-list-item-hover : $dropdown-split-list__item-hover, + $_dropdown-split-button-border-radius-fix : $dropdown-split-button__border-radius-fix, + $_dropdown-split-list-shadow : $dropdown-split-list__shadow, + $_dropdown-split-list-z-index : $dropdown-split-list__z-index, + + $_dropdown-split-toggle-icon-content : $dropdown-split-toggle-icon__content, + $_dropdown-split-toggle-active-icon-content : $dropdown-split-toggle-icon__active__content, + + $_icon-font : $dropdown-split-toggle-icon__font, + $_icon-font-size : $dropdown-split-toggle-icon__font-size, + $_icon-font-line-height : $dropdown-split-toggle-icon__font-line-height, + $_icon-font-color : $dropdown-split-toggle-icon__font-color, + $_icon-font-color-hover : $dropdown-split-toggle-icon__font-color-hover, + $_icon-font-color-active : $dropdown-split-toggle-icon__font-color-active, + $_icon-font-margin : $dropdown-split-toggle-icon__font-margin, + $_icon-font-vertical-align : $dropdown-split-toggle-icon__font-vertical-align, + $_icon-font-position : $dropdown-split-toggle-icon__position, + $_icon-font-text-hide : $dropdown-split-toggle-icon__text-hide +) { + @include lib-clearfix(); + display: inline-block; + position: relative; + + @include _lib-dropdown-split-toggle-position( + $_button-selector, + $_toggle-selector, + $_dropdown-split-toggle-position, + $_dropdown-split-button-border-radius-fix + ); + + #{$_button-selector} { + @include lib-css(padding, $_dropdown-split-button-actions-padding); + } + + #{$_toggle-selector} { + @include lib-css(padding, $_dropdown-split-toggle-actions-padding); + @include _lib-dropdown-split-icon( + $_dropdown-split-toggle-icon-content, + $_dropdown-split-toggle-active-icon-content, + $_icon-font, + $_icon-font-size, + $_icon-font-line-height, + $_icon-font-color, + $_icon-font-color-hover, + $_icon-font-color-active, + $_icon-font-margin, + $_icon-font-vertical-align, + $_icon-font-position, + $_icon-font-text-hide + ); + } + + @include _lib-dropdown-styles( + $_options-selector : $_options-selector, + $_dropdown-list-min-width : $_dropdown-split-list-min-width, + $_dropdown-list-width : $_dropdown-split-list-width, + $_dropdown-list-height : $_dropdown-split-list-height, + $_dropdown-list-margin-top : $_dropdown-split-list-margin-top, + $_dropdown-list-background : $_dropdown-split-list-background, + $_dropdown-list-border : $_dropdown-split-list-border, + $_dropdown-list-z-index : $_dropdown-split-list-z-index, + $_dropdown-list-shadow : $_dropdown-split-list-shadow, + $_dropdown-list-item-padding : $_dropdown-split-list-item-padding, + $_dropdown-list-item-margin : $_dropdown-split-list-item-margin, + $_dropdown-list-item-border : $_dropdown-split-list-item-border, + $_dropdown-list-item-hover : $_dropdown-split-list-item-hover, + $_dropdown-list-position-top : $_dropdown-split-list-position-top, + $_dropdown-list-position-bottom : $_dropdown-split-list-position-bottom, + $_dropdown-list-position-left : $_dropdown-split-list-position-left, + $_dropdown-list-position-right : $_dropdown-split-list-position-right, + $_dropdown-list-pointer : $_dropdown-split-list-pointer, + $_dropdown-list-pointer-border : $_dropdown-split-list-pointer-border, + $_dropdown-list-pointer-position : $_dropdown-split-list-pointer-position, + $_dropdown-list-pointer-position-top : $_dropdown-split-list-pointer-position-top, + $_dropdown-list-pointer-position-left-right : $_dropdown-split-list-pointer-position-left-right + ); +} + +// +// Internal use mixins +// --------------------------------------------- + +@mixin _lib-dropdown-styles( + $_options-selector, + $_dropdown-list-min-width, + $_dropdown-list-width, + $_dropdown-list-height, + $_dropdown-list-margin-top, + $_dropdown-list-background, + $_dropdown-list-border, + $_dropdown-list-z-index, + $_dropdown-list-shadow, + $_dropdown-list-item-padding, + $_dropdown-list-item-margin, + $_dropdown-list-item-border, + $_dropdown-list-item-hover, + $_dropdown-list-position-top, + $_dropdown-list-position-bottom, + $_dropdown-list-position-left, + $_dropdown-list-position-right, + $_dropdown-list-pointer, + $_dropdown-list-pointer-border, + $_dropdown-list-pointer-position, + $_dropdown-list-pointer-position-top, + $_dropdown-list-pointer-position-left-right +) { + #{$_options-selector} { + @include lib-list-reset-styles(); + @include lib-css(background, $_dropdown-list-background); + @include lib-css(border, $_dropdown-list-border); + @include lib-css(height, $_dropdown-list-height); + @include lib-css(margin-top, $_dropdown-list-margin-top); + @include lib-css(min-width, $_dropdown-list-min-width); + @include lib-css(width, $_dropdown-list-width); + @include lib-css(z-index, $_dropdown-list-z-index); + box-sizing: border-box; + display: none; + position: absolute; + + @include _lib-dropdown-list-position( + $_dropdown-list-position-top, + $_dropdown-list-position-bottom, + $_dropdown-list-position-left, + $_dropdown-list-position-right + ); + + @include _lib-dropdown-list-shadow($_dropdown-list-shadow); + + li { + @include lib-css(margin, $_dropdown-list-item-margin); + @include lib-css(padding, $_dropdown-list-item-padding); + + @include _lib-dropdown-list-item-border( + $_dropdown-list-item-border + ); + + &:hover { + @include lib-css(background, $_dropdown-list-item-hover); + cursor: pointer; + } + } + + @include _lib-dropdown-list-pointer( + $_dropdown-list-background, + $_dropdown-list-pointer, + $_dropdown-list-pointer-border, + $_dropdown-list-pointer-position, + $_dropdown-list-pointer-position-top, + $_dropdown-list-pointer-position-left-right + ); + + + } + + &.active { + overflow: visible; + + #{$_options-selector} { + display: block; + } + } +} + +// +// Dropdown list position +// --------------------------------------------- + +@mixin _lib-dropdown-list-position( + $_dropdown-list-position-top, + $_dropdown-list-position-bottom, + $_dropdown-list-position-left, + $_dropdown-list-position-right +) { + @if $_dropdown-list-position-top != false and $_dropdown-list-position-top != auto { + top: $_dropdown-list-position-top; + } + @if $_dropdown-list-position-bottom != false and $_dropdown-list-position-bottom != auto { + bottom: $_dropdown-list-position-bottom; + } + @if $_dropdown-list-position-left != false and $_dropdown-list-position-left != auto { + left: $_dropdown-list-position-left; + } + @if $_dropdown-list-position-right != false and $_dropdown-list-position-right != auto { + right: $_dropdown-list-position-right; + } +} + + +// +// Simple dropdown icon +// --------------------------------------------- + +@mixin _lib-dropdown-icon( + $_dropdown-toggle-icon-content, + $_dropdown-toggle-active-icon-content, + $_icon-font, + $_icon-font-size, + $_icon-font-line-height, + $_icon-font-color, + $_icon-font-color-hover, + $_icon-font-color-active, + $_icon-font-margin, + $_icon-font-vertical-align, + $_icon-font-position, + $_icon-font-text-hide +) { + @include lib-icon-font( + $_icon-font-content: $_dropdown-toggle-icon-content, + $_icon-font: $_icon-font, + $_icon-font-size: $_icon-font-size, + $_icon-font-line-height: $_icon-font-line-height, + $_icon-font-color: $_icon-font-color, + $_icon-font-color-hover: $_icon-font-color-hover, + $_icon-font-color-active: $_icon-font-color-active, + $_icon-font-margin: $_icon-font-margin, + $_icon-font-vertical-align: $_icon-font-vertical-align, + $_icon-font-position: $_icon-font-position, + $_icon-font-text-hide: $_icon-font-text-hide + ); + + &.active { + @include lib-icon-font( + $_icon-font-content: $_dropdown-toggle-active-icon-content, + $_icon-font: $_icon-font, + $_icon-font-size: $_icon-font-size, + $_icon-font-line-height: $_icon-font-line-height, + $_icon-font-color: $_icon-font-color, + $_icon-font-color-hover: $_icon-font-color-hover, + $_icon-font-color-active: $_icon-font-color-active, + $_icon-font-margin: $_icon-font-margin, + $_icon-font-vertical-align: $_icon-font-vertical-align, + $_icon-font-position: $_icon-font-position, + $_icon-font-text-hide: $_icon-font-text-hide + ); + } +} + +// +// Split dropdowns +// --------------------------------------------- + +// Split dropdown icon +@mixin _lib-dropdown-split-icon( + $_dropdown-toggle-icon-content, + $_dropdown-toggle-active-icon-content, + $_icon-font, + $_icon-font-size, + $_icon-font-line-height, + $_icon-font-color, + $_icon-font-color-hover, + $_icon-font-color-active, + $_icon-font-margin, + $_icon-font-vertical-align, + $_icon-font-position, + $_icon-font-text-hide +) { + @include lib-button-icon( + $_icon-font-content: $_dropdown-toggle-icon-content, + $_icon-font: $_icon-font, + $_icon-font-size: $_icon-font-size, + $_icon-font-line-height: $_icon-font-line-height, + $_icon-font-color: $_icon-font-color, + $_icon-font-color-hover: $_icon-font-color-hover, + $_icon-font-color-active: $_icon-font-color-active, + $_icon-font-margin: $_icon-font-margin, + $_icon-font-vertical-align: $_icon-font-vertical-align, + $_icon-font-position: $_icon-font-position, + $_icon-font-text-hide: $_icon-font-text-hide + ); + + &.active { + @include lib-button-icon( + $_icon-font-content: $_dropdown-toggle-active-icon-content, + $_icon-font: $_icon-font, + $_icon-font-size: $_icon-font-size, + $_icon-font-line-height: $_icon-font-line-height, + $_icon-font-color: $_icon-font-color, + $_icon-font-color-hover: $_icon-font-color-hover, + $_icon-font-color-active: $_icon-font-color-active, + $_icon-font-margin: $_icon-font-margin, + $_icon-font-vertical-align: $_icon-font-vertical-align, + $_icon-font-position: $_icon-font-position, + $_icon-font-text-hide: $_icon-font-text-hide + ); + } +} + +@mixin _lib-dropdown-split-toggle-position( + $_button-selector, + $_toggle-selector, + $_dropdown-split-toggle-position, + $_dropdown-split-button-border-radius-fix +) { + @if $_dropdown-split-toggle-position == left { + #{$_button-selector} { + float: right; + margin: 0; + } + #{$_toggle-selector} { + float: left; + margin: 0; + } + @if $_dropdown-split-button-border-radius-fix { + button#{$_button-selector} { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + button + #{$_toggle-selector} { + border-bottom-right-radius: 0; + border-right: 0; + border-top-right-radius: 0; + } + } + } + @else if $_dropdown-split-toggle-position == right { + #{$_button-selector} { + float: left; + margin: 0; + } + #{$_toggle-selector} { + float: right; + margin: 0; + } + @if $_dropdown-split-button-border-radius-fix { + button#{$_button-selector} { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + button + #{$_toggle-selector} { + border-bottom-left-radius: 0; + border-left: 0; + border-top-left-radius: 0; + } + } + } +} + +// +// Dropdown show pointer +// --------------------------------------------- + +@mixin _lib-dropdown-list-pointer( + $_dropdown-list-background, + $_dropdown-list-pointer, + $_dropdown-list-pointer-border, + $_dropdown-list-pointer-position, + $_dropdown-list-pointer-position-top, + $_dropdown-list-pointer-position-left-right +) { + @if $_dropdown-list-pointer { + @include _lib-dropdown-pointer( + $_dropdown-list-background, + $_dropdown-list-pointer-border, + $_dropdown-list-pointer-position, + $_dropdown-list-pointer-position-top, + $_dropdown-list-pointer-position-left-right + ); + } +} + +@mixin _lib-dropdown-pointer( + $_dropdown-list-background, + $_dropdown-list-pointer-border, + $_dropdown-list-pointer-position, + $_dropdown-list-pointer-position-top, + $_dropdown-list-pointer-position-left-right +) { + @if $_dropdown-list-pointer-position == left { + @include _lib-dropdown-pointer-default( + $_dropdown-list-background, + $_dropdown-list-pointer-border + ); + + &:before { + @include lib-css(left, $_dropdown-list-pointer-position-left-right); + @include lib-css(top, $_dropdown-list-pointer-position-top); + } + + &:after { + @include lib-css(left, $_dropdown-list-pointer-position-left-right - 1); + @include lib-css(top, $_dropdown-list-pointer-position-top - 2); + } + } + @else if $_dropdown-list-pointer-position == right { + @include _lib-dropdown-pointer-default( + $_dropdown-list-background, + $_dropdown-list-pointer-border + ); + + &:before { + @include lib-css(right, $_dropdown-list-pointer-position-left-right); + @include lib-css(top, $_dropdown-list-pointer-position-top); + } + + &:after { + @include lib-css(right, $_dropdown-list-pointer-position-left-right - 1); + @include lib-css(top, $_dropdown-list-pointer-position-top - 2); + } + } +} + +@mixin _lib-dropdown-pointer-default( + $_dropdown-list-background, + $_dropdown-list-pointer-border +) { + &:before, + &:after { + border-bottom-style: solid; + content: ''; + display: block; + height: 0; + position: absolute; + width: 0; + } + + &:before { + border: 6px solid; + @include lib-css(border-color, transparent transparent $_dropdown-list-background transparent); + z-index: 99; + } + + &:after { + border: 7px solid; + @include lib-css(border-color, transparent transparent $_dropdown-list-pointer-border transparent); + z-index: 98; + } +} + +// Dropdown list item border != 0 +@mixin _lib-dropdown-list-item-border($_dropdown-list-item-border) { + @if $_dropdown-list-item-border != false and $_dropdown-list-item-border != 0 and $_dropdown-list-item-border != '' { + @include lib-css(border-top, $_dropdown-list-item-border); + &:first-child { + border: none; + } + } +} + +// Dropdown list shadow +@mixin _lib-dropdown-list-shadow($_dropdown-list-shadow) { + @include lib-css(box-shadow, $_dropdown-list-shadow); +} diff --git a/src/scss/boilerplate/magento-ui/_forms.scss b/src/scss/boilerplate/magento-ui/_forms.scss new file mode 100755 index 0000000..364da57 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_forms.scss @@ -0,0 +1,1224 @@ +// +// Forms +// _____________________________________________ + +@mixin lib-form-element-input( + $_type : $form-element-input-type, + $_background : null, + $_border : null, + $_border-radius : null, + $_height : null, + $_width : null, + $_padding : null, + $_margin : null, + $_vertical-align : null, + $_background-clip : null, + $_font-size : null, + $_color : null, + $_font-family : null, + $_font-weight : null, + $_line-height : null, + $_font-style : null, + $_placeholder-color : null, + $_placeholder-font-style : null, + $_disabled-background : null, + $_disabled-border : null, + $_disabled-opacity : null, + $_disabled-color : null, + $_disabled-font-style : null, + $_focus-background : null, + $_focus-border : null, + $_focus-color : null, + $_focus-font-style : null +) { + @if $_type == "input-text" { + $_background : $input-text__background !default; + $_background-clip : $input-text__background-clip !default; + $_border : $input-text__border !default; + $_border-radius : $input-text__border-radius !default; + $_color : $input-text__color !default; + $_disabled-background : $input-text__disabled__background !default; + $_disabled-border : $input-text__disabled__border !default; + $_disabled-color : $input-text__disabled__color !default; + $_disabled-font-style : $input-text__disabled__font-style !default; + $_disabled-opacity : $input-text__disabled__opacity !default; + $_focus-background : $input-text__focus__background !default; + $_focus-border : $input-text__focus__border !default; + $_focus-color : $input-text__focus__color !default; + $_focus-font-style : $input-text__focus__font-style !default; + $_font-family : $input-text__font-family !default; + $_font-size : $input-text__font-size !default; + $_font-style : $input-text__font-style !default; + $_font-weight : $input-text__font-weight !default; + $_height : $input-text__height !default; + $_line-height : $input-text__line-height !default; + $_margin : $input-text__margin !default; + $_padding : $input-text__padding !default; + $_placeholder-color : $input-text-placeholder__color !default; + $_placeholder-font-style : $input-text-placeholder__font-style !default; + $_vertical-align : $input-text__vertical-align !default; + $_width : $input-text__width !default; + } + + @if $_type == "select" { + $_background : $select__background !default; + $_background-clip : $select__background-clip !default; + $_border : $select__border !default; + $_border-radius : $select__border-radius !default; + $_color : $select__color !default; + $_disabled-background : $select__disabled__background !default; + $_disabled-border : $select__disabled__border !default; + $_disabled-color : $select__disabled__color !default; + $_disabled-font-style : $select__disabled__font-style !default; + $_disabled-opacity : $select__disabled__opacity !default; + $_focus-background : $select__focus__background !default; + $_focus-border : $select__focus__border !default; + $_focus-color : $select__focus__color !default; + $_focus-font-style : $select__focus__font-style !default; + $_font-family : $select__font-family !default; + $_font-size : $select__font-size !default; + $_font-style : $select__font-style !default; + $_font-weight : $select__font-weight !default; + $_height : $select__height !default; + $_line-height : $select__line-height !default; + $_margin : $select__margin !default; + $_padding : $select__padding !default; + $_placeholder-color : $select-placeholder__color !default; + $_placeholder-font-style : $select-placeholder__font-style !default; + $_vertical-align : $select__vertical-align !default; + $_width : $select__width !default; + } + + @if $_type == "textarea" { + $_background : $textarea__background !default; + $_background-clip : $textarea__background-clip !default; + $_border : $textarea__border !default; + $_border-radius : $textarea__border-radius !default; + $_color : $textarea__color !default; + $_disabled-background : $textarea__disabled__background !default; + $_disabled-border : $textarea__disabled__border !default; + $_disabled-color : $textarea__disabled__color !default; + $_disabled-font-style : $textarea__disabled__font-style !default; + $_disabled-opacity : $textarea__disabled__opacity !default; + $_focus-background : $textarea__focus__background !default; + $_focus-border : $textarea__focus__border !default; + $_focus-color : $textarea__focus__color !default; + $_focus-font-style : $textarea__focus__font-style !default; + $_font-family : $textarea__font-family !default; + $_font-size : $textarea__font-size !default; + $_font-style : $textarea__font-style !default; + $_font-weight : $textarea__font-weight !default; + $_height : $textarea__height !default; + $_line-height : $textarea__line-height !default; + $_margin : $textarea__margin !default; + $_padding : $textarea__padding !default; + $_placeholder-color : $textarea-placeholder__color !default; + $_placeholder-font-style : $textarea-placeholder__font-style !default; + $_vertical-align : $textarea__vertical-align !default; + $_width : $textarea__width !default; + } + + @if $_type == "input-radio" { + $_disabled-opacity : $input-radio__disabled__opacity !default; + $_margin : $input-radio__margin !default; + $_vertical-align : $input-radio__vertical-align !default; + } + + @if $_type == "input-checkbox" { + $_disabled-opacity : $input-checkbox__disabled__opacity !default; + $_margin : $input-checkbox__margin !default; + $_vertical-align : $input-checkbox__vertical-align !default; + } + + @include lib-css(background, $_background); + @include lib-css(background-clip, $_background-clip); + @include lib-css(border, $_border); + @include lib-css(border-radius, $_border-radius); + @include lib-css(color, $_color); + @include lib-css(font-family, $_font-family); + @include lib-css(font-size, $_font-size); + @include lib-css(font-style, $_font-style); + @include lib-css(font-weight, $_font-weight); + @include lib-css(height, $_height); + @include lib-css(line-height, $_line-height); + @include lib-css(margin, $_margin); + @include lib-css(padding, $_padding); + @include lib-css(vertical-align, $_vertical-align); + @include lib-css(width, $_width); + box-sizing: border-box; + + @include _lib-form-element-focus( + $_background, + $_focus-background, + $_border, + $_focus-border, + $_color, + $_focus-color, + $_font-style, + $_focus-font-style + ); + + @include _lib-form-element-disabled( + $_background, + $_disabled-background, + $_border, + $_disabled-border, + $_color, + $_disabled-color, + $_font-style, + $_disabled-font-style, + $_disabled-opacity + ); + + @include _lib-form-element-placeholder( + $_type, + $_placeholder-color, + $_font-style, + $_placeholder-font-style + ); +} + +@mixin lib-form-element-choice( + $_type : $form-element-choice__type, + $_vertical-align : null, + $_margin : null, + $_disabled-opacity : null +) { + @if $_type == "radio" { + $_vertical-align : $radio__vertical-align !default; + $_margin : $radio__margin !default; + $_disabled-opacity : $radio__disabled__opacity !default; + } + + @if $_type == "checkbox" { + $_vertical-align : $checkbox__vertical-align !default; + $_margin : $checkbox__margin !default; + $_disabled-opacity : $checkbox__disabled__opacity !default; + } + + @include lib-css(margin, $_margin); + @include lib-css(vertical-align, $_vertical-align); + + &:disabled { + @include _lib-form-element-add-opacity($_disabled-opacity); + } +} + +@mixin lib-form-element-number-reset() { + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; + } + + -moz-appearance: textfield; +} + +@mixin lib-form-element-search-reset() { + -webkit-appearance: none; + &::-webkit-search-cancel-button, + &::-webkit-search-decoration, + &::-webkit-search-results-button, + &::-webkit-search-results-decoration { + -webkit-appearance: none; + } +} + +@mixin lib-form-element-textarea-resize($_textarea-resize: $textarea__resize) { + @include lib-css(resize, $_textarea-resize); +} + +@mixin lib-form-element-color( + $_border-color : null, + $_background : null, + $_color : null, + $_focus-border-color : null, + $_focus-background : null, + $_focus-color : null, + $_disabled-border-color : null, + $_disabled-background : null, + $_disabled-color : null, + $_placeholder-color : null +) { + @include lib-css(background, $_background); + @include lib-css(border-color, $_border-color); + @include lib-css(color, $_color); + + &:focus { + @include _lib-form-element-state-add-border-color($_focus-border-color, $_border-color); + @include _lib-form-element-state-add-background($_focus-background, $_background); + @include _lib-form-element-state-add-font-color($_focus-color, $_color); + } + + &:disabled { + @include _lib-form-element-state-add-border-color($_disabled-border-color, $_border-color); + @include _lib-form-element-state-add-background($_disabled-background, $_background); + @include _lib-form-element-state-add-font-color($_disabled-color, $_color); + } + + &::-moz-placeholder { + @include lib-css(color, $_placeholder-color); + } + + &::-webkit-input-placeholder { + @include lib-css(color, $_placeholder-color); + } + + &:-ms-input-placeholder { + @include lib-css(color, $_placeholder-color); + } +} + +@mixin lib-form-validation( + $_element-color-error : $form-element-validation__color-error, + $_element-color-valid : $form-element-validation__color-valid, + $_element-border-color-error : $form-element-validation__border-error, + $_element-border-color-valid : $form-element-validation__border-valid, + $_element-background-error : $form-element-validation__background-error, + $_element-background-valid : $form-element-validation__background-valid +) { + &.mage-error { + @include lib-form-element-color( + $_border-color : $_element-border-color-error, + $_background : $_element-background-error, + $_color : $_element-color-error + ); + } + + &.valid { + @include lib-form-element-color( + $_border-color : $_element-border-color-valid, + $_background : $_element-background-valid, + $_color : $_element-color-valid + ); + } +} + +@mixin lib-form-validation-note( + $_note-color : $form-validation-note__color-error, + $_note-font-size : $form-validation-note__font-size, + $_note-font-family : $form-validation-note__font-family, + $_note-font-style : $form-validation-note__font-style, + $_note-font-weight : $form-validation-note__font-weight, + $_note-line-height : $form-validation-note__line-height, + $_note-margin : $form-validation-note__margin, + $_note-padding : $form-validation-note__padding, + $_note-icon-use : $form-validation-note-icon__use, + + $_note-icon-font-content : $form-validation-note-icon__font-content, + $_note-icon-font : $form-validation-note-icon__font, + $_note-icon-font-size : $form-validation-note-icon__font-size, + $_note-icon-font-line-height : $form-validation-note-icon__font-line-height, + $_note-icon-font-color : $form-validation-note-icon__font-color, + $_note-icon-font-color-hover : $form-validation-note-icon__font-color-hover, + $_note-icon-font-color-active : $form-validation-note-icon__font-color-active, + $_note-icon-font-margin : $form-validation-note-icon__font-margin, + $_note-icon-font-vertical-align : $form-validation-note-icon__font-vertical-align, + $_note-icon-font-position : $form-validation-note-icon__font-position, + $_note-icon-font-text-hide : $form-validation-note-icon__font-text-hide +) { + @include lib-typography( + $_font-size : $_note-font-size, + $_color : $_note-color, + $_font-family : $_note-font-family, + $_font-weight : $_note-font-weight, + $_line-height : $_note-line-height, + $_font-style : $_note-font-style + ); + @include _lib-form-validation-icon( + $_note-icon-use, + $_note-icon-font-content, + $_note-icon-font, + $_note-icon-font-size, + $_note-icon-font-line-height, + $_note-icon-font-color, + $_note-icon-font-color-hover, + $_note-icon-font-color-active, + $_note-icon-font-margin, + $_note-icon-font-vertical-align, + $_note-icon-font-position, + $_note-icon-font-text-hide + ); +} + +@mixin lib-form-validation-color( + $_element-border-color-error : null, + $_element-background-error : null, + $_element-color-error : null, + $_element-border-color-valid : null, + $_element-background-valid : null, + $_element-color-valid : null +) { + &.mage-error { + @include lib-form-element-color( + $_border-color : $_element-border-color-error, + $_background : $_element-background-error, + $_color : $_element-color-error + ); + } + + &.valid { + @include lib-form-element-color( + $_border-color : $_element-border-color-valid, + $_background : $_element-background-valid, + $_color : $_element-color-valid + ); + } +} + +@mixin lib-form-element-all() { + input[type="text"], + input[type="password"], + input[type="url"], + input[type="tel"], + input[type="search"], + input[type="number"], + input[type="datetime"], + input[type="email"] { + @include lib-form-element-input($_type: input-text); + } + + input[type="number"] { + @include lib-form-element-number-reset(); + } + + input[type="search"] { + @include lib-form-element-search-reset(); + } + + select { + @include lib-form-element-input($_type: select); + } + + select[multiple="multiple"] { + @include lib-css(height, auto); + background-image: none; + } + + textarea { + @include lib-form-element-input($_type: textarea); + @include lib-form-element-textarea-resize(); + } + + input[type="checkbox"] { + @include lib-form-element-choice($_type: input-checkbox); + } + + input[type="radio"] { + @include lib-form-element-choice($_type: input-radio); + } + + input, + select, + textarea { + @include lib-form-validation(); + } + + div.mage-error[generated] { + @include lib-form-validation-note(); + } + + input[type="button"], + input[type="reset"], + input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; + } + + input::-moz-focus-inner { + border: 0; + padding: 0; + } +} + +// +// Internal use mixins +// --------------------------------------------- + +@mixin _lib-form-validation-icon( + $_note-icon-use, + $_note-icon-font-content, + $_note-icon-font, + $_note-icon-font-size, + $_note-icon-font-line-height, + $_note-icon-font-color, + $_note-icon-font-color-hover, + $_note-icon-font-color-active, + $_note-icon-font-margin, + $_note-icon-font-vertical-align, + $_note-icon-font-position, + $_note-icon-font-text-hide +) { + @if $_note-icon-use { + @include lib-icon-font( + $_icon-font-content : $_note-icon-font-content, + $_icon-font : $_note-icon-font, + $_icon-font-size : $_note-icon-font-size, + $_icon-font-line-height : $_note-icon-font-line-height, + $_icon-font-color : $_note-icon-font-color, + $_icon-font-color-hover : $_note-icon-font-color-hover, + $_icon-font-color-active : $_note-icon-font-color-active, + $_icon-font-margin : $_note-icon-font-margin, + $_icon-font-vertical-align : $_note-icon-font-vertical-align, + $_icon-font-position : $_note-icon-font-position, + $_icon-font-text-hide : $_note-icon-font-text-hide + ); + } +} + +@mixin _lib-form-element-add-opacity($_opacity) { + @if $_opacity != 1 { + @include lib-css(opacity, $_opacity); + } +} + +// Only for states :disabled, :focus, placeholder +@mixin _lib-form-element-focus( + $_background-default, + $_background-state, + $_border-default, + $_border-state, + $_color-default, + $_color-state, + $_font-style-default, + $_font-style-state +) { + &:focus { + @include _lib-form-element-state-add-background($_background-state, $_background-default); + @include _lib-form-element-state-add-border($_border-state, $_border-default); + @include _lib-form-element-state-add-font-color($_color-state, $_color-default); + @include _lib-form-element-state-add-font-style($_font-style-state, $_font-style-default); + } +} + +@mixin _lib-form-element-disabled( + $_background-default, + $_background-state, + $_border-default, + $_border-state, + $_color-default, + $_color-state, + $_font-style-default, + $_font-style-state, + $_opacity +) { + &:disabled { + @include _lib-form-element-add-opacity($_opacity); + @include _lib-form-element-state-add-background($_background-state, $_background-default); + @include _lib-form-element-state-add-border($_border-state, $_border-default); + @include _lib-form-element-state-add-font-color($_color-state, $_color-default); + @include _lib-form-element-state-add-font-style($_font-style-state, $_font-style-default); + } +} + +@mixin _lib-form-element-placeholder( + $_type, + $_color, + $_font-style-default, + $_font-style-state +) { + @if $_type != "select" { + &::-moz-placeholder { + @include lib-css(color, $_color); + @include _lib-form-element-state-add-font-style( + $_font-style-state, + $_font-style-default + ); + } + + &::-webkit-input-placeholder { + @include lib-css(color, $_color); + @include _lib-form-element-state-add-font-style( + $_font-style-state, + $_font-style-default + ); + } + + &:-ms-input-placeholder { + @include lib-css(color, $_color); + @include _lib-form-element-state-add-font-style( + $_font-style-state, + $_font-style-default + ); + } + } +} + +@mixin _lib-form-element-state-add-background( + $_background-state, + $_background-default +) { + @if $_background-state != $_background-default { + @include lib-css(background, $_background-state); + } +} + +@mixin _lib-form-element-state-add-border( + $_border-state, + $_border-default +) { + @if $_border-state != $_border-default { + @include lib-css(border, $_border-state); + } +} + +@mixin _lib-form-element-state-add-border-color( + $_border-state, + $_border-default +) { + @if $_border-state != $_border-default { + @include lib-css(border-color, $_border-state); + } +} + +@mixin _lib-form-element-state-add-font-style( + $_font-style-state, + $_font-style-default +) { + @if $_font-style-state != $_font-style-default { + @include lib-css(font-style, $_font-style-state); + } +} + +@mixin _lib-form-element-state-add-font-color( + $_color-state, + $_color-default +) { + @if $_color-state != $_color-default { + @include lib-css(color, $_color-state); + } +} + +@mixin lib-form-fieldset( + $_border : $form-fieldset__border, + $_margin : $form-fieldset__margin, + $_padding : $form-fieldset__padding, + $_legend-color : $form-fieldset-legend__color, + $_legend-font-size : $form-fieldset-legend__font-size, + $_legend-font-family : $form-fieldset-legend__font-family, + $_legend-font-weight : $form-fieldset-legend__font-weight, + $_legend-font-style : $form-fieldset-legend__font-style, + $_legend-line-height : $form-fieldset-legend__line-height, + $_legend-margin : $form-fieldset-legend__margin, + $_legend-padding : $form-fieldset-legend__padding, + $_legend-width : $form-fieldset-legend__width +) { + @include lib-css(border, $_border); + @include lib-css(margin, $_margin); + @include lib-css(padding, $_padding); + letter-spacing: -0.31em; + + > * { + letter-spacing: normal; + } + + > .legend { + @include lib-css(margin, $_legend-margin); + @include lib-css(padding, $_legend-padding); + @include lib-css(width, $_legend-width); + box-sizing: border-box; + float: left; + + @include lib-typography( + $_font-size : $_legend-font-size, + $_color : $_legend-color, + $_font-family : $_legend-font-family, + $_font-weight : $_legend-font-weight, + $_line-height : $_legend-line-height, + $_font-style : $_legend-font-style + ); + + & + br { + clear: both; + display: block; + height: 0; + overflow: hidden; + visibility: hidden; + } + } +} + +@mixin lib-form-field( + $_type : $form-field-type, + $_type-inline-margin : $form-field-type-inline__margin, + $_type-inline-label-margin : $form-field-type-label-inline__margin, + $_type-inline-label-padding : $form-field-type-label-inline__padding, + $_type-inline-label-align : $form-field-type-label-inline__align, + $_type-inline-label-width : $form-field-type-label-inline__width, + $_type-inline-control-width : $form-field-type-control-inline__width, + $_vertical-indent : $form-field__vertical-indent, + $_additional-vertical-indent : $form-field__additional-vertical-indent, + $_type-block-margin : $form-field-type-block__margin, + $_type-block-label-margin : $form-field-type-label-block__margin, + $_type-block-label-padding : $form-field-type-label-block__padding, + $_type-block-label-align : $form-field-type-label-block__align, + + $_border : $form-field__border, + $_column : $form-field-column, + $_column-padding : $form-field-column__padding, + $_column-number : $form-field-column__number, + + $_label-color : $form-field-label__color, + $_label-font-size : $form-field-label__font-size, + $_label-font-family : $form-field-label__font-family, + $_label-font-weight : $form-field-label__font-weight, + $_label-font-style : $form-field-label__font-style, + $_label-line-height : $form-field-label__line-height, + + $_label-asterisk-color : $form-field-label-asterisk__color, + $_label-asterisk-font-size : $form-field-label-asterisk__font-size, + $_label-asterisk-font-family : $form-field-label-asterisk__font-family, + $_label-asterisk-font-weight : $form-field-label-asterisk__font-weight, + $_label-asterisk-font-style : $form-field-label-asterisk__font-style, + $_label-asterisk-line-height : $form-field-label-asterisk__line-height, + $_label-asterisk-margin : $form-field-label-asterisk__margin, + + $_note-color : $form-field-note__color, + $_note-font-size : $form-field-note__font-size, + $_note-font-family : $form-field-note__font-family, + $_note-font-weight : $form-field-note__font-weight, + $_note-line-height : $form-field-note__line-height, + $_note-font-style : $form-field-note__font-style, + $_note-margin : $form-field-note__margin, + $_note-padding : $form-field-note__padding, + $_note-icon-font-content : $form-field-note-icon-font__content, + $_note-icon-font : $form-field-note-icon-font, + $_note-icon-font-size : $form-field-note-icon-font__size, + $_note-icon-font-line-height : $form-field-note-icon-font__line-height, + $_note-icon-font-color : $form-field-note-icon-font__color, + $_note-icon-font-color-hover : $form-field-note-icon-font__color-hover, + $_note-icon-font-color-active : $form-field-note-icon-font__color-active, + $_note-icon-font-margin : $form-field-note-icon-font__margin, + $_note-icon-font-vertical-align : $form-field-note-icon-font__vertical-align, + $_note-icon-font-position : $form-field-note-icon-font__position, + $_note-icon-font-text-hide : $form-field-note-icon-font__text-hide +) { + @include lib-css(border, $_border); + + @include lib-form-field-type( + $_type, + $_type-inline-margin, + $_type-inline-label-margin, + $_type-inline-label-padding, + $_type-inline-label-align, + $_type-inline-label-width, + $_type-inline-control-width, + $_vertical-indent, + $_type-block-margin, + $_type-block-label-margin, + $_type-block-label-padding, + $_type-block-label-align + ); + + &:last-child { + margin-bottom: 0; + } + + @include lib-form-field-column( + $_column, + $_column-padding, + $_column-number + ); + + > .label { + @include lib-typography( + $_font-size : $_label-font-size, + $_color : $_label-color, + $_font-family : $_label-font-family, + $_font-weight : $_label-font-weight, + $_line-height : $_label-line-height, + $_font-style : $_label-font-style + ); + & + br { + display: none; + } + } + + .choice { + input { + vertical-align: top; + } + } + + .fields.group { + @include lib-clearfix(); + .field { + box-sizing: border-box; + float: left; + } + + &.group-2 .field { + width: 50% !important; + } + + &.group-3 .field { + width: 33.3% !important; + } + + &.group-4 .field { + width: 25% !important; + } + + &.group-5 .field { + width: 20% !important; + } + } + + .addon { + @include lib-vendor-prefix-display(inline-flex); + @include lib-vendor-prefix-flex-wrap(nowrap); + padding: 0; + width: 100%; + + textarea, + select, + input { + @include lib-vendor-prefix-order(2); + @include lib-vendor-prefix-flex-basis(100%); + display: inline-block; + margin: 0; + width: auto; + } + + .addbefore, + .addafter { + @include lib-form-element-input($_type: input-text); + @include lib-vendor-prefix-order(3); + display: inline-block; + vertical-align: middle; + white-space: nowrap; + width: auto; + } + + .addbefore { + float: left; + @include lib-vendor-prefix-order(1); + } + } + + .additional { + @include lib-css(margin-top, $_additional-vertical-indent); + } + + @include _lib-form-field-required( + $_label-asterisk-color, + $_label-asterisk-font-size, + $_label-asterisk-font-family, + $_label-asterisk-font-weight, + $_label-asterisk-font-style, + $_label-asterisk-line-height, + $_label-asterisk-margin + ); + + @include _lib-form-field-note( + $_note-font-size, + $_note-color, + $_note-font-family, + $_note-font-weight, + $_note-line-height, + $_note-font-style, + $_note-margin, + $_note-padding, + + $_note-icon-font-content, + $_note-icon-font, + $_note-icon-font-size, + $_note-icon-font-line-height, + $_note-icon-font-color, + $_note-icon-font-color-hover, + $_note-icon-font-color-active, + $_note-icon-font-margin, + $_note-icon-font-vertical-align, + $_note-icon-font-position, + $_note-icon-font-text-hide + ); +} + +@mixin lib-form-field-type( + $_type : $form-field-type, + $_type-inline-margin : $form-field-type-inline__margin, + $_type-inline-label-margin : $form-field-type-label-inline__margin, + $_type-inline-label-padding : $form-field-type-label-inline__padding, + $_type-inline-label-align : $form-field-type-label-inline__align, + $_type-inline-label-width : $form-field-type-label-inline__width, + $_type-inline-control-width : $form-field-type-control-inline__width, + $_vertical-indent : $form-field__vertical-indent, + $_type-block-margin : $form-field-type-block__margin, + $_type-block-label-margin : $form-field-type-label-block__margin, + $_type-block-label-padding : $form-field-type-label-block__padding, + $_type-block-label-align : $form-field-type-label-block__align +) { + @if $_type == "inline" { + @include _lib-form-field-type-inline( + $_type-inline-margin, + $_type-inline-label-margin, + $_type-inline-label-padding, + $_type-inline-label-width, + $_type-inline-control-width, + $_type-inline-label-align, + $_vertical-indent + ); + } + @else if $_type == "block" { + @include _lib-form-field-type-block( + $_type-block-margin, + $_type-block-label-margin, + $_type-block-label-padding, + $_type-block-label-align + ); + } +} + +@mixin _lib-form-field-type-inline( + $_type-inline-margin, + $_type-inline-label-margin, + $_type-inline-label-padding, + $_type-inline-label-width, + $_type-inline-control-width, + $_type-inline-label-align, + $_vertical-indent +) { + @include lib-clearfix(); + @include lib-css(margin, $_type-inline-margin); + box-sizing: border-box; + + &.choice:before, + &.no-label:before { + @include lib-css(padding, $_type-inline-label-padding); + @include lib-css(width, $_type-inline-label-width); + box-sizing: border-box; + content: ' '; + float: left; + height: 1px; + } + + .description { + @include lib-css(padding, $_type-inline-label-padding); + @include lib-css(text-align, $_type-inline-label-align); + @include lib-css(width, $_type-inline-label-width); + box-sizing: border-box; + float: left; + } + + &:not(.choice) { + > .label { + @include lib-css(margin, $_type-inline-label-margin); + @include lib-css(padding, $_type-inline-label-padding); + @include lib-css(text-align, $_type-inline-label-align); + @include lib-css(width, $_type-inline-label-width); + box-sizing: border-box; + float: left; + } + + > .control { + @include lib-css(width, $_type-inline-control-width); + float: left; + } + } +} + +@mixin _lib-form-field-type-block( + $_type-block-margin, + $_type-block-label-margin, + $_type-block-label-padding, + $_type-block-label-align +) { + @include lib-css(margin, $_type-block-margin); + > .label { + @include lib-css(margin, $_type-block-label-margin); + @include lib-css(padding, $_type-block-label-padding); + @include lib-css(text-align, $_type-block-label-align); + display: inline-block; + } +} + +@mixin _lib-form-field-required( + $_color : $form-field-label-asterisk__color, + $_font-size : $form-field-label-asterisk__font-size, + $_font-family : $form-field-label-asterisk__font-family, + $_font-weight : $form-field-label-asterisk__font-weight, + $_font-style : $form-field-label-asterisk__font-style, + $_line-height : $form-field-label-asterisk__line-height, + $_margin : $form-field-label-asterisk__margin +) { + &.required > .label, + &._required > .label { + &:after { + content: '*'; + @include lib-typography( + $_font-size : $_font-size, + $_color : $_color, + $_font-family : $_font-family, + $_font-weight : $_font-weight, + $_line-height : $_line-height, + $_font-style : $_font-style + ); + @include lib-css(margin, $_margin); + } + } +} + +@mixin _lib-form-field-note( + $_note-font-size, + $_note-color, + $_note-font-family, + $_note-font-weight, + $_note-line-height, + $_note-font-style, + $_note-margin, + $_note-padding, + + $_note-icon-font-content, + $_note-icon-font, + $_note-icon-font-size, + $_note-icon-font-line-height, + $_note-icon-font-color, + $_note-icon-font-color-hover, + $_note-icon-font-color-active, + $_note-icon-font-margin, + $_note-icon-font-vertical-align, + $_note-icon-font-position, + $_note-icon-font-text-hide +) { + .note { + @include lib-typography( + $_font-size : $_note-font-size, + $_color : $_note-color, + $_font-family : $_note-font-family, + $_font-weight : $_note-font-weight, + $_line-height : $_note-line-height, + $_font-style : $_note-font-style + ); + + @include lib-css(margin, $_note-margin); + @include lib-css(padding, $_note-padding); + + @include lib-icon-font( + $_icon-font-content : $_note-icon-font-content, + $_icon-font : $_note-icon-font, + $_icon-font-size : $_note-icon-font-size, + $_icon-font-line-height : $_note-icon-font-line-height, + $_icon-font-color : $_note-icon-font-color, + $_icon-font-color-hover : $_note-icon-font-color-hover, + $_icon-font-color-active : $_note-icon-font-color-active, + $_icon-font-margin : $_note-icon-font-margin, + $_icon-font-vertical-align : $_note-icon-font-vertical-align, + $_icon-font-position : $_note-icon-font-position, + $_icon-font-text-hide : $_note-icon-font-text-hide + ); + } +} + +@mixin lib-form-field-type-revert( + $_type : $form-field-type-revert, + $_type-inline-margin : $form-field-type-inline__margin, + $_type-inline-label-margin : $form-field-type-label-inline__margin, + $_type-inline-label-padding : $form-field-type-label-inline__padding, + $_type-inline-label-align : $form-field-type-label-inline__align, + $_type-inline-label-width : $form-field-type-label-inline__width, + $_type-inline-control-width : $form-field-type-control-inline__width, + $_vertical-indent : $form-field__vertical-indent, + $_type-block-margin : $form-field-type-block__margin, + $_type-block-label-margin : $form-field-type-label-block__margin, + $_type-block-label-padding : $form-field-type-label-block__padding, + $_type-block-label-align : $form-field-type-label-block__align +) { + @if $_type == block { + &:not(.choice) { + > .label { + box-sizing: content-box; + float: none; + width: auto; + + @include _lib-revert-type-block-label-align( + $_type-block-label-align + ); + + @include _lib-revert-type-block-label-padding( + $_type-block-label-padding + ); + } + + > .control { + float: none; + width: auto; + } + } + + @include _lib-form-field-type-block( + $_type-block-margin, + $_type-block-label-margin, + $_type-block-label-padding, + $_type-block-label-align + ); + + &.choice, + &.no-label { + &:before { + display: none; + } + } + } + @if $_type == inline { + > .label { + @include _lib-revert-type-inline-label-margin( + $_type-inline-label-margin + ); + } + @include _lib-form-field-type-inline( + $_type-inline-margin, + $_type-inline-label-margin, + $_type-inline-label-padding, + $_type-inline-label-width, + $_type-inline-control-width, + $_type-inline-label-align, + $_vertical-indent + ); + } +} + +@mixin lib-form-field-column( + $_column : $form-field-column, + $_column-padding : $form-field-column__padding, + $_column-number : $form-field-column__number +) { + @if $_column { + @include lib-css(padding, $_column-padding); + box-sizing: border-box; + display: inline-block; + + @include lib-form-field-column-number($_column-number); + vertical-align: top; + + & + .fieldset { + clear: both; + } + } +} + +@mixin lib-form-field-column-number($_column-number: $form-field-column__number) { + @include lib-css(width, 100% / $_column-number); +} + +@mixin _lib-revert-type-block-label-padding( + $_type-block-label-padding +) { + @if $_type-block-label-padding == false { + padding: 0; + } +} + +@mixin _lib-revert-type-block-label-align( + $_type-block-label-align +) { + @if $_type-block-label-align == false { + text-align: left; + } +} + +@mixin _lib-revert-type-inline-label-margin( + $_type-inline-label-margin +) { + @if $_type-inline-label-margin == false { + margin: 0; + } +} + +@mixin lib-form-hasrequired( + $_position : $form-hasrequired__position, + $_color : $form-hasrequired__color, + $_font-size : $form-hasrequired__font-size, + $_font-family : $form-hasrequired__font-family, + $_font-weight : $form-hasrequired__font-weight, + $_font-style : $form-hasrequired__font-style, + $_line-height : $form-hasrequired__line-height, + $_border : $form-hasrequired__border, + $_margin : $form-hasrequired__margin, + $_padding : $form-hasrequired__padding +) { + @include _lib-form-hasrequired-position( + $_position, + $_border, + $_margin, + $_padding, + $_font-size, + $_color, + $_font-family, + $_font-weight, + $_line-height, + $_font-style + ); +} + +@mixin lib-form-hasrequired( + $_position : $form-hasrequired__position, + $_color : $form-hasrequired__color, + $_font-size : $form-hasrequired__font-size, + $_font-family : $form-hasrequired__font-family, + $_font-weight : $form-hasrequired__font-weight, + $_font-style : $form-hasrequired__font-style, + $_line-height : $form-hasrequired__line-height, + $_border : $form-hasrequired__border, + $_margin : $form-hasrequired__margin, + $_padding : $form-hasrequired__padding +) { + @if $_position == "top" { + &:before { + @include _lib-form-hasrequired-position-any( + $_border, + $_margin, + $_padding, + $_font-size, + $_color, + $_font-family, + $_font-weight, + $_line-height, + $_font-style + ); + } + } + @else if $_position == "bottom" { + &:after { + @include _lib-form-hasrequired-position-any( + $_border, + $_margin, + $_padding, + $_font-size, + $_color, + $_font-family, + $_font-weight, + $_line-height, + $_font-style + ); + } + } +} + +@mixin _lib-form-hasrequired-position-any( + $_border, + $_margin, + $_padding, + $_font-size, + $_color, + $_font-family, + $_font-weight, + $_line-height, + $_font-style +) { + @include lib-css(border, $_border); + @include lib-css(margin, $_margin); + @include lib-css(padding, $_padding); + content: attr(data-hasrequired); + display: block; + letter-spacing: normal; + word-spacing: normal; + @include lib-typography( + $_font-size : $_font-size, + $_color : $_color, + $_font-family : $_font-family, + $_font-weight : $_font-weight, + $_line-height : $_line-height, + $_font-style : $_font-style + ); +} + diff --git a/src/scss/boilerplate/magento-ui/_grids.scss b/src/scss/boilerplate/magento-ui/_grids.scss new file mode 100755 index 0000000..485b20f --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_grids.scss @@ -0,0 +1,224 @@ +// +// Grid mixins +// _____________________________________________ + +// You shouldn't need to touch this! Internal use only. +$column-width : 1 !default; +$total-columns : 1 !default; +$gutter-width : 1 !default; +$grid-width : ($column-width * $total-columns) + ($gutter-width * ($total-columns - 1)) !default; + +@mixin lib-column-wrapper() { + width: 100%; +} + +@mixin lib-inline-column-wrapper() { + @if $using-ieclasses != true { + letter-spacing: -0.31em; + letter-spacing: normal; + word-spacing: -0.43em; + } +} + +@mixin lib-inline-column-wrapper() { + @if $using-ieclasses { + letter-spacing: -0.31em; + word-spacing: -0.43em; + } +} + +@mixin lib-column() { + float: left; + @include lib-column-gutter(); +} + +@mixin lib-column($span) { + @if $span == false { + float: left; + } +} + +@mixin lib-column( + $span, + $total-columns : $total-columns, + $end-column : false +) { + @if isnumber($span) { + @if isnumber($total-columns) { + @if isnumber($end-column) { + $showgutter: false; + @include lib-column($showgutter); + @include lib-span($span, $total-columns); + @include lib-end-column(); + } + @else { + $showgutter: false; + @include lib-column($showgutter); + @include lib-span($span, $total-columns); + } + } + @if $end-column { + $showgutter: false; + @include lib-column($showgutter); + @include lib-span($span); + @include lib-end-column(); + } + @if isnumber($end-column) != true { + $showgutter: false; + @include lib-column($showgutter); + @include lib-span($span); + } + } +} + + +@mixin lib-inline-column() { + @include lib-column-gutter(); + display: inline-block; + letter-spacing: normal; + vertical-align: top; + word-spacing: normal; +} + +@mixin lib-inline-column( + $span, + $total-columns : $total-columns, + $end-column : false +) { + @if $span == false { + display: inline-block; + letter-spacing: normal; + vertical-align: top; + word-spacing: normal; + } + + @if isnumber($span) { + @if isnumber($total-columns) { + $showgutter: false; + @include lib-inline-column($showgutter); + @include lib-span( + $span, + $total-columns + ); + } + @if $end-column == true { + $showgutter: false; + @include lib-inline-column($showgutter); + @include lib-span( + $span, + $total-columns + ); + @include lib-inline-end-column(); + } + } + + @if isnumber($end-column) == false { + $showgutter: false; + @include lib-inline-column($showgutter); + @include lib-span($span); + } + + @if $end-column == true { + $showgutter: false; + + @include lib-inline-column($showgutter); + @include lib-span($span); + @include lib-inline-end-column(); + } +} + +@mixin lib-end-column() { + margin-right: 0; + float: right; +} + +@mixin lib-inline-end-column() { + margin-right: 0; +} + +@mixin lib-span($span) { + @include lib-column-width( + $span, + $total-columns + ); +} + +@mixin lib-span( + $span, + $total-columns +) { + @if isnumber($total-columns) { + @include lib-column-width( + $span, + $total-columns + ); + @include lib-column-gutter($total-columns); + } +} + +@mixin lib-pre-pad( + $span, + $total-columns: $total-columns +) { + $calc-column-width: 100% * (((($gutter-width + $column-width) * $span)) / $grid-width); + + @include lib-css(padding-left, $calc-column-width); +} + +@mixin lib-post-pad( + $span, + $total-columns: $total-columns +) { + $calc-column-width: 100% * (((($gutter-width+$column-width) * $span)) / $grid-width); + + @include lib-css(padding-right, $calc-column-width); +} + +@mixin lib-pre-push( + $span, + $total-columns: $total-columns +) { + $calc-column-width: 100% * (((($gutter-width+$column-width) * $span)) / $grid-width); + + @include lib-css(margin-left, $calc-column-width); +} + +@mixin lib-post-push( + $span, + $total-columns: $total-columns +) { + $calc-column-width: 100% * (((($gutter-width+$column-width) * $span)+$gutter-width) / $grid-width); + + @include lib-css(margin-right, $calc-column-width); +} + +@mixin lib-post-push-end( + $span, + $total-columns: $total-columns +) { + $calc-column-width: 100% * (((($gutter-width+$column-width) * $span)) / $grid-width); + + @include lib-css(margin-right, $calc-column-width); +} + +@mixin lib-column-width( + $span, + $total-columns: $total-columns +) { + $calc-column-width: 100% * (((($gutter-width+$column-width) * $span)-$gutter-width) / $grid-width); + + @include lib-css(width, $calc-column-width); +} + +@mixin lib-column-gutter( + $total-columns: $total-columns, + $end-column: false +) { + @if $end-column { + margin-right: 0; + } + @else { + $calc-gutter-width: 100% * ($gutter-width / $grid-width); + @include lib-css(margin-right, $calc-gutter-width); + } +} diff --git a/src/scss/boilerplate/magento-ui/_icons.scss b/src/scss/boilerplate/magento-ui/_icons.scss new file mode 100755 index 0000000..d1c5aa3 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_icons.scss @@ -0,0 +1,323 @@ +// +// Icons +// _____________________________________________ + +// +// Icons using font +// --------------------------------------------- + +@mixin lib-icon-font( + $_icon-font-content, + $_icon-font : $icon-font, + $_icon-font-size : $icon-font__size, + $_icon-font-line-height : $icon-font__line-height, + $_icon-font-color : $icon-font__color, + $_icon-font-color-hover : $icon-font__color-hover, + $_icon-font-color-active : $icon-font__color-active, + $_icon-font-margin : $icon-font__margin, + $_icon-font-vertical-align : $icon-font__vertical-align, + $_icon-font-position : $icon-font__position, + $_icon-font-text-hide : $icon-font__text-hide, + $_icon-font-display : $icon-font__display +) { + @include _lib-icon-text-hide($_icon-font-text-hide); + @include lib-css(display, $_icon-font-display); + text-decoration: none; + + @if $_icon-font-position == before { + &:before { + @include _lib-icon-font( + $_icon-font-content, + $_icon-font, + $_icon-font-size, + $_icon-font-line-height, + $_icon-font-color, + $_icon-font-margin, + $_icon-font-vertical-align + ); + } + &:hover { + &:before { + @include lib-css(color, $_icon-font-color-hover); + } + } + &:active { + &:before { + @include lib-css(color, $_icon-font-color-active); + } + } + } + @else if $_icon-font-position == after { + &:after { + @include _lib-icon-font( + $_icon-font-content, + $_icon-font, + $_icon-font-size, + $_icon-font-line-height, + $_icon-font-color, + $_icon-font-margin, + $_icon-font-vertical-align + ); + } + &:hover { + &:after { + @include lib-css(color, $_icon-font-color-hover); + } + } + + &:active { + &:after { + @include lib-css(color, $_icon-font-color-active); + } + } + } +} + +@mixin lib-icon-font-size( + $_icon-font-size : $icon-font__size, + $_icon-font-line-height : $icon-font__line-height, + $_icon-font-position : $icon-font__position +) { + @if $_icon-font-position == before { + &:before { + @include _lib-icon-font-size($_icon-font-size, $_icon-font-line-height); + } + } + @else if $_icon-font-position == after { + &:after { + @include _lib-icon-font-size($_icon-font-size, $_icon-font-line-height); + } + } +} + +@mixin lib-icon-font-symbol( + $_icon-font-content, + $_icon-font-position: $icon-font__position +) { + @if $_icon-font-position == before { + &:before { + @include lib-css(content, $_icon-font-content); + } + } + @else if $_icon-font-position == after { + &:after { + @include lib-css(content, $_icon-font-content); + } + } +} + +// +// Icons using image or sprite +// --------------------------------------------- + +@mixin lib-icon-image( + $_icon-image, + $_icon-image-width : $icon__width, + $_icon-image-height : $icon__height, + $_icon-image-margin : $icon__margin, + $_icon-image-vertical-align : $icon__vertical-align, + $_icon-image-position-x : $icon-image__position-x, + $_icon-image-position-y : $icon-image__position-y, + $_icon-image-position : $icon__position, + $_icon-image-text-hide : $icon__text-hide +) { + display: inline-block; + @include _lib-icon-text-hide($_icon-image-text-hide); + + @if $_icon-image-position == before { + &:before { + @include _lib-icon-image( + $_icon-image, + $_icon-image-width, + $_icon-image-height, + $_icon-image-margin, + $_icon-image-vertical-align, + $_icon-image-position-x, + $_icon-image-position-y + ); + margin: $_icon-image-margin; + } + } + @else if $_icon-image-position == after { + &:after { + @include _lib-icon-image( + $_icon-image, + $_icon-image-width, + $_icon-image-height, + $_icon-image-margin, + $_icon-image-vertical-align, + $_icon-image-position-x, + $_icon-image-position-y + ); + margin: $_icon-image-margin; + } + } +} + +@mixin lib-icon-image-position( + $_icon-image-position-x : $icon-image__position-x, + $_icon-image-position-y : $icon-image__position-y, + $_icon-image-position : $icon__position +) { + @if $_icon-image-position == before { + &:before { + @include _lib-icon-image-position( + $_icon-image-position-x, + $_icon-image-position-y + ); + } + } + @else if $_icon-image-position == after { + &:after { + @include _lib-icon-image-position( + $_icon-image-position-x, + $_icon-image-position-y + ); + } + } +} + +@mixin lib-icon-sprite-position( + $_icon-sprite-position-x : $icon-sprite__position-x, + $_icon-sprite-position-y : $icon-sprite__position-y, + $_icon-sprite-grid : $icon-sprite__grid, + $_icon-sprite-position : $icon__position +) { + @if $_icon-sprite-position == before { + &:before { + @include _lib-icon-sprite-position( + $_icon-sprite-position-x, + $_icon-sprite-position-y, + $_icon-sprite-grid + ); + } + } + @else if $_icon-sprite-position == after { + &:after { + @include _lib-icon-sprite-position( + $_icon-sprite-position-x, + $_icon-sprite-position-y, + $_icon-sprite-grid + ); + } + } +} + +@mixin lib-icon-image-size( + $_icon-image-width : $icon__width, + $_icon-image-height : $icon__height, + $_icon-image-position : $icon__position +) { + @if $_icon-image-position == before { + &:before { + @include _lib-icon-image-size($_icon-image-width, $_icon-image-height); + } + } + @else if $_icon-image-position == after { + &:after { + @include _lib-icon-image-size($_icon-image-width, $_icon-image-height); + } + } +} + +@mixin lib-icon-text-hide() { + & > span { + @include lib-visually-hidden(); + } +} + +// +// Internal use mixins +// --------------------------------------------- + +@mixin _lib-icon-text-hide($_icon-text-hide) { + @if $_icon-text-hide == true { + @include lib-icon-text-hide(); + } +} + +// +// Url existing check +// --------------------------------------------- + +@mixin _lib-icon-image-url($_path) { + @if $_path != false { + @include lib-css(background-image, url($_path)); + } +} + +@mixin _lib-icon-image( + $_icon-image, + $_icon-image-width, + $_icon-image-height, + $_icon-image-margin, + $_icon-image-vertical-align, + $_icon-image-position-x, + $_icon-image-position-y +) { + @include _lib-icon-image-url($_icon-image); + @include lib-css(background-position-x, $_icon-image-position-x); + @include lib-css(background-position-y, $_icon-image-position-y); + @include lib-css(line-height, $_icon-image-height); + @include lib-css(margin, $_icon-image-margin); + @include lib-css(vertical-align, $_icon-image-vertical-align); + @include _lib-icon-image-size( + $_icon-image-width, + $_icon-image-height + ); + background-repeat: no-repeat; + content: ''; + display: inline-block; +} + +@mixin _lib-icon-image-position( + $_icon-image-position-x, + $_icon-image-position-y +) { + @include lib-css(background-position, $_icon-image-position-x $_icon-image-position-y); +} + +@mixin _lib-icon-image-size( + $icon__width, + $icon__height +) { + @include lib-css(height, $icon__height); + @include lib-css(width, $icon__width); +} + +@mixin _lib-icon-sprite-position( + $_icon-sprite-position-x, + $_icon-sprite-position-y, + $_icon-sprite-grid +) { + @include lib-css(background-position, -($_icon-sprite-position-x * $_icon-sprite-grid) -($_icon-sprite-position-y * $_icon-sprite-grid)); +} + +@mixin _lib-icon-font( + $_icon-font-content, + $_icon-font, + $_icon-font-size, + $_icon-font-line-height, + $_icon-font-color, + $_icon-font-margin, + $_icon-font-vertical-align +) { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + @include _lib-icon-font-size($_icon-font-size, $_icon-font-line-height); + @include lib-css(color, $_icon-font-color); + @include lib-css(content, $_icon-font-content); + @include lib-css(font-family, $_icon-font); + @include lib-css(margin, $_icon-font-margin); + @include lib-css(vertical-align, $_icon-font-vertical-align); + display: inline-block; + font-weight: normal; + overflow: hidden; + speak: none; + text-align: center; +} + +@mixin _lib-icon-font-size($_icon-font-size, $_icon-font-line-height) { + @include lib-css(font-size, $_icon-font-size); + @include lib-css(line-height, $_icon-font-line-height); +} diff --git a/src/scss/boilerplate/magento-ui/_layout.scss b/src/scss/boilerplate/magento-ui/_layout.scss new file mode 100755 index 0000000..bc20c87 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_layout.scss @@ -0,0 +1,132 @@ +// +// Layout +// _____________________________________________ + +// Page Width mixin +@mixin lib-layout-width( + $_layout__min-width: $layout__min-width, + $_layout__max-width: $layout__max-width, + $_layout__indent : $layout-indent__width +) { + @if $responsive != true { + @include _lib-layout-width($_layout__min-width, $_layout__max-width); + @include lib-css(padding-left, $layout-indent__width); + @include lib-css(padding-right, $layout-indent__width); + margin: 0 auto; + } +} + +@mixin _lib-layout-width( + $_layout__min-width: $layout__min-width, + $_layout__max-width: $layout__max-width +) { + @if $_layout__min-width == $_layout__max-width { + @include lib-css(width, $_layout__min-width); + } + @else { + @include lib-css(max-width, $_layout__max-width); + @include lib-css(min-width, $_layout__min-width); + width: auto; + } +} + +@mixin lib-layout-columns() { + @if $use-flex == true { + @include lib-vendor-prefix-display(flex); + @include lib-vendor-prefix-flex-wrap(wrap); + box-sizing: border-box; + } + &:after { + clear: both; + content: ' '; + display: block; + height: 0; + overflow: hidden; + visibility: hidden; + } +} + +@mixin lib-layout-columns__main() { + .#{$layout-class-1column} & { + @include lib-layout-column(1, 2, 100%); + } + .#{$layout-class-3columns} & { + @include lib-layout-column(3, 2, $layout-column-main__width-3); + } + .#{$layout-class-2columns__left} & { + @include lib-layout-column(2, 2, $layout-column-main__width-2-left); + } + .#{$layout-class-2columns__right} & { + @include lib-layout-column(2, 1, $layout-column-main__width-2-right); + } +} + +@mixin lib-layout-columns__left() { + .#{$layout-class-3columns} & { + @include lib-layout-column(3, 1, $layout-column__left-width); + } + .#{$layout-class-2columns__left} & { + @include lib-layout-column(2, 1, $layout-column__left-width); + } + .#{$layout-class-2columns__right} & { + @include lib-layout-column(2, 1, $layout-column__left-width); + } +} + +@mixin lib-layout-columns__right() { + .#{$layout-class-3columns} & { + @include lib-layout-column(3, 3, $layout-column__right-width); + } + .#{$layout-class-2columns__left} & { + @include lib-layout-column(2, 2, $layout-column__right-width); + } + .#{$layout-class-2columns__right} & { + @include lib-layout-column(2, 2, $layout-column__right-width); + } +} + +@mixin _lib-column-width($_width, $_check, $_index) { + @if $_check == false and $_index == 2 { + @include lib-column-width($_width); + } + @else if $_check == true or $_width == 'auto' { + @include lib-css(width, $_width); + $_index: 1; + } +} + +@mixin _lib-set-column-width($_index, $_width) { + @if $_index > 0 { + $_units : 'px', '%', 'em', 'rem', 'pt'; + $_unit : nth($_units, $_index); + $_checkUnit: false; + + @if unit($_width) == $_unit { + $_checkUnit: true; + } + @include _lib-column-width($_width, $_checkUnit, $_index); + @include _lib-set-column-width($_index - 1, $_width); + + } +} + +@mixin lib-layout-column($_total-columns, $_order, $_width) { + $_units: 'px', '%', 'em', 'rem', 'pt'; + @include _lib-set-column-width(length($_units), $_width); + @include lib-flex-degradation($_total-columns, $_order); + @if $use-flex == true { + @include lib-vendor-prefix-order($_order); + } +} + +@mixin lib-flex-degradation($_total-columns, $_order) { + @if $_order == 1 { + float: left; + } + @else if $_order == $_total-columns { + float: right; + } + @else if $_total-columns == 3 and $_order == 2 { + display: inline-block; + } +} diff --git a/src/scss/boilerplate/magento-ui/_lib.scss b/src/scss/boilerplate/magento-ui/_lib.scss new file mode 100755 index 0000000..b500ca4 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_lib.scss @@ -0,0 +1,55 @@ +// +// Variables +// _____________________________________________ + +// Global variables +@import 'variables/global'; +@import 'variables/colors'; +@import 'variables/icons'; +@import 'variables/typography'; + +// All variables +@import 'variables/actions-toolbar'; +@import 'variables/breadcrumbs'; +@import 'variables/buttons'; +@import 'variables/components'; +@import 'variables/dropdowns'; +@import 'variables/email'; +@import 'variables/forms'; +@import 'variables/layout'; +@import 'variables/loaders'; +@import 'variables/messages'; +@import 'variables/navigation'; +@import 'variables/pages'; +@import 'variables/popups'; +@import 'variables/rating'; +@import 'variables/responsive'; +@import 'variables/sections'; +@import 'variables/structure'; +@import 'variables/tables'; +@import 'variables/tooltips'; + +// +// Global lib +// _____________________________________________ + +@import 'actions-toolbar'; +@import 'breadcrumbs'; +@import 'buttons'; +@import 'dropdowns'; +@import 'forms'; +@import 'grids'; +@import 'icons'; +@import 'layout'; +@import 'loaders'; +@import 'messages'; +@import 'navigation'; +@import 'pages'; +@import 'popups'; +@import 'rating'; +@import 'resets'; +@import 'sections'; +@import 'tables'; +@import 'tooltips'; +@import 'typography'; +@import 'utilities'; diff --git a/src/scss/boilerplate/magento-ui/_loaders.scss b/src/scss/boilerplate/magento-ui/_loaders.scss new file mode 100755 index 0000000..8cfbd60 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_loaders.scss @@ -0,0 +1,88 @@ +// +// Loaders +// _____________________________________________ + +@mixin lib-loader( + $_loader-overlay-background-color : $loader-overlay__background-color, + $_loader-overlay-z-index : $loader-overlay__z-index, + $_loader-icon-width : $loader-icon__width, + $_loader-icon-height : $loader-icon__height, + $_loader-icon-background-color : $loader-icon__background-color, + $_loader-icon-background-image : $loader-icon__background-image, + $_loader-icon-background-position : $loader-icon__background-position, + $_loader-icon-border-radius : $loader-icon__border-radius, + $_loader-icon-padding : $loader-icon__padding, + $_loader-text : $loader-text, + $_loader-text-color : $loader-text__color, + $_loader-text-font-size : $loader-text__font-size, + $_loader-text-font-family : $loader-text__font-family, + $_loader-text-font-weight : $loader-text__font-weight, + $_loader-text-font-style : $loader-text__font-style, + $_loader-text-padding : $loader-text__padding +) { + @include lib-css(background-color, $_loader-overlay-background-color); + @include lib-css(z-index, $_loader-overlay-z-index); + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + + &:before { + @if $_loader-text == true { + @include lib-css(padding, $_loader-text-padding); + content: attr(data-text); + text-align: center; + vertical-align: baseline; + + @include lib-typography( + $_color : $_loader-text-color, + $_font-size : $_loader-text-font-size, + $_font-family : $_loader-text-font-family, + $_font-weight : $_loader-text-font-weight, + $_font-style : $_loader-text-font-style + ); + } + + @include lib-css(background, $_loader-icon-background-color $_loader-icon-background-image no-repeat $_loader-icon-background-position); + @include lib-css(border-radius, $_loader-icon-border-radius); + @include lib-css(height, $_loader-icon-height); + @include lib-css(padding, $_loader-icon-padding); + @include lib-css(width, $_loader-icon-width); + bottom: 0; + box-sizing: border-box; + content: ''; + left: 0; + margin: auto; + position: absolute; + right: 0; + top: 0; + } +} + +@mixin lib-loading( + $_loading-background-color : $loading__background-color, + $_loading-background-image : $loading__background-image +) { + position: relative; + + &:before { + @include lib-css(background, $_loading-background-color $_loading-background-image no-repeat 50% 50%); + bottom: 0; + content: ''; + left: 0; + position: absolute; + right: 0; + top: 0; + } +} + +@mixin lib-loading-mask() { + bottom: 0; + left: 0; + margin: auto; + position: fixed; + right: 0; + top: 0; + z-index: 100; +} diff --git a/src/scss/boilerplate/magento-ui/_messages.scss b/src/scss/boilerplate/magento-ui/_messages.scss new file mode 100755 index 0000000..ac3bf40 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_messages.scss @@ -0,0 +1,273 @@ +// +// Messages +// _____________________________________________ + +// Helper function to easier get values related to specific type +@function message($_message-type, $_key) { + $_map: $message-info-map; + + // find maps adequate to message type + @if $_message-type == error { + $_map: $message-error-map; + } + + @if $_message-type == success { + $_map: $message-success-map; + } + + @if $_message-type == warning { + $_map: $message-warning-map; + } + + @if $_message-type == notice { + $_map: $message-notice-map; + } + + @return map-get($_map, $_key); +} + +@mixin lib-message( + $_message-type: info +) { + @include _lib-message(); + @include _lib-message-style( + $_message-color : message($_message-type, color), + $_message-background : message($_message-type, background), + $_message-link-color : message($_message-type, link__color), + $_message-link-color-hover : message($_message-type, link__color-hover), + $_message-link-color-active: message($_message-type, link__color-active), + $_message-border-color : message($_message-type, border-color) + ); +} + +@mixin _lib-message( + $_message-padding: $message__padding, + $_message-margin: $message__margin, + $_message-border-radius: $message__border-radius +) { + @include lib-css(border-radius, $_message-border-radius); + @include lib-css(margin, $_message-margin); + @include lib-css(padding, $_message-padding); + display: block; + @include lib-typography( + $_color : $message__color, + $_font-size : $message__font-size, + $_font-family : $message__font-family, + $_font-weight : $message__font-weight, + $_font-style : $message__font-style, + $_line-height : $message__line-height + ); + @include _lib-message-border($message__border-width, $message__border-style); +} + +@mixin _lib-message-style( + $_message-background: $message-info__background, + $_message-color: $message-info__color, + $_message-link-color: $message-info-link__color, + $_message-link-color-hover: $message-info-link__color-hover, + $_message-link-color-active: $message-info-link__color-active, + $_message-border-color: $message-info__border-color +) { + @include lib-css(background, $_message-background); + @include lib-css(border-color, $_message-border-color); + @include lib-css(color, $_message-color); + + a { + @include lib-css(color, $_message-link-color); + + &:hover { + @include lib-css(color, $_message-link-color-hover); + } + + &:active { + @include lib-css(color, $_message-link-color-active); + } + } +} + +@mixin _lib-message-border( + $_message-border-width: $message__border-width, + $_message-border-style: $message__border-style +) { + @if $_message-border-width != 0 and $_message-border-width != inherit and $_message-border-style != inherit { + @include lib-css(border, $_message-border-width $_message-border-style); + } +} + +// Messages with lateral icon +@mixin lib-message-icon-lateral( + $_message-type: info, + $_message-position: right +) { + @include lib-message($_message-type); + @include _lib-message-icon-lateral( + $_message-position, + message($_message-type, icon), + message($_message-type, icon__color-lateral), + message($_message-type, icon__background), + message($_message-type, icon__top), + message($_message-type, icon__right), + message($_message-type, icon__bottom), + message($_message-type, icon__left) + ); +} + +// Messages with inner icon +@mixin lib-message-icon-inner($_message-type: info) { + @include lib-message($_message-type); + @include _lib-message-icon-inner( + message($_message-type, icon), + message($_message-type, icon__color-inner), + message($_message-type, icon__background), + message($_message-type, icon__top), + message($_message-type, icon__right), + message($_message-type, icon__bottom), + message($_message-type, icon__left) + ); +} + +// Private mixins +@mixin _lib-message-icon-lateral( + $_message-icon-position, + $_message-icon, + $_message-icon-color, + $_message-icon-background, + $_message-icon-top, + $_message-icon-left, + $_message-icon-bottom, + $_message-icon-right +) { + position: relative; + + &:before { + @include lib-css(background, $_message-icon-background); + @include lib-css(width, $message-icon__lateral-width); + content: ''; + display: block; + height: 100%; + padding: 0; + position: absolute; + text-align: center; + top: 0; + } + + & > *:first-child { + &:before { + @include lib-css(margin-top, -$message-icon__lateral-arrow-size); + content: ''; + overflow: hidden; + position: absolute; + top: 50%; + } + } + + & > *:first-child { + &:after { + @include _lib-icon-font( + $_icon-font-content : $_message-icon, + $_icon-font : $icon-font, + $_icon-font-size : $message-icon__font-size, + $_icon-font-line-height : $message-icon__font-line-height, + $_icon-font-color : $_message-icon-color, + $_icon-font-margin : -$message-icon__font-size / 2 0 0, + $_icon-font-vertical-align : $icon-font__vertical-align + ); + @include lib-css(bottom, $_message-icon-bottom); + @include lib-css(left, $_message-icon-left); + @include lib-css(right, $_message-icon-right); + @include lib-css(top, $_message-icon-top); + @include lib-css(width, $message-icon__lateral-width); + position: absolute; + text-align: center; + } + } + + @include _lib-message-icon-lateral-position( + $_message-icon-position, + $_message-icon-background + ); +} + +@mixin _lib-message-icon-lateral-position( + $_message-icon-position, + $_message-icon-background +) { + @if $_message-icon-position == right { + @include lib-css(padding-right, $message-icon__lateral-width + $indent__s); + &:before { + right: 0; + @include _lib-message-icon-lateral-border-radius($_message-icon-position); + } + & > *:first-child { + &:before { + @include lib-arrow(left, $message-icon__lateral-arrow-size, $_message-icon-background); + @include lib-css(right, $message-icon__lateral-width); + } + &:after { + right: 0; + left: initial; + } + } + } + @else if $_message-icon-position == left { + @include lib-css(padding-left, $message-icon__lateral-width + $indent__s); + + &:before { + left: 0; + @include _lib-message-icon-lateral-border-radius($_message-icon-position); + } + + & > *:first-child { + &:before { + @include lib-arrow(right, $message-icon__lateral-arrow-size, $_message-icon-background); + @include lib-css(left, $message-icon__lateral-width); + } + &:after { + left: 0; + } + } + } +} + +@mixin _lib-message-icon-lateral-border-radius($_message-icon-position) { + @if $message__border-radius != false and $message__border-width != false { + @if $_message-icon-position == left { + @include lib-css(border-radius, ($message__border-radius - $message__border-width) 0 0 ($message__border-radius - $message__border-width)); + } + @if $_message-icon-position == right { + @include lib-css(border-radius, 0 ($message__border-radius - $message__border-width) ($message__border-radius - $message__border-width) 0); + } + } +} + +@mixin _lib-message-icon-inner( + $_message-icon, + $_message-icon-color, + $_message-icon-background, + $_message-icon-top, + $_message-icon-left, + $_message-icon-bottom, + $_message-icon-right +) { + @include lib-css(padding-left, $message-icon__inner-padding-left); + position: relative; + + & > *:first-child:before { + @include _lib-icon-font( + $_icon-font-content : $_message-icon, + $_icon-font : $icon-font, + $_icon-font-size : $message-icon__font-size, + $_icon-font-line-height : $message-icon__font-line-height, + $_icon-font-color : $_message-icon-color, + $_icon-font-margin : -$message-icon__font-size / 2 0 0, + $_icon-font-vertical-align : $icon-font__vertical-align + ); + @include lib-css(bottom, $_message-icon-bottom); + @include lib-css(left, $_message-icon-left); + @include lib-css(right, $_message-icon-right); + @include lib-css(top, $_message-icon-top); + @include lib-css(width, $message-icon__inner-padding-left); + position: absolute; + text-align: center; + } +} diff --git a/src/scss/boilerplate/magento-ui/_navigation.scss b/src/scss/boilerplate/magento-ui/_navigation.scss new file mode 100755 index 0000000..e42c474 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_navigation.scss @@ -0,0 +1,521 @@ +// +// Navigation +// _____________________________________________ + +@mixin lib-main-navigation( + $_nav__indent-side : 15px, + $_nav-background-color : $navigation__background, + $_nav-border : $navigation__border, + $_nav-level0-font-size : $navigation-level0-item__font-size, + $_nav-level0-font-weight : $navigation-level0-item__font-weight, + $_nav-level0-item-line-height : $navigation-level0-item__line-height, + $_nav-level0-item-margin : $navigation-level0-item__margin, + $_nav-level0-item-padding : $navigation-level0-item__padding, + $_nav-level0-text-transform : $navigation-level0-item__text-transform, + + $_nav-level0-item-background-color : $navigation-level0-item__background, + $_nav-level0-item-border : $navigation-level0-item__border, + $_nav-level0-item-color : $navigation-level0-item__color, + $_nav-level0-item-text-decoration : $navigation-level0-item__text-decoration, + + $_nav-level0-item-background-color-active : $navigation-level0-item__active__background, + $_nav-level0-item__active__border-color : $navigation-level0-item__active__border-color, + $_nav-level0-item__active__border-style : $navigation-level0-item__active__border-style, + $_nav-level0-item__active__border-width : $navigation-level0-item__active__border-width, + $_nav-level0-item-color-active : $navigation-level0-item__active__color, + $_nav-level0-item-text-decoration-active : $navigation-level0-item__active__text-decoration, + + $_submenu-background-color : $submenu__background, + $_submenu-border : $submenu__border, + $_submenu-font-size : $submenu__font-size, + $_submenu-font-weight : $submenu__font-weight, + $_submenu-line-height : $submenu-item__line-height, + $_submenu-item__padding-top : $submenu__padding-top, + $_submenu-item__padding-right : $submenu__padding-right, + $_submenu-item__padding-bottom : $submenu__padding-bottom, + $_submenu-item__padding-left : $submenu__padding-left, + + $_submenu-item-background-color : $submenu-item__background, + $_submenu-item-border : $submenu-item__border, + $_submenu-item-color : $submenu-item__color, + $_submenu-item-text-decoration : $submenu-item__text-decoration, + + $_submenu-item-background-color-active : $submenu-item__active__background, + $_submenu-item__active__border : $submenu-item__active__border, + $_submenu-item__active__border-color : $submenu-item__active__border-color, + $_submenu-item__active__border-style : $submenu-item__active__border-style, + $_submenu-item__active__border-width : $submenu-item__active__border-width, + $_submenu-item-color-active : $submenu-item__active__color, + $_submenu-item-text-decoration-active : $submenu-item__active__text-decoration +) { + .navigation { + @include lib-css(background, $_nav-background-color); + @include lib-css(border, $_nav-border); + box-sizing: border-box; + + ul { + margin: 0; + padding: 0; + } + + li { + margin: 0; + } + + a { + display: block; + @include lib-css(padding, $_submenu-item__padding-top $_submenu-item__padding-right $_submenu-item__padding-bottom $_submenu-item__padding-left); + } + + a, + a:hover { + @include lib-css(color, $_nav-level0-item-color); + @include lib-css(text-decoration, $_nav-level0-item-text-decoration); + } + + .level0 { + @include lib-css(border-top, $_nav-level0-item-border); + @include lib-font-size($_nav-level0-font-size); + + > .level-top { + @include lib-css(background, $_nav-level0-item-background-color); + @include lib-css(font-weight, $_nav-level0-font-weight); + @include lib-css(line-height, $_nav-level0-item-line-height); + @include lib-css(padding, $_nav-level0-item-padding); + @include lib-css(text-transform, $_nav-level0-text-transform); + word-wrap: break-word; + } + + &.active { + .all-category { + .ui-state-focus { + @include lib-css(background, $_nav-level0-item-background-color-active); + @include lib-css(border-color, $_nav-level0-item__active__border-color); + @include lib-css(border-style, $_nav-level0-item__active__border-style); + @include lib-css(border-width, $_nav-level0-item__active__border-width); + @include lib-css(color, $_nav-level0-item-color-active); + @include lib-css(padding-left, $_nav__indent-side - $_submenu-item__active__border); + @include lib-css(text-decoration, $_nav-level0-item-text-decoration-active); + display: inline-block; + } + } + } + + > .level1 { + @include lib-css(font-weight, $font-weight__semibold); + } + + &.active, + &.has-active { // ToDo UI: remove "has_active" here, when mobile navigation default open state is implemented + > a:not(.ui-state-active) { + @include lib-css(background, $_nav-level0-item-background-color-active); + @include lib-css(border-color, $_nav-level0-item__active__border-color); + @include lib-css(border-style, $_nav-level0-item__active__border-style); + @include lib-css(border-width, $_nav-level0-item__active__border-width); + @include lib-css(color, $_nav-level0-item-color-active); + @include lib-css(text-decoration, $_nav-level0-item-text-decoration-active); + + span:not(.ui-menu-icon) { + @include lib-css(margin-left, -$_submenu-item__active__border); + } + } + } + } + + li.level0 { + &:last-child { + @include lib-css(border-bottom, $_nav-level0-item-border); + } + } + + .submenu { + > li { + word-wrap: break-word; + } + + &:not(:first-child) { + @include lib-css(background, $_submenu-background-color); + @include lib-css(border, $_submenu-border); + @include lib-css(font-size, $_submenu-font-size); + @include lib-css(font-weight, $_submenu-font-weight); + @include lib-css(line-height, $_submenu-line-height); + left: auto !important; + overflow-x: hidden; + padding: 0; + position: relative; + top: auto !important; + transition: left 0.3s ease-out; + + > li { + > a { + @include lib-css(padding-left, $_nav__indent-side); + } + + &:last-child { + margin-bottom: 0; + } + } + + ul { + display: block; + @include lib-css(padding-left, $_submenu-item__padding-left); + + > li { + margin: 0; + + a { + @include lib-css(background, $_submenu-item-background-color); + @include lib-css(border, $_submenu-item-border); + @include lib-css(color, $_submenu-item-color); + @include lib-css(text-decoration, $_submenu-item-text-decoration); + display: block; + line-height: normal; + } + } + } + + &.expanded { + display: block !important; + padding-right: 0; + top: 0 !important; + } + + .active { + > a { + @include lib-css(background, $_submenu-item-background-color-active); + @include lib-css(border-color, $_submenu-item__active__border-color); + @include lib-css(border-style, $_submenu-item__active__border-style); + @include lib-css(border-width, $_submenu-item__active__border-width); + @include lib-css(color, $_submenu-item-color-active); + @include lib-css(padding-left, $_nav__indent-side - $_submenu-item__active__border); + @include lib-css(text-decoration, $_submenu-item-text-decoration-active); + } + } + + .level1 { + &.active { + > a { + @include lib-css(padding-left, $_nav__indent-side - $_submenu-item__active__border); + } + } + } + } + } + } +} + +// +// Desktop +// _____________________________________________ + +@mixin lib-main-navigation-desktop( + $_nav-background-color : $navigation-desktop__background, + $_nav-border : $navigation-desktop__border, + $_nav-font-size : $navigation-desktop__font-size, + $_nav-font-weight : $navigation-desktop__font-weight, + + $_nav-level0-item-line-height : $navigation-desktop-level0-item__line-height, + $_nav-level0-item-margin : $navigation-desktop-level0-item__margin, + $_nav-level0-item-padding : $navigation-desktop-level0-item__padding, + + $_nav-level0-item-background-color : $navigation-desktop-level0-item__background, + $_nav-level0-item-border : $navigation-desktop-level0-item__border, + $_nav-level0-item-color : $navigation-desktop-level0-item__color, + $_nav-level0-item-text-decoration : $navigation-desktop-level0-item__text-decoration, + + $_nav-level0-item-background-color-hover : $navigation-desktop-level0-item__hover__background, + $_nav-level0-item-border-hover : $navigation-desktop-level0-item__hover__border, + $_nav-level0-item-color-hover : $navigation-desktop-level0-item__hover__color, + $_nav-level0-item-text-decoration-hover : $navigation-desktop-level0-item__hover__text-decoration, + + $_nav-level0-item-background-color-active : $navigation-desktop-level0-item__active__background, + $_nav-level0-item__active__border-color : $navigation-desktop-level0-item__active__border-color, + $_nav-level0-item__active__border-style : $navigation-desktop-level0-item__active__border-style, + $_nav-level0-item__active__border-width : $navigation-desktop-level0-item__active__border-width, + $_nav-level0-item-color-active : $navigation-desktop-level0-item__active__color, + $_nav-level0-item-text-decoration-active : $navigation-desktop-level0-item__active__text-decoration, + + $_submenu-background-color : $submenu-desktop__background, + $_submenu-border-width : $submenu-desktop__border-width, + $_submenu-border-style : $submenu-desktop__border-style, + $_submenu-border-color : $submenu-desktop__border-color, + $_submenu-box-shadow : $submenu-desktop__box-shadow, + $_submenu-font-size : $submenu-desktop__font-size, + $_submenu-font-weight : $submenu-desktop__font-weight, + $_submenu-min-width : $submenu-desktop__min-width, + $_submenu-padding : $submenu-desktop__padding, + + $_submenu-arrow : $submenu-desktop-arrow, + $_submenu-arrow-size : $submenu-desktop-arrow__size, + $_submenu-arrow-left : $submenu-desktop-arrow__left, + + $_submenu-item-padding : $submenu-desktop-item__padding, + $_submenu-item-background-color : $submenu-desktop-item__background, + $_submenu-item-border : $submenu-desktop-item__border, + $_submenu-item-color : $submenu-desktop-item__color, + $_submenu-item-text-decoration : $submenu-desktop-item__text-decoration, + + $_submenu-item__hover__background-color : $submenu-desktop-item__hover__background, + $_submenu-item-border-hover : $submenu-desktop-item__hover__border, + $_submenu-item-color-hover : $submenu-desktop-item__hover__color, + $_submenu-item-text-decoration-hover : $submenu-desktop-item__hover__text-decoration, + + $_submenu-item-background-color-active : $submenu-desktop-item__active__background, + $_submenu-item__active__border-color : $submenu-desktop-item__active__border-color, + $_submenu-item__active__border-style : $submenu-desktop-item__active__border-style, + $_submenu-item__active__border-width : $submenu-desktop-item__active__border-width, + $_submenu-item-color-active : $submenu-desktop-item__active__color, + $_submenu-item-text-decoration-active : $submenu-desktop-item__active__text-decoration +) { + + .navigation { + @include lib-css(background, $_nav-background-color); + @include lib-css(border, $_nav-border); + @include lib-css(font-size, $_nav-font-size); + @include lib-css(font-weight, $_nav-font-weight); + height: inherit; + left: auto; + overflow: inherit; + padding: 0; + position: relative; + top: 0; + width: 100%; + z-index: 3; + + &:empty { + display: none; + } + + ul { + margin-top: 0; + margin-bottom: 0; + padding: 0; + position: relative; + } + + li.level0 { + @include lib-css(border-top, none); + } + + .level0 { + @include lib-css(margin, $_nav-level0-item-margin); + display: inline-block; + position: relative; + + &:last-child { + margin-right: 0; + padding-right: 0; + } + + > .level-top { + @include lib-css(background, $_nav-level0-item-background-color); + @include lib-css(border, $_nav-level0-item-border); + @include lib-css(color, $_nav-level0-item-color); + @include lib-css(line-height, $_nav-level0-item-line-height); + @include lib-css(padding, $_nav-level0-item-padding); + @include lib-css(text-decoration, $_nav-level0-item-text-decoration); + box-sizing: border-box; + position: relative; + + &:hover, + &.ui-state-focus { + @include lib-css(background, $_nav-level0-item-background-color-hover); + @include lib-css(border, $_nav-level0-item-border-hover); + @include lib-css(color, $_nav-level0-item-color-hover); + @include lib-css(text-decoration, $_nav-level0-item-text-decoration-hover); + } + } + + &.active, + &.has-active { + > .level-top { + @include lib-css(background, $_nav-level0-item-background-color-active); + @include lib-css(border-color, $_nav-level0-item__active__border-color); + @include lib-css(border-style, $_nav-level0-item__active__border-style); + @include lib-css(border-width, $_nav-level0-item__active__border-width); + @include lib-css(color, $_nav-level0-item-color-active); + @include lib-css(text-decoration, $_nav-level0-item-text-decoration-active); + display: inline-block; + } + } + + &.parent:hover > .submenu { + overflow: visible !important; + } + + .submenu { + @include lib-css(background, $_submenu-background-color); + @include lib-css(border, $_submenu-border-width $_submenu-border-style $_submenu-border-color); + @include lib-css(box-shadow, $_submenu-box-shadow); + @include lib-css(font-size, $_submenu-font-size); + @include lib-css(font-weight, $_submenu-font-weight); + @include lib-css(min-width, $_submenu-min-width); + @include lib-css(padding, $_submenu-padding); + display: none; + left: 0; + margin: 0 !important; + padding: 0; + position: absolute; + z-index: 1; + + @include _lib-submenu-arrow( + $_submenu-arrow, + $_bg : $_submenu-background-color, + $_border : $_submenu-border-color, + $_size : $_submenu-arrow-size, + $_left : $_submenu-arrow-left + ); + + a { + display: block; + line-height: inherit; + @include lib-css(background, $_submenu-item-background-color); + @include lib-css(border, $_submenu-item-border); + @include lib-css(color, $_submenu-item-color); + @include lib-css(padding, $_submenu-item-padding); + @include lib-css(text-decoration, $_submenu-item-text-decoration); + + &:hover, + &.ui-state-focus { + @include lib-css(background, $_submenu-item__hover__background-color); + @include lib-css(border, $_submenu-item-border-hover); + @include lib-css(color, $_submenu-item-color-hover); + @include lib-css(text-decoration, $_submenu-item-text-decoration-hover); + } + } + + .active > a { + @include lib-css(background, $_submenu-item-background-color-active); + @include lib-css(border-color, $_submenu-item__active__border-color); + @include lib-css(border-style, $_submenu-item__active__border-style); + @include lib-css(border-width, $_submenu-item__active__border-width); + @include lib-css(color, $_submenu-item-color-active); + @include lib-css(text-decoration, $_submenu-item-text-decoration-active); + } + + .submenu { + top: 0 !important; + left: 100% !important; + } + + .submenu-reverse { + left: auto !important; + right: 100%; + } + } + + &.more { + position: relative; + @include lib-icon-font( + $icon-pointer-down, + $_icon-font-size : 26px, + $_icon-font-position : after + ); + + &:before { + display: none; + } + + &:after { + cursor: pointer; + padding: 8px 12px; + position: relative; + z-index: 1; + } + + &:hover > .submenu { + overflow: visible !important; + } + + li { + display: block; + } + } + } + } +} + +// Submenu arrow +@mixin _lib-submenu-arrow( + $_submenu-arrow, + $_bg, + $_border, + $_size, + $_left +){ + @if $_submenu-arrow == true { + @if iscolor($_bg) and iscolor($_border) { + $_outer-size: $_size + 1; + $_outer-left: $_left - 1; + @include lib-css(margin-top, $_outer-size); + + > ul { + @include lib-css(margin-top, $_outer-size); + + &:before, + &:after { + content: ''; + display: block; + overflow: hidden; + position: absolute; + } + + &:before { + @include lib-css(color, $_bg); + @include lib-css(left, $_left); + @include lib-css(top, -$_size*2); + @include lib-arrow(up, $_size, $_bg); + z-index: 4; + } + + &:after { + @include lib-arrow(up, $_outer-size, $_border); + @include lib-css(color, $_border); + @include lib-css(left, $_outer-left); + @include lib-css(top, -$_outer-size*2); + z-index: 3; + } + } + } + + @if iscolor($_bg) and iscolor($_border) == false { + @include lib-css(margin-top, -$_size); + + > ul { + @include lib-css(margin-top, $_size); + + &:before { + @include lib-arrow(up, $_size, $_bg); + @include lib-css(color, $_bg); + @include lib-css(left, $_left); + @include lib-css(top, -$_size*2); + content: ''; + display: block; + overflow: hidden; + position: absolute; + z-index: 4; + } + } + } + + @if iscolor($_border) and iscolor($_bg) == false { + @include lib-css(margin-top, -$_size); + + > ul { + @include lib-css(margin-top, $_size); + + &:before { + @include lib-arrow(up, $_size, $_border); + @include lib-css(color, $_border); + @include lib-css(left, $_left); + @include lib-css(top, -$_size*2); + content: ''; + display: block; + overflow: hidden; + position: absolute; + z-index: 4; + } + } + } + } +} diff --git a/src/scss/boilerplate/magento-ui/_pages.scss b/src/scss/boilerplate/magento-ui/_pages.scss new file mode 100755 index 0000000..1272ba9 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_pages.scss @@ -0,0 +1,430 @@ +// +// Pager +// _____________________________________________ + +// +// When pager items have solid or don't have background +// --------------------------------------------- + +@mixin lib-pager( + $_pager-label-display : $pager-label__display, + $_pager-item-display : $pager-item__display, + $_pager-reset-spaces : $pager-reset-spaces, + $_pager-font-size : $pager__font-size, + $_pager-font-weight : $pager__font-weight, + $_pager-line-height : $pager__line-height, + $_pager-item-margin : $pager-item__margin, + $_pager-item-padding : $pager-item__padding, + $_pager-actions-padding : $pager-actions__padding, + + // Page current + $_pager-current-font-weight : $pager-current__font-weight, + $_pager-current-color : $pager-current__color, + $_pager-current-background : $pager-current__background, + $_pager-current-border : $pager-current__border, + $_pager-current-gradient : $pager-current__gradient, + $_pager-current-gradient-direction : $pager-current__gradient-direction, + $_pager-current-gradient-color-start : $pager-current__gradient-color-start, + $_pager-current-gradient-color-end : $pager-current__gradient-color-end, + + // Page item - text color + $_pager-color : $pager__color, + $_pager-color-visited : $pager__visited__color, + $_pager-color-hover : $pager__hover__color, + $_pager-color-active : $pager__active__color, + + // Page item - background + $_pager-background : $pager__background, + $_pager-background-visited : $pager__visited__background, + $_pager-background-hover : $pager__hover__background, + $_pager-background-active : $pager__active__background, + + // Page item - border + $_pager-border : $pager__border, + $_pager-border-visited : $pager__visited__border, + $_pager-border-hover : $pager__hover__border, + $_pager-border-active : $pager__active__border, + + // Page item - text decoration + $_pager-text-decoration : $pager__text-decoration, + $_pager-text-decoration-hover : $pager__text-decoration, + + // Page item gradient + $_pager-gradient : $pager__gradient, + $_pager-gradient-direction : $pager__gradient-direction, + $_pager-gradient-color-start : $pager__gradient-color-start, + $_pager-gradient-color-end : $pager__gradient-color-end, + $_pager-gradient-color-start-visited : $pager__visited__gradient-color-start, + $_pager-gradient-color-end-visited : $pager__visited__gradient-color-end, + $_pager-gradient-color-start-hover : $pager__hover__gradient-color-start, + $_pager-gradient-color-end-hover : $pager__hover__gradient-color-end, + $_pager-gradient-color-start-active : $pager__active__gradient-color-start, + $_pager-gradient-color-end-active : $pager__active__gradient-color-end, + + // Page action item (previous-next) + $_pager-action-text-decoration : $pager-action__text-decoration, + $_pager-action-text-decoration-hover : $pager-action__hover__text-decoration, + + // Page action item (previous-next) - default + $_pager-action-color : $pager-action__color, + $_pager-action-border : $pager-action__border, + $_pager-action-background : $pager-action__background, + $_pager-action-gradient-color-start : $pager__gradient-color-start, + $_pager-action-gradient-color-end : $pager__gradient-color-end, + $_pager-action-text-decoration : $pager-action__text-decoration, + + // Page action item (previous-next) - visited + $_pager-action-color-visited : $pager-action__visited__color, + $_pager-action-border-visited : $pager-action__visited__border, + $_pager-action-background-visited : $pager-action__visited__background, + $_pager-action-gradient-color-start-visited : $pager__visited__gradient-color-start, + $_pager-action-gradient-color-end-visited : $pager__visited__gradient-color-end, + + // Page action item (previous-next) - hover + $_pager-action-color-hover : $pager-action__hover__color, + $_pager-action-border-hover : $pager-action__hover__border, + $_pager-action-background-hover : $pager-action__hover__background, + $_pager-action-gradient-color-start-hover : $pager__hover__gradient-color-start, + $_pager-action-gradient-color-end-hover : $pager__hover__gradient-color-end, + $_pager-action-text-decoration-hover : $pager-action__text-decoration, + + // Page action item (previous-next) - active + $_pager-action-color-active : $pager-action__active__color, + $_pager-action-border-active : $pager-action__active__border, + $_pager-action-background-active : $pager-action__active__background, + $_pager-action-gradient-color-start-active : $pager__active__gradient-color-start, + $_pager-action-gradient-color-end-active : $pager__active__gradient-color-end, + + // Page action item (previous-next) - gradient + $_pager-action-gradient : $pager__gradient, + $_pager-action-gradient-direction : $pager__gradient-direction, + + // Page action icons + $_pager-icon-use : $pager-icon__use, + $_pager-icon-previous-content : $pager-icon__previous-content, + $_pager-icon-next-content : $pager-icon__next-content, + $_pager-icon-font : $pager-icon__font, + $_pager-icon-font-size : $pager-icon__font-size, + $_pager-icon-font-line-height : $pager-icon__font-line-height, + $_pager-icon-font-margin : $pager-icon__font-margin, + $_pager-icon-font-vertical-align : $pager-icon__font-vertical-align, + $_pager-icon-font-position : $pager-icon__position, + $_pager-icon-font-text-hide : $pager-icon__text-hide +) { + @include _lib-pager-label-display( // To hide or to display label + $_pager-label-display : $_pager-label-display, + $_pager-font-size : $_pager-font-size, + $_pager-font-weight : $_pager-font-weight, + $_pager-line-height : $_pager-line-height + ); + + .items { + @include _lib-pager-inline-block-spaces-container( + $_pager-reset-spaces, + $_pager-item-display + ); + @include lib-list-reset-styles(); + @include lib-css(display, $_pager-item-display); + @include lib-css(font-weight, $_pager-font-weight); + } + + .item { + @include _lib-pager-inline-block-spaces-item( + $_pager-reset-spaces, + $_pager-item-display, + $_pager-font-size, + $_pager-line-height + ); + @include lib-css(margin, $_pager-item-margin); + @include lib-css(display, $_pager-item-display); + + .label { + @include lib-visually-hidden(); + } + } + + a.page { + @include lib-css(background, $_pager-background); + @include lib-background-gradient( + $_pager-gradient-color-start, + $_pager-gradient-color-end, + $_pager-gradient-direction, + $_pager-gradient + ); + @include lib-css(border, $_pager-border); + @include lib-css(color, $_pager-color); + @include lib-css(display, $_pager-item-display); + @include lib-css(padding, $_pager-item-padding); + @include lib-css(text-decoration, $_pager-text-decoration); + + &:visited { + @include lib-css(background, $_pager-background-visited); + @include lib-background-gradient( + $_pager-gradient-color-start-visited, + $_pager-gradient-color-end-visited, + $_pager-gradient-direction, + $_pager-gradient + ); + @include lib-css(border, $_pager-border-visited); + @include lib-css(color, $_pager-color-visited); + } + + &:hover { + @include lib-css(background, $_pager-background-hover); + @include lib-background-gradient( + $_pager-gradient-color-start-hover, + $_pager-gradient-color-end-hover, + $_pager-gradient-direction, + $_pager-gradient + ); + @include lib-css(border, $_pager-border-hover); + @include lib-css(color, $_pager-color-hover); + @include lib-css(text-decoration, $_pager-text-decoration-hover); + } + + &:active { + @include lib-css(background, $_pager-background-active); + @include lib-background-gradient( + $_pager-gradient-color-start-active, + $_pager-gradient-color-end-active, + $_pager-gradient-direction, + $_pager-gradient + ); + @include lib-css(border, $_pager-border-active); + @include lib-css(color, $_pager-color-active); + } + } + + strong.page { + @include lib-css(background, $_pager-current-background); + @include lib-background-gradient( + $_pager-current-gradient-color-start, + $_pager-current-gradient-color-end, + $_pager-current-gradient-direction, + $_pager-current-gradient + ); + @include lib-css(border, $_pager-current-border); + @include _lib-pager-inline-block-spaces-item( + $_pager-reset-spaces, + $_pager-item-display, + $_pager-font-size, + $_pager-line-height + ); + @include lib-css(color, $_pager-current-color); + @include lib-css(display, $_pager-item-display); + @include lib-css(font-weight, $_pager-current-font-weight); + @include lib-css(padding, $_pager-item-padding); + } + + .action { + @include lib-css(background, $_pager-action-background); + @include lib-background-gradient( + $_pager-action-gradient-color-start, + $_pager-action-gradient-color-end, + $_pager-gradient-direction, + $_pager-action-gradient + ); + @include lib-css(border, $_pager-action-border); + @include lib-css(color, $_pager-action-color); + @include lib-css(display, $_pager-item-display); + @include lib-css(padding, $_pager-actions-padding); + @include lib-css(text-decoration, $_pager-action-text-decoration); + + &:visited { + @include lib-css(background, $_pager-action-background-visited); + @include lib-background-gradient( + $_pager-action-gradient-color-start-visited, + $_pager-action-gradient-color-end-visited, + $_pager-action-gradient-direction, + $_pager-action-gradient + ); + @include lib-css(border, $_pager-action-border-visited); + @include lib-css(color, $_pager-action-color-visited); + } + + &:hover { + @include lib-css(background, $_pager-action-background-hover); + @include lib-background-gradient( + $_pager-action-gradient-color-start-hover, + $_pager-action-gradient-color-end-hover, + $_pager-action-gradient-direction, + $_pager-action-gradient + ); + @include lib-css(border, $_pager-action-border-hover); + @include lib-css(color, $_pager-action-color-hover); + @include lib-css(text-decoration, $_pager-action-text-decoration-hover); + } + + &:active { + @include lib-css(background, $_pager-action-background-active); + @include lib-background-gradient( + $_pager-action-gradient-color-start-active, + $_pager-action-gradient-color-end-active, + $_pager-action-gradient-direction, + $_pager-action-gradient + ); + @include lib-css(border, $_pager-action-border-active); + @include lib-css(color, $_pager-action-color-active); + } + + &.next { + @include _lib-pager-icon ( + $_icon-font-content : $_pager-icon-next-content, + $_pager-icon-use : $_pager-icon-use, + $_icon-font : $_pager-icon-font, + $_icon-font-size : $_pager-icon-font-size, + $_icon-font-line-height : $_pager-icon-font-line-height, + $_icon-font-color : $_pager-action-color, + $_icon-font-color-visited : $_pager-action-color-visited, + $_icon-font-color-hover : $_pager-action-color-hover, + $_icon-font-color-active : $_pager-action-color-active, + $_icon-font-margin : $_pager-icon-font-margin, + $_icon-font-vertical-align : $_pager-icon-font-vertical-align, + $_icon-font-position : $_pager-icon-font-position, + $_icon-font-text-hide : $_pager-icon-font-text-hide + ); + } + + &.previous { + @include _lib-pager-icon ( + $_icon-font-content : $_pager-icon-previous-content, + $_pager-icon-use : $_pager-icon-use, + $_icon-font : $_pager-icon-font, + $_icon-font-size : $_pager-icon-font-size, + $_icon-font-line-height : $_pager-icon-font-line-height, + $_icon-font-color : $_pager-action-color, + $_icon-font-color-visited : $_pager-action-color-visited, + $_icon-font-color-hover : $_pager-action-color-hover, + $_icon-font-color-active : $_pager-action-color-active, + $_icon-font-margin : $_pager-icon-font-margin, + $_icon-font-vertical-align : $_pager-icon-font-vertical-align, + $_icon-font-position : $_pager-icon-font-position, + $_icon-font-text-hide : $_pager-icon-font-text-hide + ); + } + } +} + +// Delete spaces between elements when pager items have display: inline-block +@mixin _lib-pager-inline-block-spaces-container( + $_pager-reset-spaces, + $_pager-item-display +) { + @if $_pager-reset-spaces == true and $_pager-item-display == inline-block { + @include lib-inline-block-space-container(); + white-space: nowrap; + } +} + +@mixin _lib-pager-inline-block-spaces-item( + $_pager-reset-spaces, + $_pager-item-display, + $_pager-font-size, + $_pager-line-height +) { + @if $_pager-reset-spaces == true and $_pager-item-display == inline-block { + @include lib-inline-block-space-item( + $_font-size : $_pager-font-size, + $_line-height : $_pager-line-height + ); + } +} + +// Display or hide "page" label +@mixin _lib-pager-label-display( + $_pager-label-display, + $_pager-font-size, + $_pager-font-weight, + $_pager-line-height +) { + @if $_pager-label-display == none or $_pager-label-display == false { + > .label { + @include lib-visually-hidden(); + } + } + @else { + > .label { + @include lib-css(display, $_pager-label-display); + @include lib-css(font-weight, $_pager-font-weight); + @include lib-inline-block-space-item( + $_font-size : $_pager-font-size, + $_line-height : $_pager-line-height + ); + + &:after { + content: ': '; + } + } + } +} + + +@mixin _lib-pager-icon ( + $_icon-font-content, + $_pager-icon-use, + $_icon-font, + $_icon-font-size, + $_icon-font-line-height, + $_icon-font-color, + $_icon-font-color-visited, + $_icon-font-color-hover, + $_icon-font-color-active, + $_icon-font-margin, + $_icon-font-vertical-align, + $_icon-font-position, + $_icon-font-text-hide +) { + @if $_pager-icon-use == true { + @if $_icon-font-position == before { + &:visited { + &:before { + @include lib-css(color, $_icon-font-color-visited); + } + } + + &:active { + &:before { + @include lib-css(color, $_icon-font-color-active); + } + } + + @include lib-icon-font( + $_icon-font-content : $_icon-font-content, + $_icon-font : $_icon-font, + $_icon-font-size : $_icon-font-size, + $_icon-font-line-height : $_icon-font-line-height, + $_icon-font-color : $_icon-font-color, + $_icon-font-color-hover : $_icon-font-color-hover, + $_icon-font-color-active : $_icon-font-color-active, + $_icon-font-margin : $_icon-font-margin, + $_icon-font-vertical-align : $_icon-font-vertical-align, + $_icon-font-position : $_icon-font-position, + $_icon-font-text-hide : $_icon-font-text-hide + ); + } + + @if $_icon-font-position == after { + @include lib-icon-font( + $_icon-font-content : $_icon-font-content, + $_icon-font : $_icon-font, + $_icon-font-size : $_icon-font-size, + $_icon-font-line-height : $_icon-font-line-height, + $_icon-font-color : $_icon-font-color, + $_icon-font-color-hover : $_icon-font-color-hover, + $_icon-font-color-active : $_icon-font-color-active, + $_icon-font-margin : $_icon-font-margin, + $_icon-font-vertical-align : $_icon-font-vertical-align, + $_icon-font-position : $_icon-font-position, + $_icon-font-text-hide : $_icon-font-text-hide + ); + + &:visited:after { + @include lib-css(color, $_icon-font-color-visited); + } + + &:active:after { + @include lib-css(color, $_icon-font-color-active); + } + } + } +} diff --git a/src/scss/boilerplate/magento-ui/_popups.scss b/src/scss/boilerplate/magento-ui/_popups.scss new file mode 100755 index 0000000..8f7ccac --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_popups.scss @@ -0,0 +1,290 @@ +// +// Popups +// _____________________________________________ + +@mixin lib-popup( + $_popup-width : $popup__width, + $_popup-height : $popup__height, + $_popup-padding : $popup__padding, + $_popup-background : $popup__background, + $_popup-border : $popup__border, + $_popup-shadow : $popup__shadow, + $_popup-fade : $popup__fade, + $_popup-z-index : $popup__z-index, + + $_popup-position : $popup__position, + $_popup-position-top : $popup__position-top, + $_popup-position-right : $popup__position-right, + $_popup-position-bottom : $popup__position-bottom, + $_popup-position-left : $popup__position-left, + + $_popup-margin-top : $popup__margin-top, + $_popup-margin-right : $popup__margin-right, + $_popup-margin-bottom : $popup__margin-bottom, + $_popup-margin-left : $popup__margin-left, + + $_popup-content-height : $popup-content__height, + $_popup-header-margin : $popup-header__margin, + $_popup-content-margin : $popup-content__margin, + $_popup-footer-margin : $popup-footer__margin, + + $_popup-title-headings : $popup-title-headings, + $_popup-title-headings-level : $popup-title-headings__level, + + // Icons parameters + $_popup-button-close-icon : $popup-button-close__icon, + $_popup-button-close-reset : $popup-button-close__reset, + $_popup-button-close-position : $popup-button-close__position, + $_popup-button-close-position-top : $popup-button-close__position-top, + $_popup-button-close-position-right : $popup-button-close__position-right, + $_popup-button-close-position-bottom : $popup-button-close__position-bottom, + $_popup-button-close-position-left : $popup-button-close__position-left, + $_popup-icon-font-content : $popup-icon-font__content, + $_popup-icon-font : $popup-icon-font, + $_popup-icon-font-size : $popup-icon-font__size, + $_popup-icon-font-line-height : $popup-icon-font__line-height, + $_popup-icon-font-color : $popup-icon-font__color, + $_popup-icon-font-color-hover : $popup-icon-font__color-hover, + $_popup-icon-font-color-active : $popup-icon-font__color-active, + $_popup-icon-font-margin : $popup-icon-font__margin, + $_popup-icon-font-vertical-align : $popup-icon-font__vertical-align, + $_popup-icon-font-position : $popup-icon-font__position, + $_popup-icon-font-text-hide : $popup-icon-font__text-hide, + + // Actions toolbar parameters + $_popup-actions-toolbar : $popup-actions-toolbar, + $_popup-actions-toolbar-actions-position : $popup-actions-toolbar-actions__position, + $_popup-actions-toolbar-actions-reverse : $popup-actions-toolbar-actions__reverse, + $_popup-actions-toolbar-margin : $popup-actions-toolbar__margin, + $_popup-actions-toolbar-padding : $popup-actions-toolbar__padding, + $_popup-actions-toolbar-actions-margin : $popup-actions-toolbar-actions__margin, + $_popup-actions-toolbar-primary-actions-margin : $popup-actions-toolbar-actions-primary__margin, + $_popup-actions-toolbar-secondary-actions-margin : $popup-actions-toolbar-actions-secondary__margin, + $_popup-actions-toolbar-actions-links-margin-top : $popup-actions-toolbar-actions-links__margin-top, + $_popup-actions-toolbar-primary-actions-links-margin-top : $popup-actions-toolbar-actions-links-primary__margin-top, + $_popup-actions-toolbar-secondary-actions-links-margin-top : $popup-actions-toolbar-actions-links-secondary__margin-top +) { + @include lib-css(background, $_popup-background); + @include lib-css(border, $_popup-border); + @include lib-css(padding, $_popup-padding); + @include lib-css(width, $_popup-width); + @include _lib-popup-height($_popup-height); + @include _lib-popup-shadow($_popup-shadow); + @include _lib-popup-action-toolbar( + $_popup-actions-toolbar, + $_popup-actions-toolbar-actions-position, + $_popup-actions-toolbar-actions-reverse, + $_popup-actions-toolbar-margin, + $_popup-actions-toolbar-padding, + $_popup-actions-toolbar-actions-margin, + $_popup-actions-toolbar-primary-actions-margin, + $_popup-actions-toolbar-secondary-actions-margin, + $_popup-actions-toolbar-actions-links-margin-top, + $_popup-actions-toolbar-primary-actions-links-margin-top, + $_popup-actions-toolbar-secondary-actions-links-margin-top + ); + + .popup-header { + @include lib-css(margin, $_popup-header-margin); + + .title { + @include _lib-popup-headings( + $_popup-title-headings, + $_popup-title-headings-level + ); + } + + @include lib-css(padding-right, $_popup-icon-font-size) + } + + .popup-content { + @include _lib-popup-height($_popup-content-height); + @include lib-css(margin, $_popup-content-margin); + } + + .popup-footer { + @include lib-css(margin, $_popup-footer-margin); + } + + .popup-actions { + .action.close { + @include lib-css(position, $_popup-button-close-position); + @include lib-popup-button-close-icon( + $_popup-button-close-icon, + $_popup-icon-font-content, + $_popup-icon-font, + $_popup-icon-font-size, + $_popup-icon-font-line-height, + $_popup-icon-font-color, + $_popup-icon-font-color-hover, + $_popup-icon-font-color-active, + $_popup-icon-font-margin, + $_popup-icon-font-vertical-align, + $_popup-icon-font-position, + $_popup-icon-font-text-hide + ); + @include _lib-popup-button-close-reset( + $_popup-button-close-reset + ); + @include lib-css(bottom, $_popup-button-close-position-bottom); + @include lib-css(left, $_popup-button-close-position-left); + @include lib-css(right, $_popup-button-close-position-right); + @include lib-css(top, $_popup-button-close-position-top); + } + } + + @include _lib-popup-fade($_popup-fade); + + @include lib-css(bottom, $_popup-position-bottom); + @include lib-css(left, $_popup-position-left); + @include lib-css(margin-bottom, $_popup-margin-bottom); + @include lib-css(margin-left, $_popup-margin-left); + @include lib-css(margin-right, $_popup-margin-right); + @include lib-css(margin-top, $_popup-margin-top); + @include lib-css(position, $_popup-position); + @include lib-css(right, $_popup-position-right); + @include lib-css(top, $_popup-position-top); + @include lib-css(z-index, $_popup-z-index); + display: none; + opacity: 0; + + &.active { + opacity: 1; + } +} + +@mixin lib-window-overlay( + $_overlay-background: $overlay__background, + $_overlay-opacity: $overlay__opacity, + $_overlay-opacity-old: $overlay__opacity-old, + $_overlay-fade: $overlay__fade, + $_overlay-z-index: $overlay__z-index +) { + @include _lib-popup-fade($_overlay-fade); + @include lib-css(background, $_overlay-background); + @include lib-css(z-index, $_overlay-z-index); + bottom: 0; + left: 0; + opacity: 0; + position: fixed; + right: 0; + top: 0; + + &.active { + @include lib-css(opacity, $_overlay-opacity); + + @if $_overlay-opacity-old != false { + filter: alpha(opacity=$_overlay-opacity-old); + } + } +} + +// +// Internal use mixins +// --------------------------------------------- + +// Popup fade +@mixin _lib-popup-fade($_popup-fade) { + @if $_popup-fade != '' { + @include lib-css(transition, $_popup-fade); + } +} + +// Popup shadow +@mixin _lib-popup-shadow($_popup-shadow) { + @if $_popup-shadow != '' and $_popup-shadow != none { + @include lib-css(box-shadow, $_popup-shadow); + } +} + +// Popup height +@mixin _lib-popup-height($_popup-height) { + @if $_popup-height != auto { + overflow-y: auto; + @include lib-css(max-height, $_popup-height); + } +} + +// Popup Headings +@mixin _lib-popup-headings( + $_popup-title-headings, + $_popup-title-headings-level +) { + @if $_popup-title-headings == true { + @include lib-heading($_popup-title-headings-level); + } +} + +// Popup action-toolbar +@mixin _lib-popup-action-toolbar( + $_popup-actions-toolbar, + $_popup-actions-toolbar-actions-position, + $_popup-actions-toolbar-actions-reverse, + $_popup-actions-toolbar-margin, + $_popup-actions-toolbar-padding, + $_popup-actions-toolbar-actions-margin, + $_popup-actions-toolbar-primary-actions-margin, + $_popup-actions-toolbar-secondary-actions-margin, + $_popup-actions-toolbar-actions-links-margin-top, + $_popup-actions-toolbar-primary-actions-links-margin-top, + $_popup-actions-toolbar-secondary-actions-links-margin-top +) { + @if $_popup-actions-toolbar == true { + .popup-footer { + .actions.toolbar { + @include lib-actions-toolbar( + $_actions-toolbar-actions-position : $_popup-actions-toolbar-actions-position, + $_actions-toolbar-actions-reverse : $_popup-actions-toolbar-actions-reverse, + $_actions-toolbar-margin : $_popup-actions-toolbar-margin, + $_actions-toolbar-padding : $_popup-actions-toolbar-padding, + $_actions-toolbar-actions-margin : $_popup-actions-toolbar-actions-margin, + $_actions-toolbar-primary-actions-margin : $_popup-actions-toolbar-primary-actions-margin, + $_actions-toolbar-secondary-actions-margin : $_popup-actions-toolbar-secondary-actions-margin, + $_actions-toolbar-actions-links-margin-top : $_popup-actions-toolbar-actions-links-margin-top, + $_actions-toolbar-primary-actions-links-margin-top : $_popup-actions-toolbar-primary-actions-links-margin-top, + $_actions-toolbar-secondary-actions-links-margin-top : $_popup-actions-toolbar-secondary-actions-links-margin-top + ); + } + } + } +} + +// Popup close button use icon +@mixin lib-popup-button-close-icon( + $_popup-button-close-icon, + $_popup-icon-font-content, + $_popup-icon-font, + $_popup-icon-font-size, + $_popup-icon-font-line-height, + $_popup-icon-font-color, + $_popup-icon-font-color-hover, + $_popup-icon-font-color-active, + $_popup-icon-font-margin, + $_popup-icon-font-vertical-align, + $_popup-icon-font-position, + $_popup-icon-font-text-hide +) { + @if $_popup-button-close-icon == true { + @include lib-button-icon( + $_icon-font-content : $_popup-icon-font-content, + $_icon-font : $_popup-icon-font, + $_icon-font-size : $_popup-icon-font-size, + $_icon-font-line-height : $_popup-icon-font-line-height, + $_icon-font-color : $_popup-icon-font-color, + $_icon-font-color-hover : $_popup-icon-font-color-hover, + $_icon-font-color-active : $_popup-icon-font-color-active, + $_icon-font-margin : $_popup-icon-font-margin, + $_icon-font-vertical-align : $_popup-icon-font-vertical-align, + $_icon-font-position : $_popup-icon-font-position, + $_icon-font-text-hide : $_popup-icon-font-text-hide + ); + } +} +// Popup close button reset +@mixin _lib-popup-button-close-reset ( + $_popup-button-close-reset +) { + @if $_popup-button-close-reset == true { + @include lib-button-reset(); + } +} diff --git a/src/scss/boilerplate/magento-ui/_rating.scss b/src/scss/boilerplate/magento-ui/_rating.scss new file mode 100755 index 0000000..a831ed5 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_rating.scss @@ -0,0 +1,224 @@ +// +// Ratings +// _____________________________________________ + +// Rating-vote mixin +@mixin lib-rating-vote( + $_icon-count : $rating-icon__count, + $_icon-content : $rating-icon__content, + $_icon-font : $rating-icon__font, + $_icon-font-size : $rating-icon__font-size, + $_icon-letter-spacing : $rating-icon__letter-spacing, + $_icon-color : $rating-icon__color, + $_icon-color-active : $rating-icon__active__color +) { + overflow: hidden; + + &:before { + @include _lib-rating-icon-defalt( + $_icon-font, + $_icon-font-size, + $_icon-letter-spacing, + $_icon-color + ); + @include lib-rating-icons-content( + $_icon-count, + $_icon-content + ); + display: block; + position: absolute; + z-index: 1; + } + + input[type="radio"] { + @include lib-visually-hidden(); + + &:focus, + &:checked { + + label { + &:before { + opacity: 1; + } + } + } + } + + label { + cursor: pointer; + display: block; + position: absolute; + + span { + @include lib-visually-hidden(); + } + + &:before { + @include _lib-rating-icon-defalt( + $_icon-font, + $_icon-font-size, + $_icon-letter-spacing, + $_icon-color-active + ); + opacity: 0; + } + + &:hover { + &:before { + opacity: 1; + } + + ~ label { + &:before { + opacity: 0; + } + } + } + } + + @include _lib-rating-iteration( + $_icon-content, + $_icon-count + ); +} + +// Rating-summary mixin +@mixin lib-rating-summary( + $_icon-count : $rating-icon__count, + $_icon-content : $rating-icon__content, + $_icon-font : $rating-icon__font, + $_icon-font-size : $rating-icon__font-size, + $_icon-letter-spacing : $rating-icon__letter-spacing, + $_icon-color : $rating-icon__color, + $_icon-color-active : $rating-icon__active__color, + $_label-hide : $rating-label__hide +) { + overflow: hidden; + white-space: nowrap; + @include _lib-rating-label-hide($_label-hide); + + .rating-result { + @include lib-css(width, ($_icon-font-size * $_icon-count) + ceil($_icon-letter-spacing * ($_icon-count - 1))); + display: inline-block; + position: relative; + vertical-align: middle; + + &:before { + left: 0; + position: absolute; + top: 0; + width: 100%; + z-index: 1; + @include _lib-rating-summary-icon-default( + $_icon-font, + $_icon-font-size, + $_icon-letter-spacing, + $_icon-count, + $_icon-content, + $_icon-color + ); + } + + > span { + display: block; + overflow: hidden; + + &:before { + position: relative; + z-index: 2; + @include _lib-rating-summary-icon-default( + $_icon-font, + $_icon-font-size, + $_icon-letter-spacing, + $_icon-count, + $_icon-content, + $_icon-color-active + ); + } + + span { + @include lib-visually-hidden(); + } + } + } +} + +@mixin lib-rating-summary-label-hide() { + .label { + @include lib-visually-hidden(); + } +} + +// Internal use mixins +@mixin _lib-rating-label-hide($_label-hide) { + @if $_label-hide == true { + @include lib-rating-summary-label-hide(); + } +} + +@mixin _lib-rating-iteration( + $_icon-content, + $_icon-count +) { + @for $_index from $_icon-count to 0 { + .rating-#{$_index} { + z-index: $_icon-count - ($_index - 2); + &:before { + @include lib-rating-icons-content($_index, $_icon-content); + } + } + } +} + +@mixin _lib-rating-icon-defalt( + $_icon-font, + $_icon-font-size, + $_icon-letter-spacing, + $_icon-color +) { + @include lib-css(color, $_icon-color); + @include lib-css(font-family, $_icon-font); + @include lib-css(font-size, $_icon-font-size); + @include lib-css(height, $_icon-font-size); + @include lib-css(letter-spacing, $_icon-letter-spacing); + @include lib-css(line-height, $_icon-font-size); + font-style: normal; + font-weight: normal; + speak: none; + vertical-align: top; + -webkit-font-smoothing: antialiased; +} + +@mixin _lib-rating-summary-icon-default( + $_icon-font, + $_icon-font-size, + $_icon-letter-spacing, + $_icon-count, + $_icon-content, + $_icon-color +) { + -webkit-font-smoothing: antialiased; + @include lib-css(color, $_icon-color); + @include lib-css(font-family, $_icon-font); + @include lib-css(font-size, $_icon-font-size); + @include lib-css(height, $_icon-font-size); + @include lib-css(letter-spacing, $_icon-letter-spacing); + @include lib-css(line-height, $_icon-font-size); + @include lib-rating-icons-content($_icon-count, $_icon-content); + display: block; + font-style: normal; + font-weight: normal; + speak: none; +} + +@mixin lib-rating-icons-content( + $_icon-count: $rating-icon__count, + $_icon-content: $rating-icon__content +) { + $_icon-content-result: $_icon-content; + + @for $_index from $_icon-count to 1 { + $_icon-content-result: $_icon-content-result + $_icon-content; + } + + content: $_icon-content-result; +} diff --git a/src/scss/boilerplate/magento-ui/_resets.scss b/src/scss/boilerplate/magento-ui/_resets.scss new file mode 100755 index 0000000..9411c04 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_resets.scss @@ -0,0 +1,103 @@ +// +// Resetes +// _____________________________________________ + +// +// Magento reset +// --------------------------------------------- + +@mixin lib-magento-reset() { + body { + margin: 0; + padding: 0; + } + + article, + aside, + details, + figcaption, + figure, + main, + footer, + header, + nav, + section, + summary { + display: block; + } + + audio, + canvas, + video { + display: inline-block; + } + + audio:not([controls]) { + display: none; + height: 0; + } + + nav ul, + nav ol { + list-style: none none; + } + + img { + border: 0; + } + + img, + object, + video, + embed { + height: auto; + max-width: 100%; + } + + svg:not(:root) { + overflow: hidden; + } + + figure { + margin: 0; + } + + @include lib-typography-all(); + + table { + @include lib-table(); + } + + button { + @include lib-button(); + &::-moz-focus-inner { + border: 0; + padding: 0; + } + } + + @include lib-form-element-all(); + form { + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } + + address { + font-style: normal; + } + + * { + &:focus { + box-shadow: none; + outline: 0; + } + } + + ._keyfocus *, + input:not([disabled]), + textarea:not([disabled]), + select:not([disabled]) { + &:focus { + @include lib-css(box-shadow, $focus__box-shadow); + } + } +} diff --git a/src/scss/boilerplate/magento-ui/_sections.scss b/src/scss/boilerplate/magento-ui/_sections.scss new file mode 100755 index 0000000..d40cba3 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_sections.scss @@ -0,0 +1,283 @@ +// +// Sections +// _____________________________________________ + +@mixin lib-data-tabs__base( + $_tab-control-height__base : $tab-control__height__base +) { + @include lib-clearfix(); + position: relative; + z-index: 1; + + > .item.title { + float: left; + width: auto; + + > .switch { + @include lib-css(height, $_tab-control-height__base); + display: block; + position: relative; + z-index: 2; + } + } + + > .item.content { + @include lib-clearfix(); + @include lib-css(margin-top, $_tab-control-height__base); + box-sizing: border-box; + float: right; + margin-left: -100%; + width: 100%; + + &.active { + display: block; + } + } +} + +@mixin lib-data-tabs( + $_tab-control-font-family : $tab-control__font-family, + $_tab-control-font-size : $tab-control__font-size, + $_tab-control-font-style : $tab-control__font-style, + $_tab-control-font-weight : $tab-control__font-weight, + $_tab-control-line-height : $tab-control__line-height, + + $_tab-control-background-color : $tab-control__background-color, + $_tab-control-color : $tab-control__color, + $_tab-control-text-decoration : $tab-control__text-decoration, + + $_tab-control-color-visited : $tab-control__color, + $_tab-control-text-decoration-visited : $tab-control__text-decoration, + + $_tab-control-background-color-hover : $tab-control__hover__background-color, + $_tab-control-color-hover : $tab-control__hover__color, + $_tab-control-text-decoration-hover : $tab-control__text-decoration, + + $_tab-control-background-color-active : $tab-control__active__background-color, + $_tab-control-color-active : $tab-control__active__color, + $_tab-control-text-decoration-active : $tab-control__text-decoration, + + $_tab-control-height : $tab-control__height, + $_tab-control-margin-right : $tab-control__margin-right, + + $_tab-control-padding-top : $tab-control__padding-top, + $_tab-control-padding-right : $tab-control__padding-right, + $_tab-control-padding-bottom : $tab-control__padding-bottom, + $_tab-control-padding-left : $tab-control__padding-left, + + $_tab-control-border-width : $tab-control__border-width, + $_tab-control-border-color : $tab-control__border-color, + + $_tab-content-background-color : $tab-content__background-color, + $_tab-content-border : $tab-content__border, + $_tab-content-border-top-status : $tab-content__border-top-status, + $_tab-content-margin-top : $tab-content__margin-top, + + $_tab-content-padding-top : $tab-content__padding-top, + $_tab-content-padding-right : $tab-content__padding-right, + $_tab-content-padding-bottom : $tab-content__padding-bottom, + $_tab-content-padding-left : $tab-content__padding-left +) { + @include lib-data-tabs__base(); + > .item.title { + @include lib-css(margin, 0 $_tab-control-margin-right 0 0); + > .switch { + @include lib-typography( + $_color : $_tab-control-color, + $_font-size : $_tab-control-font-size, + $_font-family : $_tab-control-font-family, + $_font-weight : $_tab-control-font-weight, + $_font-style : $_tab-control-font-style, + $_line-height : $_tab-control-line-height + ); + @include lib-link( + $_link-color : $_tab-control-color, + $_link-text-decoration : $_tab-control-text-decoration, + $_link-color-visited : $_tab-control-color-visited, + $_link-text-decoration-visited : $_tab-control-text-decoration-visited, + $_link-color-hover : $_tab-control-color-hover, + $_link-text-decoration-hover : $_tab-control-text-decoration-hover, + $_link-color-active : $_tab-control-color-active, + $_link-text-decoration-active : $_tab-control-text-decoration-active + ); + @include lib-css(background, $_tab-control-background-color); + @include lib-css(border, $_tab-content-border); + border-bottom: none; + @include lib-css(height, $_tab-control-height); + @include lib-css(padding, $_tab-control-padding-top $_tab-control-padding-right $_tab-control-padding-bottom $_tab-control-padding-left); + } + + &:not(.disabled) > .switch:focus, + &:not(.disabled) > .switch:hover { + @include lib-css(background, $_tab-control-background-color-hover); + } + + &:not(.disabled) > .switch:active, + &.active > .switch, + &.active > .switch:focus, + &.active > .switch:hover { + @include lib-css(background, $_tab-control-background-color-active); + @include lib-css(color, $_tab-control-color-active); + } + + &.active > .switch, + &.active > .switch:focus, + &.active > .switch:hover { + @include lib-css(padding-bottom, $_tab-control-padding-bottom + $_tab-control-border-width); + } + } + + > .item.content { + @include lib-css(background, $_tab-content-background-color); + margin-top: $_tab-content-margin-top; + padding: $_tab-content-padding-top $_tab-content-padding-right $_tab-content-padding-bottom $_tab-content-padding-left; + + @include _lib-tab-content-border( + $_tab-content-border-top-status : $_tab-content-border-top-status, + $_tab-content-border : $_tab-content-border + ); + } +} + +@mixin _lib-tab-content-border( + $_tab-content-border-top-status, + $_tab-content-border +) { + @if $_tab-content-border-top-status == true { + border: 0; + @include lib-css(border-top, $_tab-content-border); + } + @else if $_tab-content-border-top-status == false { + @include lib-css(border, $_tab-content-border); + } +} + +@mixin lib-data-accordion__base() { + margin: 0; + padding: 0; + + > .item.title { + box-sizing: border-box; + float: none; + width: 100%; + + > .switch { + display: block; + } + } + + > .item.content { + @include lib-clearfix(); + box-sizing: border-box; + display: block; + float: none; + margin: 0; + + &.active { + display: block; + } + } +} + +@mixin lib-data-accordion( + $_accordion-control-font-family : $accordion-control__font-family, + $_accordion-control-font-size : $accordion-control__font-size, + $_accordion-control-font-style : $accordion-control__font-style, + $_accordion-control-font-weight : $accordion-control__font-weight, + $_accordion-control-line-height : $accordion-control__line-height, + + $_accordion-control-border-top : $accordion-control__border-top, + $_accordion-control-border-right : $accordion-control__border-right, + $_accordion-control-border-bottom : $accordion-control__border-bottom, + $_accordion-control-border-left : $accordion-control__border-left, + + $_accordion-control-background-color : $accordion-control__background-color, + $_accordion-control-color : $accordion-control__color, + $_accordion-control-text-decoration : $accordion-control__text-decoration, + + $_accordion-control-color-visited : $accordion-control__color, + $_accordion-control-text-decoration-visited : $accordion-control__text-decoration, + + $_accordion-control-background-color-hover : $accordion-control__hover__background-color, + $_accordion-control-color-hover : $accordion-control__hover__color, + $_accordion-control-text-decoration-hover : $accordion-control__hover__text-decoration, + + $_accordion-control-background-color-active : $accordion-control__active__background-color, + $_accordion-control-color-active : $accordion-control__active__color, + $_accordion-control-text-decoration-active : $accordion-control__active__text-decoration, + + $_accordion-control-height : $accordion-control__height, + $_accordion-control-margin-bottom : $accordion-control__margin-bottom, + + $_accordion-control-padding-top : $accordion-control__padding-top, + $_accordion-control-padding-right : $accordion-control__padding-right, + $_accordion-control-padding-bottom : $accordion-control__padding-bottom, + $_accordion-control-padding-left : $accordion-control__padding-left, + + $_accordion-content-background-color : $accordion-content__background-color, + $_accordion-content-border : $accordion-content__border, + + $_accordion-content-margin : $accordion-content__margin, + $_accordion-content-padding : $accordion-content__padding +) { + @include lib-data-accordion__base(); + @if $_accordion-control-margin-bottom == 0 { + > .item.title { + @include lib-css(margin, 0); + } + } + @else { + > .item.title { + @include lib-css(margin, 0 0 $_accordion-control-margin-bottom); + } + } + > .item.title { + > .switch { + @include lib-css(background, $_accordion-control-background-color); + @include lib-css(border-bottom, $_accordion-control-border-bottom); + @include lib-css(border-left, $_accordion-control-border-left); + @include lib-css(border-right, $_accordion-control-border-right); + @include lib-css(border-top, $_accordion-control-border-top); + @include lib-css(height, $_accordion-control-height); + @include lib-css(padding, $_accordion-control-padding-top $_accordion-control-padding-right $_accordion-control-padding-bottom $_accordion-control-padding-left); + @include lib-typography( + $_color : $_accordion-control-color, + $_font-family : $_accordion-control-font-family, + $_font-size : $_accordion-control-font-size, + $_font-style : $_accordion-control-font-style, + $_font-weight : $_accordion-control-font-weight, + $_line-height : $_accordion-control-line-height + ); + @include lib-link( + $_link-color : $_accordion-control-color, + $_link-text-decoration : $_accordion-control-text-decoration, + $_link-color-visited : $_accordion-control-color-visited, + $_link-text-decoration-visited : $_accordion-control-text-decoration-visited, + $_link-color-hover : $_accordion-control-color-hover, + $_link-text-decoration-hover : $_accordion-control-text-decoration-hover, + $_link-color-active : $_accordion-control-color-active, + $_link-text-decoration-active : $_accordion-control-text-decoration-active + ); + } + + &:not(.disabled) > .switch:focus, + &:not(.disabled) > .switch:hover { + @include lib-css(background, $_accordion-control-background-color-hover); + } + + &:not(.disabled) > .switch:active, + &.active > .switch, + &.active > .switch:focus, + &.active > .switch:hover { + @include lib-css(background, $_accordion-control-background-color-active); + @include lib-css(padding-bottom, $_accordion-control-padding-bottom); + } + } + + > .item.content { + @include lib-css(background, $_accordion-content-background-color); + @include lib-css(border, $_accordion-content-border); + @include lib-css(margin, $_accordion-content-margin); + @include lib-css(padding, $_accordion-content-padding); + } +} diff --git a/src/scss/boilerplate/magento-ui/_tables.scss b/src/scss/boilerplate/magento-ui/_tables.scss new file mode 100755 index 0000000..4ec7fb7 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_tables.scss @@ -0,0 +1,494 @@ +// +// Tables +// _____________________________________________ + +@mixin lib-table( + $_table-width : $table__width, + $_cell-padding-vertical : $table-cell__padding-vertical, + $_cell-padding-horizontal : $table-cell__padding-horizontal, + $_table-margin-bottom : $table__margin-bottom +) { + @include lib-css(margin-bottom, $_table-margin-bottom); + @include lib-css(width, $_table-width); + border-collapse: collapse; + border-spacing: 0; + max-width: 100%; + + th { + text-align: left; + } + + > tbody, + > tfoot { + > tr { + > th, + > td { + vertical-align: top; + } + } + } + + > thead > tr { + > th, + > td { + vertical-align: bottom; + } + } + + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + @include lib-css(padding, $_cell-padding-vertical $_cell-padding-horizontal); + } + } + } +} + +@mixin lib-table-typography( + $_table-td-font-size : $table-td__font-size, + $_table-td-color : $table-td__color, + $_table-td-font-family : $table-td__font-family, + $_table-td-font-weight : $table-td__font-weight, + $_table-td-line-height : $table-td__line-height, + $_table-td-font-style : $table-td__font-style, + $_table-th-font-size : $table-th__font-size, + $_table-th-color : $table-th__color, + $_table-th-font-family : $table-th__font-family, + $_table-th-font-weight : $table-th__font-weight, + $_table-th-line-height : $table-th__line-height, + $_table-th-font-style : $table-th__font-style +) { + > thead, + > tbody, + > tfoot { + > tr { + > td { + @include lib-typography( + $_font-size: $_table-td-font-size, + $_color: $_table-td-color, + $_font-family: $_table-td-font-family, + $_font-weight: $_table-td-font-weight, + $_line-height: $_table-td-line-height, + $_font-style: $_table-td-font-style + ); + } + + > th { + @include lib-typography( + $_font-size: $_table-th-font-size, + $_color: $_table-th-color, + $_font-family: $_table-th-font-family, + $_font-weight: $_table-th-font-weight, + $_line-height: $_table-th-line-height, + $_font-style: $_table-th-font-style + ); + } + } + } +} + +@mixin lib-table-background-color( + $_table-background-color: $table__background-color, + $_table-head-background-color: $table-head__background-color, + $_table-foot-background-color: $table-foot__background-color, + $_table-td-background-color: $table-td__background-color, + $_table-body-th-background-color: $table-body-th__background-color +) { + @include lib-css(background, $_table-background-color); + + > thead { + @include lib-css(background, $_table-head-background-color); + } + + > tfoot { + @include lib-css(background, $_table-foot-background-color); + } + + > tbody > tr > td { + @include lib-css(background, $_table-td-background-color); + } + + > tbody > tr >th { + @include lib-css(background, $_table-body-th-background-color); + } +} + +@mixin lib-table-resize( + $_td-padding-top : $table-cell__padding-vertical / 2, + $_td-padding-right : $table-cell__padding-horizontal / 2, + $_td-padding-bottom : $_td-padding-top, + $_td-padding-left : $_td-padding-right, + $_th-padding-top : $_td-padding-top, + $_th-padding-right : $_td-padding-right, + $_th-padding-bottom : $_td-padding-top, + $_th-padding-left : $_td-padding-right +) { + > thead, + > tbody, + > tfoot { + > tr { + > td { + @include lib-css(padding, $_td-padding-top $_td-padding-right $_td-padding-bottom $_td-padding-left); + } + > th { + @include lib-css(padding, $_th-padding-top $_th-padding-right $_th-padding-bottom $_th-padding-left); + } + } + } +} + +@mixin lib-table-bordered( + $_table_type : normal, + $_table_border-width : $table__border-width, + $_table_border-style : $table__border-style, + $_table_border-color : $table__border-color +) { + @if $_table_type == normal { + @include lib-css(border, $_table_border-width $_table_border-style $_table_border-color); + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + @include lib-css(border, $_table_border-width $_table_border-style $_table_border-color); + } + } + } + } + @if $_table_type == horizontal { + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + @include lib-css(border-top, $_table_border-width $_table_border-style $_table_border-color); + } + } + } + + > caption + thead, + > colgroup + thead, + > thead:first-child { + > tr:first-child { + > th, + > td { + border-top: 0; + } + } + } + + > tbody + tbody { + @include lib-css(border-top, $_table_border-width $_table_border-style $_table_border-color); + } + } + + @if $_table_type == horizontal_body { + > tbody { + > tr { + > th, + > td { + @include lib-css(border-top, $_table_border-width $_table_border-style $_table_border-color); + } + } + } + + > tbody + tbody { + @include lib-css(border-top, $_table_border-width $_table_border-style $_table_border-color); + } + } + + @if $_table_type == vertical { + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + @include lib-css(border-left, $_table_border-width $_table_border-style $_table_border-color); + &:first-child { + border-left: none; + } + } + } + } + } + + @if $_table_type == light { + border: none; + + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + border: none; + } + } + } + + > thead { + > tr { + > th, + > td { + @include lib-css(border-bottom, $_table_border-width $_table_border-style $_table_border-color); + } + } + } + } + + @if $_table_type == clear { + border: none; + + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + border: none; + } + } + } + } +} + +@mixin lib-table-striped( + $_stripped-background-color : $table-cell-stripped__background-color, + $_stripped-color : $table-cell-stripped__color, + $_stripped-direction : horizontal, + $_stripped-highlight : odd +) { + @if $_stripped-highlight == odd and $_stripped-direction == horizontal { + > tbody > tr:nth-child(odd) { + > td, + > th { + @include lib-css(background, $_stripped-background-color); + @include lib-css(color, $_stripped-color); + } + } + } + + @if $_stripped-highlight == even and $_stripped-direction == horizontal { + > tbody > tr:nth-child(even) { + > td, + > th { + @include lib-css(background, $_stripped-background-color); + @include lib-css(color, $_stripped-color); + } + } + } + + @if $_stripped-highlight == odd and $_stripped-direction == vertical { + > thead, + > tbody, + > tfoot { + > tr { + > th:nth-child(odd), + > td:nth-child(odd) { + @include lib-css(background, $_stripped-background-color); + @include lib-css(color, $_stripped-color); + } + } + } + } + + @if $_stripped-highlight == even and $_stripped-direction == vertical { + > thead, + > tbody, + > tfoot { + > tr { + > th:nth-child(even), + > td:nth-child(even) { + @include lib-css(background, $_stripped-background-color); + @include lib-css(color, $_stripped-color); + } + } + } + } +} + + +@mixin lib-table-hover( + $_table_cell-background-color-hover: $table-cell__hover__background-color, + $_table_cell-odd-background-color-hover: $_table_cell-background-color-hover +) { + > tbody > tr:nth-child(even):hover { + > td, + > th { + @include lib-css(background, $_table_cell-background-color-hover); + } + } + + > tbody > tr:nth-child(odd):hover { + > td, + > th { + @include lib-css(background, $_table_cell-odd-background-color-hover); + } + } +} + +@mixin lib-table-overflow() { + @include lib-css(margin-bottom, $table__margin-bottom); + overflow-x: auto; + overflow-y: hidden; + width: 100%; + -ms-overflow-style: -ms-autohiding-scrollbar; + -webkit-overflow-scrolling: touch; +} + +@mixin lib-table-responsive( + $_table-background-color-responsive : $table-responsive__background-color, + $_table-th-background-color-responsive : $table-responsive-th__background-color, + $_reset-table-striped : false, + $_reset-table-hover : false, + $_table-responsive-cell-padding : $table-responsive-cell__padding +) { + @if $_reset-table-striped == false and $_reset-table-hover == false { + @include _lib-responsive-table( + $_table-background-color-responsive : $_table-background-color-responsive, + $_table-responsive-cell-padding : $_table-responsive-cell-padding + ); + + > tbody > tr > th { + @include lib-css(background-color, $_table-th-background-color-responsive); + } + } + + @if $_reset-table-striped == true and $_reset-table-hover == true { + @include lib-table-striped( + $_stripped-background-color : $_table-background-color-responsive + ); + @include lib-table-hover( + $_table_cell-background-color-hover : $_table-background-color-responsive, + $_table_cell-odd-background-color-hover : $_table-background-color-responsive + ); + + @include _lib-responsive-table( + $_table-background-color-responsive : $_table-background-color-responsive, + $_table-responsive-cell-padding : $_table-responsive-cell-padding + ); + + > tbody > tr > th { + @include lib-css(background-color, $_table-th-background-color-responsive '!important'); + } + } + + @if $_reset-table-striped == true and $_reset-table-hover == false { + @include lib-table-striped( + $_stripped-background-color : $_table-background-color-responsive + ); + + @include _lib-responsive-table( + $_table-background-color-responsive : $_table-background-color-responsive, + $_table-responsive-cell-padding : $_table-responsive-cell-padding + ); + + @include lib-css(background-color, $_table-th-background-color-responsive); + } + + @if $_reset-table-striped == false and $_reset-table-hover == true { + @include lib-table-hover( + $_table_cell-background-color-hover : $_table-background-color-responsive, + $_table_cell-odd-background-color-hover : $_table-background-color-responsive + ); + + @include _lib-responsive-table( + $_table-background-color-responsive : $_table-background-color-responsive, + $_table-responsive-cell-padding : $_table-responsive-cell-padding + ); + + > tbody > tr > th { + @include lib-css(background-color, $_table-th-background-color-responsive '!important'); + } + } +} + + +@mixin lib-table-caption( + $_table-caption-hide : $table-caption__hide, + $_table-caption-font-size : $table-caption__font-size, + $_table-caption-color : $table-caption__color, + $_table-caption-font-family : $table-caption__font-family, + $_table-caption-font-weight : $table-caption__font-weight, + $_table-caption-font-style : $table-caption__font-style, + $_table-caption-line-height : $table-caption__line-height, + $_table-caption-alignment : $table-caption__alignment, + $_table-caption-margin-top : $table-caption__margin-top, + $_table-caption-margin-bottom : $table-caption__margin-bottom +) { + @if $_table-caption-hide == false { + > caption { + @include lib-typography( + $_table-caption-font-size, + $_table-caption-color, + $_table-caption-font-family, + $_table-caption-font-weight, + $_table-caption-line-height, + $_table-caption-font-style + ); + @include lib-css(margin-bottom, $_table-caption-margin-bottom); + @include lib-css(margin-top, $_table-caption-margin-top); + @include lib-css(text-align, $_table-caption-alignment); + } + } + + @if $_table-caption-hide == true { + > caption { + @include lib-visually-hidden(); + } + } +} + + +@mixin _lib-responsive-table( + $_table-background-color-responsive : $_table-background-color-responsive, + $_table-responsive-cell-padding : $_table-responsive-cell-padding +) { + @include lib-css(background, $_table-background-color-responsive); + border: none; + display: block; + + > thead > tr > th { + display: none; + } + + > tbody { + display: block; + + > tr { + display: block; + + td, + th { + border-bottom: none; + display: block; + @include lib-css(padding, $_table-responsive-cell-padding); + + &:before { + @include lib-css(padding-right, $table-cell__padding-horizontal); + content: attr(data-th)': '; + display: inline-block; + + @include lib-typography( + $_font-size : $table-th__font-size, + $_color : $table-th__color, + $_font-family : $table-th__font-family, + $_font-weight : $table-th__font-weight, + $_line-height : $table-th__line-height, + $_font-style : $table-th__font-style + ); + } + } + + td { + @include lib-css(background, $_table-background-color-responsive); + } + } + } +} diff --git a/src/scss/boilerplate/magento-ui/_tooltips.scss b/src/scss/boilerplate/magento-ui/_tooltips.scss new file mode 100755 index 0000000..9e482e3 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_tooltips.scss @@ -0,0 +1,205 @@ +// +// Tooltips +// _____________________________________________ + +@mixin lib-tooltip( + $_tooltip-position : top, + $_tooltip-selector-toggle : ".tooltip-toggle", + $_tooltip-selector-content : ".tooltip-content", + $_tooltip-background : $tooltip__background, + $_tooltip-border-color : $tooltip__border-color, + $_tooltip-border-width : $tooltip__border-width, + $_tooltip-border-radius : $tooltip__border-radius, + $_tooltip-color : $tooltip__color, + $_tooltip-cursor : $tooltip__cursor, + $_tooltip-font-size : $tooltip__font-size, + $_tooltip-font-family : $tooltip__font-family, + $_tooltip-font-weight : $tooltip__font-weight, + $_tooltip-line-height : $tooltip__line-height, + $_tooltip-font-style : $tooltip__font-style, + $_tooltip-margin : $tooltip__margin, + $_tooltip-padding : $tooltip__padding, + $_tooltip-min-width : $tooltip__min-width, + $_tooltip-max-width : $tooltip__max-width, + $_tooltip-arrow-size : $tooltip-arrow__size, + $_tooltip-arrow-offset : $tooltip-arrow__offset, + $_tooltip-z-index : $tooltip__z-index +) { + position: relative; + + #{$_tooltip-selector-content} { + @include lib-css(background, $_tooltip-background); + @include lib-css(border-radius, $_tooltip-border-radius); + @include lib-css(margin, $_tooltip-margin); + @include lib-css(max-width, $_tooltip-max-width); + @include lib-css(min-width, $_tooltip-min-width); + @include lib-css(padding, $_tooltip-padding); + @include lib-css(z-index, $_tooltip-z-index); + display: none; + position: absolute; + text-align: left; + + @include lib-typography( + $_color : $_tooltip-color, + $_font-size : $_tooltip-font-size, + $_font-family : $_tooltip-font-family, + $_font-weight : $_tooltip-font-weight, + $_line-height : $_tooltip-line-height, + $_font-style : $_tooltip-font-style + ); + + @include _lib-tooltip-border($_tooltip-border-width, $_tooltip-border-color); + + $_tooltip-arrow-after-margin: $_tooltip-arrow-size * -1; + $_tooltip-arrow-before-margin: ($_tooltip-arrow-size + round($_tooltip-border-width * 1.41421356)) * -1; + + &:after, + &:before { + border: solid transparent; + content: ''; + height: 0; + position: absolute; + width: 0; + } + + &:after { + @include lib-css(border-width, $_tooltip-arrow-size); + border-color: transparent; + } + + &:before { + @include lib-css(border-width, $_tooltip-arrow-before-margin * -1); + border-color: transparent; + } + + @include _lib-tooltip-arrow-position( + $_tooltip-position, + $_tooltip-arrow-size, + $_tooltip-background, + $_tooltip-arrow-after-margin, + $_tooltip-arrow-before-margin, + $_tooltip-arrow-offset, + $_tooltip-border-color + ); + } + + & #{$_tooltip-selector-toggle} { + @include lib-css(cursor, $_tooltip-cursor); + } + + & #{$_tooltip-selector-toggle}:hover + #{$_tooltip-selector-content}, + & #{$_tooltip-selector-toggle}:focus + #{$_tooltip-selector-content}, + &:hover #{$_tooltip-selector-content} { + display: block; + } +} + +@mixin _lib-tooltip-border( + $_tooltip-border-width, + $_tooltip-border-color +) { + @if $_tooltip-border-width != 0 and $_tooltip-border-width != false and $_tooltip-border-color != false { + @include lib-css(border, $_tooltip-border-width solid $_tooltip-border-color); + } +} + +@mixin _lib-tooltip-arrow-position( + $_tooltip-position, + $_tooltip-arrow-size, + $_tooltip-background, + $_tooltip-arrow-after-margin, + $_tooltip-arrow-before-margin, + $_tooltip-arrow-offset, + $_tooltip-border-color +) { + @if $_tooltip-position == top { + @include lib-css(margin-bottom, $_tooltip-arrow-size); + bottom: 100%; + left: 0; + + &:after, + &:before { + top: 100%; + } + &:after { + @include lib-css(border-top-color, $_tooltip-background); + @include lib-css(left, $_tooltip-arrow-offset + $_tooltip-arrow-size); + @include lib-css(margin-left, $_tooltip-arrow-after-margin); + } + + &:before { + @include lib-css(border-top-color, $_tooltip-border-color); + @include lib-css(left, $_tooltip-arrow-offset + $_tooltip-arrow-size); + @include lib-css(margin-left, $_tooltip-arrow-before-margin); + } + } + + @if $_tooltip-position == left { + @include lib-css(margin-right, $_tooltip-arrow-size); + right: 100%; + top: 0; + + &:after, + &:before { + left: 100%; + } + + &:after { + @include lib-css(border-left-color, $_tooltip-background); + @include lib-css(margin-top, $_tooltip-arrow-after-margin); + @include lib-css(top, $_tooltip-arrow-offset + $_tooltip-arrow-size) + } + + &:before { + @include lib-css(border-left-color, $_tooltip-border-color); + @include lib-css(margin-top, $_tooltip-arrow-before-margin); + @include lib-css(top, $_tooltip-arrow-offset + $_tooltip-arrow-size); + } + } + + @if $_tooltip-position == right { + @include lib-css(margin-left, $_tooltip-arrow-size); + left: 100%; + top: 0; + + &:after, + &:before { + right: 100%; + } + + &:after { + @include lib-css(border-right-color, $_tooltip-background); + @include lib-css(margin-top, $_tooltip-arrow-after-margin); + @include lib-css(top, $_tooltip-arrow-offset + $_tooltip-arrow-size); + } + + &:before { + @include lib-css(border-right-color, $_tooltip-border-color); + @include lib-css(margin-top, $_tooltip-arrow-before-margin); + @include lib-css(top, $_tooltip-arrow-offset + $_tooltip-arrow-size); + } + } + + @if $_tooltip-position == bottom { + @include lib-css(margin-top, $_tooltip-arrow-size); + left: 0; + top: 100%; + + &:after, + &:before { + bottom: 100%; + } + + &:after { + @include lib-css(border-bottom-color, $_tooltip-background); + @include lib-css(left, $_tooltip-arrow-offset + $_tooltip-arrow-size); + @include lib-css(margin-left, $_tooltip-arrow-after-margin); + } + + &:before { + @include lib-css(border-bottom-color, $_tooltip-border-color); + @include lib-css(left, $_tooltip-arrow-offset + $_tooltip-arrow-size); + @include lib-css(margin-left, $_tooltip-arrow-before-margin); + } + } +} diff --git a/src/scss/boilerplate/magento-ui/_typography.scss b/src/scss/boilerplate/magento-ui/_typography.scss new file mode 100755 index 0000000..33ad152 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_typography.scss @@ -0,0 +1,605 @@ +// +// Typography +// _____________________________________________ + +@mixin lib-font-face( + $family-name, + $font-path, + $font-weight: normal, + $font-style: normal +) { + @font-face { + font-family: $family-name; + src: url('#{$font-path}.eot'); + src: url('#{$font-path}.eot?#iefix') format('embedded-opentype'), + url('#{$font-path}.woff2') format('woff2'), + url('#{$font-path}.woff') format('woff'), + url('#{$font-path}.ttf') format('truetype'), + url('#{$font-path}.svg##{$family-name}') format('svg'); + font-weight: $font-weight; + font-style: $font-style; + } +} + +// Rem font size +@mixin lib-font-size($sizeValue) { + @if type-of($sizeValue) == number and unit($sizeValue) != '%' and $sizeValue != false { + @if unit($sizeValue) == $font-size-unit or unit($sizeValue) == 'em' { + @include lib-css(font-size, $sizeValue); + } + @else { + @include lib-css(font-size, lib-font-size-value($sizeValue)); + } + } +} + +// Rem line height +@mixin lib-line-height($heightValue) { + @if $heightValue != false { + @if unit($heightValue) == '%' { + @include lib-css(line-height, $heightValue); + } + @else { + @include lib-css(line-height, lib-font-size-value($heightValue)); + } + } +} + + +@mixin lib-wrap-words() { + @include lib-hyphens(); + word-wrap: break-word; +} + +@mixin lib-text-overflow() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +@mixin lib-text-hide() { + background-color: transparent; + border: 0; + color: transparent; + font: '0px/0' a; + text-shadow: none; +} + +// Optional hyphenation +@mixin lib-hyphens($mode: auto) { + word-wrap: break-word; + hyphens: $mode; +} + +@mixin lib-typography( + $_font-size: $font-size__base, + $_color: $text__color, + $_font-family: $font-family__base, + $_font-weight: $font-weight__regular, + $_line-height: $line-height__base, + $_font-style: $font-style__base +) { + @include lib-css(color, $_color); + @include lib-css(font-family, $_font-family); + @include lib-css(font-style, $_font-style); + @include lib-css(font-weight, $_font-weight); + @include lib-css(line-height, $_line-height); + @include lib-font-size($_font-size); +} + +@mixin lib-list-reset-styles($_margin: 0, $_padding: 0) { + @include lib-css(margin, $_margin); + @include lib-css(padding, $_padding); + list-style: none none; +} + +@mixin lib-list-inline() { + @include lib-list-reset-styles(); + & > li { + display: inline-block; + vertical-align: top; + } +} + +@mixin lib-link( + $_link-color : $link__color, + $_link-text-decoration : $link__text-decoration, + $_link-color-visited : $link__visited__color, + $_link-text-decoration-visited : $link__visited__text-decoration, + $_link-color-hover : $link__hover__color, + $_link-text-decoration-hover : $link__hover__text-decoration, + $_link-color-active : $link__active__color, + $_link-text-decoration-active: $link__active__text-decoration +) { + @include lib-css(color, $_link-color); + @include lib-css(text-decoration, $_link-text-decoration); + + &:visited { + @include lib-css(color, $_link-color-visited); + @include lib-css(text-decoration, $_link-text-decoration-visited); + } + + &:hover { + @include lib-css(color, $_link-color-hover); + @include lib-css(text-decoration, $_link-text-decoration-hover); + } + + &:active { + @include lib-css(color, $_link-color-active); + @include lib-css(text-decoration, $_link-text-decoration-active); + } +} + +@mixin lib-heading($_heading_level: h1) { + $h1: ( + color : $h1__font-color, + font-size : $h1__font-size, + font-family : $h1__font-family, + font-weight : $h1__font-weight, + line-height : $h1__line-height, + font-style : $h1__font-style, + margin-top : $h1__margin-top, + margin-bottom : $h1__margin-bottom + ); + + $h2: ( + color : $h2__font-color, + font-size : $h2__font-size, + font-family : $h2__font-family, + font-weight : $h2__font-weight, + line-height : $h2__line-height, + font-style : $h2__font-style, + margin-top : $h2__margin-top, + margin-bottom : $h2__margin-bottom + ); + + $h3: ( + color : $h3__font-color, + font-size : $h3__font-size, + font-family : $h3__font-family, + font-weight : $h3__font-weight, + line-height : $h3__line-height, + font-style : $h3__font-style, + margin-top : $h3__margin-top, + margin-bottom : $h3__margin-bottom + ); + + $h4: ( + color : $h4__font-color, + font-size : $h4__font-size, + font-family : $h4__font-family, + font-weight : $h4__font-weight, + line-height : $h4__line-height, + font-style : $h4__font-style, + margin-top : $h4__margin-top, + margin-bottom : $h4__margin-bottom + ); + + $h5: ( + color : $h5__font-color, + font-size : $h5__font-size, + font-family : $h5__font-family, + font-weight : $h5__font-weight, + line-height : $h5__line-height, + font-style : $h5__font-style, + margin-top : $h5__margin-top, + margin-bottom : $h5__margin-bottom + ); + + $h6: ( + color : $h6__font-color, + font-size : $h6__font-size, + font-family : $h6__font-family, + font-weight : $h6__font-weight, + line-height : $h6__line-height, + font-style : $h6__font-style, + margin-top : $h6__margin-top, + margin-bottom : $h6__margin-bottom + ); + + $map: $h1; + @if $_heading_level == h2 { + $map: $h2; + } + @else if $_heading_level == h3 { + $map: $h3; + } + @else if $_heading_level == h4 { + $map: $h4; + } + @else if $_heading_level == h5 { + $map: $h5; + } + @else if $_heading_level == h6 { + $map: $h6; + } + + $_font-color : map-get($map, color); + $_font-size : map-get($map, font-size); + $_font-family : map-get($map, font-family); + $_font-weight : map-get($map, font-weight); + $_line-height : map-get($map, line-height); + $_font-style : map-get($map, font-style); + $_margin-top : map-get($map, margin-top); + $_margin-bottom : map-get($map, margin-bottom); + + @include lib-typography( + $_font-size, + $_font-color, + $_font-family, + $_font-weight, + $_line-height, + $_font-style + ); + + @include lib-css(margin-top, lib-font-size-value($_margin-top)); + @include lib-css(margin-bottom, lib-font-size-value($_margin-bottom)); +} + +// +// Base typography +// --------------------------------------------- + +@mixin lib-typography__base( + $_abbr-border-color : $abbr__border-color, + $_dfn-font-style : $font-style__emphasis, + $_emphasis-font-style : $font-style__emphasis, + $_hr-border-color : $hr__border-color, + $_hr-border-style : $hr__border-style, + $_hr-border-width : $hr__border-width, + $_hr-margin-bottom : $line-height__computed, + $_hr-margin-top : $line-height__computed, + $_mark-background-color : $mark__background-color, + $_mark-color : $mark__color, + $_p-margin-bottom : $p__margin-bottom, + $_p-margin-top : $p__margin-top, + $_root-font-size : $root__font-size, + $_small-font-size : $font-size__s, + $_strong-font-weight : $font-weight__bold, + $_sub-sup-font-size : ($font-size__xs / $font-size__base) * 100% +) { + html { + @include lib-css(font-size, $_root-font-size); + font-size-adjust: 100%; + } + + body { + @include lib-typography(); + } + + p { + & { + @include lib-css(margin-top, lib-font-size-value($_p-margin-top)); + } + + & { + @include lib-css(margin-bottom, lib-font-size-value($_p-margin-bottom)); + } + } + + // Abbreviations and acronyms + abbr[title] { + @include lib-css(border-bottom, 1px dotted $_abbr-border-color); + cursor: help; + } + + b, + strong { + @include lib-css(font-weight, $_strong-font-weight); + } + + em, + i { + @include lib-css(font-style, $_emphasis-font-style); + } + + mark { + @include lib-css(background, $_mark-background-color); + @include lib-css(color, $_mark-color); + } + + small, + .small { + @include lib-css(font-size, $_small-font-size); + } + + hr { + border: 0; + @include lib-css(border-top, $_hr-border-width $_hr-border-style $_hr-border-color); + @include lib-css(margin-bottom, $_hr-margin-bottom); + @include lib-css(margin-top, $_hr-margin-top); + } + + sub, + sup { + @include lib-css(font-size, $_sub-sup-font-size); + line-height: 0; + position: relative; + vertical-align: baseline; + } + + sup { + top: -0.5em; + } + + sub { + bottom: -0.25em; + } + + dfn { + @include lib-css(font-style, $_dfn-font-style); + } +} + +// +// Headings +// --------------------------------------------- + +@mixin lib-typography-headings( + $_heading-small-color : $heading__small-color, + $_heading-small-line-height : $heading__small-line-height, + $_heading-small-size : $heading__small-size +) { + h1 { + @include lib-heading(h1); + } + + h2 { + @include lib-heading(h2); + } + + h3 { + @include lib-heading(h3); + } + + h4 { + @include lib-heading(h4); + } + + h5 { + @include lib-heading(h5); + } + + h6 { + @include lib-heading(h6); + } + + h1, + h2, + h3, + h4, + h5, + h6 { + small, + .small { + @include lib-typography( + $_heading-small-size, + $_heading-small-color, + $_line-height: $_heading-small-line-height + ); + } + } +} + + +// +// Links +// --------------------------------------------- + +@mixin lib-typography-links() { + a, + .alink { + @include lib-link(); + } +} + +// +// Unordered and Ordered lists +// --------------------------------------------- + +@mixin lib-typography-lists( + $_list-margin-bottom : $list__margin-bottom, + $_list-margin-top : $list__margin-top, + $_list-item-margin-bottom : $list-item__margin-bottom, + $_list-item-margin-top : $list-item__margin-top, + $_dl-margin-bottom : $dl__margin-bottom, + $_dl-margin-top : $dl__margin-top, + $_dd-margin-bottom : $dd__margin-bottom, + $_dd-margin-top : $dd__margin-top, + $_dt-font-weight : $dt__font-weight, + $_dt-margin-bottom : $dt__margin-bottom, + $_dt-margin-top : $dt__margin-top +) { + ul, + ol { + @include lib-css(margin-top, lib-font-size-value($_list-margin-top)); + @include lib-css(margin-bottom, lib-font-size-value($_list-margin-bottom)); + + & > li { + @include lib-css(margin-top, lib-font-size-value($_list-item-margin-top)); + @include lib-css(margin-bottom, lib-font-size-value($_list-item-margin-bottom)); + } + + ul, + ol { + margin-bottom: 0; + } + } + + dl { + @include lib-css(margin-bottom, $_dl-margin-bottom); + @include lib-css(margin-top, $_dl-margin-top); + } + + dt { + @include lib-css(font-weight, $_dt-font-weight); + @include lib-css(margin-bottom, $_dt-margin-bottom); + @include lib-css(margin-top, $_dt-margin-top); + } + + dd { + @include lib-css(margin-bottom, $_dd-margin-bottom); + @include lib-css(margin-top, $_dd-margin-top); + margin-left: 0; + } +} + +// +// Code (inline and block) +// --------------------------------------------- + +@mixin lib-typography-code( + $_font-family-monospace : $font-family__monospace, + $_code-background-color : $code__background-color, + $_code-color : $code__color, + $_code-font-size : $code__font-size, + $_code-padding : $code__padding, + $_kbd-background-color : $kbd__background-color, + $_kbd-color : $kbd__color, + $_kbd-font-size : $code__font-size, + $_kbd-padding : $code__padding, + $_pre-background-color : $pre__background-color, + $_pre-border-color : $pre__border-color, + $_pre-border-width : $pre__border-width, + $_pre-color : $pre__color, + $_pre-font-size : $code__font-size, + $_pre-line-height : $line-height__base, + $_pre-margin : 0 0 $indent__s, + $_pre-padding : $indent__s +) { + code, + kbd, + pre, + samp { + @include lib-css(font-family, $_font-family-monospace); + } + + // Inline code + code { + @include lib-css(background, $_code-background-color); + @include lib-css(color, $_code-color); + @include lib-css(padding, $_code-padding); + @include lib-font-size($_code-font-size); + white-space: nowrap; + } + + // User input typically entered via keyboard + kbd { + @include lib-css(background, $_kbd-background-color); + @include lib-css(color, $_kbd-color); + @include lib-css(padding, $_kbd-padding); + @include lib-font-size($_kbd-font-size); + } + + // Blocks of code + pre { + @include lib-css(background, $_pre-background-color); + @include lib-css(border, $_pre-border-width solid $_pre-border-color); + @include lib-css(color, $_pre-color); + @include lib-css(line-height, $_pre-line-height); + @include lib-css(margin, $_pre-margin); + @include lib-css(padding, $_pre-padding); + @include lib-font-size($_pre-font-size); + display: block; + word-wrap: break-word; + + code { + background-color: transparent; + border-radius: 0; + color: inherit; + font-size: inherit; + padding: 0; + white-space: pre-wrap; + } + } +} + +// +// Blockquotes +// --------------------------------------------- + +@mixin lib-typography-blockquote( + $_blockquote-border-color: $blockquote__border-color, + $_blockquote-border-width: $blockquote__border-width, + $_blockquote-font-size: $blockquote__font-size, + $_blockquote-font-style: $blockquote__font-style, + $_blockquote-margin: $blockquote__margin, + $_blockquote-padding: $blockquote__padding, + $_blockquote-small-before-content: $blockquote__content-before, + $_blockquote-small-color: $blockquote-small__color, + $_blockquote-small-font-size: $blockquote-small__font-size, + $_blockquote-small-line-height: $line-height__base, + $_blockquote-cite: $cite__font-style, + $_cite: $cite__font-style +) { + blockquote { + @include lib-css(border-left, $_blockquote-border-width solid $_blockquote-border-color); + @include lib-css(margin, $_blockquote-margin); + @include lib-css(padding, $_blockquote-padding); + @include lib-typography( + $_font-size: $_blockquote-font-size, + $_font-style: $_blockquote-font-style + ); + + p, + ul, + ol { + &:last-child { + margin-bottom: 0; + } + } + + footer, + small, + .small { + @include lib-css(color, $_blockquote-small-color); + @include lib-css(line-height, $_blockquote-small-line-height); + @include lib-font-size($_blockquote-small-font-size); + display: block; + + &:before { + @include lib-css(content, $_blockquote-small-before-content); + } + } + + cite { + @include lib-css(font-style, $_blockquote-cite); + } + } + + // Quotes + blockquote { + &:before, + &:after { + content: ''; + } + } + + q { + quotes: none; + + &:before, + &:after { + content: ''; + content: none; + } + } + + // Undo browser default styling + cite { + @include lib-css(font-style, $_cite); + } +} + +// +// All typography +// --------------------------------------------- + +@mixin lib-typography-all() { + @include lib-typography__base(); + @include lib-typography-headings(); + @include lib-typography-links(); + @include lib-typography-lists(); + @include lib-typography-code(); + @include lib-typography-blockquote(); +} diff --git a/src/scss/boilerplate/magento-ui/_utilities.scss b/src/scss/boilerplate/magento-ui/_utilities.scss new file mode 100755 index 0000000..031acaf --- /dev/null +++ b/src/scss/boilerplate/magento-ui/_utilities.scss @@ -0,0 +1,403 @@ +// +// Utilities +// _____________________________________________ + +// Remove the unit of a length +// @param {Number} $number - Number to remove unit from +// @return {Number} - Unitless number + +@function strip-unit($number) { + @if type-of($number) == 'number' and not unitless($number) { + @return $number / ($number * 0 + 1); + } + + @return $number; +} + +// +// Convert values to unit specified in typography variables +// --------------------------------------------- + +@function lib-font-size-value($_value) { + @if $font-size-unit-convert { + @if $_value != false and $_value != '' { + $_value: strip-unit($_value) / $font-size-unit-ratio; + @if $_value > 0 { + $_value: $_value * 1#{$font-size-unit}; + } + @return $_value; + } + } + @else { + @return $_value; + } +} + +@mixin lib-visibility-hidden() { + height: 0; + visibility: hidden; +} + +@mixin lib-visually-hidden() { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +@mixin lib-visually-hidden-reset() { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; +} + +// +// Clearfix +// --------------------------------------------- + +@mixin lib-clearfix() { + &:before, + &:after { + content: ''; + display: table; + } + + &:after { + clear: both; + } +} + +@mixin lib-clearer() { + &:after { + clear: both; + content: ''; + display: table; + } +} + +// +// Gradient +// --------------------------------------------- + +@mixin lib-gradient__horizontal( + $_start-color, + $_end-color, + $_start-percent : 0%, + $_end-percent : 100%, + $_background-color-position : true +) { + @if $_background-color-position == true { + background-color: $_end-color; + background-repeat: repeat-x; + background-image: linear-gradient(to right, $_start-color $_start-percent, $_end-color $_end-percent); + } + @else if $_background-color-position == false { + background-color: $_start-color; + background-image: linear-gradient(to right, $_start-color $_start-percent, $_end-color $_end-percent); + background-repeat: repeat-x; + } +} +@mixin lib-gradient__vertical( + $_start-color, + $_end-color, + $_start-percent : 0%, + $_end-percent : 100%, + $_background-color-position : true +) { + @if $_background-color-position == true { + background-color: $_end-color; + background-image: linear-gradient(to bottom, $_start-color $_start-percent, $_end-color $_end-percent); + background-repeat: repeat-x; + } + @else if $_background-color-position == false { + background-color: $_start-color; + background-image: linear-gradient(to bottom, $_start-color $_start-percent, $_end-color $_end-percent); + background-repeat: repeat-x; + } +} + +// +// Custom background gradient +// --------------------------------------------- + +@mixin lib-background-gradient( + $_background-gradient-color-start, + $_background-gradient-color-end, + $_background-gradient-direction, + $_background-gradient, + $_background-gradient-color-position : true +) { + @if $_background-gradient-direction == horizontal and $_background-gradient == true { + @include lib-gradient__horizontal( + $_start-color : $_background-gradient-color-start, + $_end-color : $_background-gradient-color-end, + $_background-color-position : $_background-gradient-color-position + ); + } + @if $_background-gradient-direction == vertical and $_background-gradient == true { + @include lib-gradient__vertical( + $_start-color : $_background-gradient-color-start, + $_end-color : $_background-gradient-color-end, + $_background-color-position : $_background-gradient-color-position + ); + } +} + + +// +// Rotate +// --------------------------------------------- + +@mixin lib-rotate($_rotation) { + transform: rotate($_rotation); +} + + +// +// Remove spaces between elements with display: inline-block +// --------------------------------------------- + +@mixin lib-inline-block-space-container() { + font-size: 0; + letter-spacing: -1px; + line-height: 0; +} + +@mixin lib-inline-block-space-item( + $_font-size : $font-size__base, + $_line-height : normal +) { + @include lib-font-size($_font-size); + font-size: $_font-size; + letter-spacing: normal; + line-height: $_line-height; +} + +// +// Add any css property +// --------------------------------------------- + +@mixin lib-css( + $_property, + $_value, + $_prefix: 0 +) { + @if $_value == 0 { + $_value: strip-unit($_value); + } + + @if $_value != '' and $_value != false { + @if type-of($_value) == list { + $_isFalse: false; + @each $_item in $_value { + @if $_item == false { + $_isFalse: true; + } + } + @if $_isFalse == false { + #{$_property}: $_value; + } + } + @else { + #{$_property}: $_value; + } + } +} + +// +// Add url to property +// --------------------------------------------- + +// usage: +// .column.left { +// .lib-url('images/fallback.png'); +// background:url("#{$url}") repeat-y; +// } +// .columns { +// .lib-url('images/fallback.png', 'Magento_Catalog'); +// background:url("#{$url}") repeat; +// } + +$urls-resolved: false; + +@mixin lib-url($_path) { + $url: "../#{$_path}"; +} + +@mixin lib-url($_path, $_module) { + @if $_module != false and $_module != '' { + @if $urls-resolved == true { + $url: "../#{$_module}/#{$_path}"; + } + @else if $urls-resolved == false { + $url: "#{$_module}::#{$_path}"; + } + } +} + +// +// Arrow +// --------------------------------------------- + +@mixin lib-arrow($_position, $_size, $_color) { + border: $_size solid transparent; + height: 0; + width: 0; + @include _lib-abbor_el($_position, $_color); +} + +@mixin _lib-abbor_el($_position, $_color) { + @if $_position == left { + @include lib-css(border-right-color, $_color); + } + @if $_position == right { + @include lib-css(border-left-color, $_color); + } + @if $_position == up { + @include lib-css(border-bottom-color, $_color); + } + @if $_position == down { + @include lib-css(border-top-color, $_color); + } +} + +// +// Input placeholder +// --------------------------------------------- + +@mixin lib-input-placeholder( + $_input-placeholder-color: $form-element-input-placeholder__color, + $_input-placeholder-font-weight: $form-element-input__font-weight +) { + &::-webkit-input-placeholder { + @include lib-css(color, $_input-placeholder-color); + @include lib-css(font-weight, $_input-placeholder-font-weight); + } + + &:-moz-placeholder { + @include lib-css(color, $_input-placeholder-color); + @include lib-css(font-weight, $_input-placeholder-font-weight); + } + + &::-moz-placeholder { + @include lib-css(color, $_input-placeholder-color); + @include lib-css(font-weight, $_input-placeholder-font-weight); + } + + &:-ms-input-placeholder { + @include lib-css(color, $_input-placeholder-color); + @include lib-css(font-weight, $_input-placeholder-font-weight); + } +} + +// +// Flex layout +// --------------------------------------------- + +@mixin lib-vendor-prefix-display( + $_value: flex +) { + display: $_value; +} + +@mixin lib-vendor-prefix-flex-grow( + $_value: 0 +) { + flex-grow: $_value; +} + +@mixin lib-vendor-prefix-flex-shrink( + $_value: 1 +) { + flex-shrink: $_value; +} + +@mixin lib-vendor-prefix-flex-basis( + $_value: auto +) { + flex-basis: $_value; +} + +@mixin lib-vendor-prefix-flex-wrap( + $_value: wrap +) { + flex-wrap: $_value; +} + +@mixin lib-vendor-prefix-flex-direction( + $_value: column +) { + flex-direction: $_value; +} + +@mixin lib-vendor-prefix-order( + $_value: 0 +) { + order: $_value; +} + +@mixin lib-vendor-box-align( + $_value: stretch +) { + align-items: $_value; +} + +@mixin lib-vendor-prefix-appearance( + $value: none +) { + appearance: $value; +} + +@mixin lib-vendor-prefix-column-count( + $_value +) { + column-count: $_value; +} + +// +// Pointer for popups or dropdowns +// --------------------------------------------- + +@mixin lib-pointer( + $_size : 6px, + $_background-color : $color-white, + $_border-color : $color-gray-light3, + $_position__vertical : top, + $_position__horizontal : left, + $_position__vertical__value : -12px, + $_position__horizontal__value : $indent__s, + $_z-index : 99 +) { + &:before, + &:after { + content: ''; + position: absolute; + display: block; + width: 0; + height: 0; + border-bottom-style: solid; + } + + &:before { + @include lib-css($_position__horizontal, $_position__horizontal__value); + @include lib-css($_position__vertical, $_position__vertical__value); + @include lib-css(border, solid $_size - 1); + @include lib-css(border-color, transparent transparent $_background-color transparent); + @include lib-css(z-index, $_z-index); + } + + &:after { + @include lib-css($_position__horizontal, $_position__horizontal__value - 1); + @include lib-css($_position__vertical, $_position__vertical__value - 2); + @include lib-css(border, solid $_size); + @include lib-css(border-color, transparent transparent $_border-color transparent); + @include lib-css(z-index, $_z-index - 1); + } +} diff --git a/src/scss/boilerplate/magento-ui/variables/_actions-toolbar.scss b/src/scss/boilerplate/magento-ui/variables/_actions-toolbar.scss new file mode 100755 index 0000000..3558f12 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_actions-toolbar.scss @@ -0,0 +1,17 @@ +// +// Actions-toolbar variables +// _____________________________________________ + +$actions-toolbar__margin: false !default; +$actions-toolbar__padding: false !default; + +$actions-toolbar-actions__position: justify !default; // [left|right|center|justify] +$actions-toolbar-actions__reverse: false !default; // [true|false] +$actions-toolbar-actions__margin: false !default; + +$actions-toolbar-actions-primary__margin: 0 $indent__xs 0 0 !default; +$actions-toolbar-actions-secondary__margin: false !default; + +$actions-toolbar-actions-links__margin-top: false !default; +$actions-toolbar-actions-links-primary__margin-top: false !default; +$actions-toolbar-actions-links-secondary__margin-top: 6px !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_breadcrumbs.scss b/src/scss/boilerplate/magento-ui/variables/_breadcrumbs.scss new file mode 100755 index 0000000..ddf9c76 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_breadcrumbs.scss @@ -0,0 +1,71 @@ +// +// Breadcrumbs variables +// _____________________________________________ + +$breadcrumbs__font-size : $font-size__s !default; +$breadcrumbs__display : false !default; +$breadcrumbs__container-margin : 0 0 $indent__base !default; +$breadcrumbs__padding : false !default; + +$breadcrumbs-icon__use : true !default; +$breadcrumbs-icon__font-content : $icon-next !default; +$breadcrumbs-icon__font : $icon-font !default; +$breadcrumbs-icon__font-size : 24px !default; +$breadcrumbs-icon__font-line-height : 18px !default; +$breadcrumbs-icon__font-color : false !default; +$breadcrumbs-icon__font-margin : 0 !default; +$breadcrumbs-icon__font-vertical-align : top !default; + +// Current page +$breadcrumbs-current__color : $color-gray64 !default; +$breadcrumbs-current__font-weight : $font-weight__regular !default; +$breadcrumbs-current__background : false !default; +$breadcrumbs-current__border : false !default; + +// Current page - gradient background +$breadcrumbs-current__gradient : false !default; +$breadcrumbs-current__gradient-direction : vertical !default; +$breadcrumbs-current__gradient-color-start : false !default; +$breadcrumbs-current__gradient-color-end : false !default; + +$breadcrumbs-separator__symbol : false !default; +$breadcrumbs-separator__color : $breadcrumbs-current__color !default; + +// +// Link +// --------------------------------------------- + +// Gradient +$breadcrumbs-link__gradient : false !default; // [true|false] +$breadcrumbs-link__gradient-direction : false !default; // [true|false] + +$breadcrumbs-link__color : $primary__color !default; +$breadcrumbs-link__background : false !default; +$breadcrumbs-link__border : false !default; +$breadcrumbs-link__text-decoration : none !default; +$breadcrumbs-link__gradient-color-start : false !default; +$breadcrumbs-link__gradient-color-end : false !default; + +// Visited +$breadcrumbs-link__visited__color : $primary__color !default; +$breadcrumbs-link__visited__background : $breadcrumbs-link__background !default; +$breadcrumbs-link__visited__border : $breadcrumbs-link__border !default; +$breadcrumbs-link__visited__text-decoration : none !default; +$breadcrumbs-link__visited__gradient-color-start : false !default; +$breadcrumbs-link__visited__gradient-color-end : false !default; + +// Hover +$breadcrumbs-link__hover__color : $primary__color !default; +$breadcrumbs-link__hover__background : false !default; +$breadcrumbs-link__hover__border : $breadcrumbs-link__border !default; +$breadcrumbs-link__hover__text-decoration : underline !default; +$breadcrumbs-link__hover__gradient-color-start : false !default; +$breadcrumbs-link__hover__gradient-color-end : false !default; + +// Active +$breadcrumbs-link__active__color : $primary__color !default; +$breadcrumbs-link__active__background : $breadcrumbs-link__background !default; +$breadcrumbs-link__active__border : $breadcrumbs-link__border !default; +$breadcrumbs-link__active__text-decoration : none !default; +$breadcrumbs-link__active__gradient-color-start : false !default; +$breadcrumbs-link__active__gradient-color-end : false !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_buttons.scss b/src/scss/boilerplate/magento-ui/variables/_buttons.scss new file mode 100755 index 0000000..ddef1f7 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_buttons.scss @@ -0,0 +1,97 @@ +// +// Buttons variables +// _____________________________________________ + +// +// Buttons +// --------------------------------------------- + +// Font style +$button__font-family : $font-family__base !default; +$button__font-size : $font-size__base !default; +$button__font-weight : $font-weight__bold !default; +$button__line-height : $font-size__base + 2 !default; +$button__margin : 0 !default; +$button__padding : 7px 15px !default; // is set up to false when buttons don't depend on side paddings or have fixed width +$button__width : false !default; // is set up to false when buttons depend on side paddings or to fixed value when needed + +// Display settings +$button__display : inline-block !default; +$button__cursor : pointer !default; +$button__border-radius : 3px !default; + +$button__disabled__opacity : 0.5 !default; + +// Default = secondary button +$button__color : $primary__color !default; +$button__background : $color-gray95 !default; +$button__border : 1px solid $color-gray-darken2 !default; +$button__gradient-color-start : false !default; +$button__gradient-color-end : false !default; + +$button__hover__color : $color-gray-darken3 !default; +$button__hover__background : $color-gray-darken1 !default; +$button__hover__border : $button__border !default; +$button__hover__gradient-color-start : false !default; +$button__hover__gradient-color-end : false !default; + +$button__active__color : $button__color !default; +$button__active__background : $button__hover__background !default; +$button__active__border : $button__border !default; +$button__active__gradient-color-start : false !default; +$button__active__gradient-color-end : false !default; + +// Primary button +$button-primary__line-height : false !default; +$button-primary__width : false !default; +$button-primary__margin : false !default; +$button-primary__padding : $button__padding !default; +$button-primary__gradient : false !default; +$button-primary__gradient-direction : false !default; + +$button-primary__background : $color-blue1 !default; +$button-primary__border : 1px solid $color-blue1 !default; +$button-primary__color : $color-white !default; +$button-primary__gradient-color-start : false !default; +$button-primary__gradient-color-end : false !default; + +$button-primary__hover__background : $color-blue2 !default; +$button-primary__hover__border : 1px solid $color-blue2 !default; +$button-primary__hover__color : $button-primary__color !default; +$button-primary__hover__gradient-color-start : false !default; +$button-primary__hover__gradient-color-end : false !default; + +$button-primary__active__background : $button-primary__hover__background !default; +$button-primary__active__border : $button-primary__hover__border !default; +$button-primary__active__color : $button-primary__color !default; +$button-primary__active__gradient-color-start : false !default; +$button-primary__active__gradient-color-end : false !default; + +// Gradient button +$button__gradient : false !default; // [true|false] - button has a gradient background +$button__gradient-direction : false !default; // button gradient direction if button has a gradient background + +// Button with icon +$button-icon__use : false !default; +$button-icon__content : $icon-settings !default; +$button-icon__font : $icon-font !default; +$button-icon__font-size : 22px !default; +$button-icon__line-height : $button-icon__font-size !default; +$button-icon__color : inherit !default; +$button-icon__margin : 0 !default; +$button-icon__vertical-align : top !default; +$button-icon__position : $icon__position !default; +$button-icon__text-hide : false !default; + +$button-icon__hover__font-color : inherit !default; +$button-icon__active__font-color : inherit !default; + +// Large button +$button__font-size__l : $font-size__l !default; +$button__line-height__l : $font-size__l + 4 !default; +$button__padding__l : 14px 17px !default; + +// Small button +$button__font-size__s : 11px !default; +$button__line-height__s : $button__font-size__s + 1 !default; +$button__padding__s : $indent__xs 8px !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_colors.scss b/src/scss/boilerplate/magento-ui/variables/_colors.scss new file mode 100755 index 0000000..4612174 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_colors.scss @@ -0,0 +1,103 @@ +// +// Color variables +// _____________________________________________ + +$color-white : #fff !default; +$color-black : #000 !default; + +$color-gray19 : #303030 !default; +$color-gray20 : #333 !default; +$color-gray34 : #575757 !default; +$color-gray37 : #5e5e5e !default; +$color-gray40 : #666 !default; +$color-gray43 : #6d6d6d !default; +$color-gray46 : #757575 !default; +$color-gray52 : #858585 !default; +$color-gray55 : #8c8c8c !default; +$color-gray56 : #8f8f8f !default; +$color-gray60 : #999 !default; +$color-gray62 : #9e9e9e !default; +$color-gray64 : #a3a3a3 !default; +$color-gray68 : #adadad !default; +$color-gray76 : #c2c2c2 !default; +$color-gray78 : #c7c7c7 !default; +$color-gray79 : #c9c9c9 !default; +$color-gray80 : #ccc !default; +$color-gray82 : #d1d1d1 !default; +$color-gray89 : #e3e3e3 !default; +$color-gray90 : #e5e5e5 !default; +$color-gray91 : #e8e8e8 !default; +$color-gray92 : #ebebeb !default; +$color-gray94 : #f0f0f0 !default; +$color-gray95 : #f2f2f2 !default; +$color-white-smoke : #f5f5f5 !default; +$color-white-dark-smoke : #efefef !default; +$color-white-fog : #f8f8f8 !default; + +$color-gray-light0 : #f6f6f6 !default; +$color-gray-light01 : #f4f4f4 !default; +$color-gray-light1 : #e5efe5 !default; +$color-gray-light2 : #bbb !default; +$color-gray-light3 : #aeaeae !default; +$color-gray-light4 : #cecece !default; +$color-gray-light5 : #c1c1c1 !default; +$color-gray-light6 : #c5c5c5 !default; + +$color-gray-middle1 : #e4e4e4 !default; +$color-gray-middle2 : #c6c6c6 !default; +$color-gray-middle3 : #7e807e !default; +$color-gray-middle4 : #6e716e !default; +$color-gray-middle5 : #707070 !default; + +$color-gray-darken0 : #eee !default; +$color-gray-darken1 : #e2e2e2 !default; +$color-gray-darken2 : #cdcdcd !default; +$color-gray-darken3 : #555 !default; +$color-gray-darken4 : #494949 !default; + +$color-red9 : #ff0101 !default; +$color-red10 : #e02b27 !default; +$color-red11 : #b30000 !default; +$color-red12 : #d10029 !default; + +$color-orange-red1 : #ff5501 !default; +$color-orange-red2 : #ff5601 !default; // Legacy orange +$color-orange-red3 : #ff5700 !default; // Legacy orange +$color-orange-red4 : #fc5e10 !default; // Legacy orange + +$color-dark-green1 : #006400 !default; + +$color-blue1 : #1979c3 !default; +$color-blue2 : #006bb4 !default; +$color-blue3 : #00699D !default; +$color-sky-blue1 : #68a8e0 !default; + +$color-pink1 : #fae5e5 !default; +$color-dark-pink1 : #800080 !default; + +$color-brownie1 : #6f4400 !default; +$color-brownie-light1 : #c07600 !default; + +$color-yellow-light1 : #fdf0d5 !default; +$color-yellow-light2 : #ffee9c !default; +$color-yellow-light3 : #d6ca8e !default; +$color-yellow1 : #ff0 !default; + +// +// Color nesting +// --------------------------------------------- + +$primary__color : $color-gray20 !default; +$primary__color__dark : darken($primary__color, 35%) !default; // #000 +$primary__color__darker : darken($primary__color, 13.5%) !default; // #111 +$primary__color__lighter : lighten($primary__color, 29%) !default; // #7d7d7d +$primary__color__light : lighten($primary__color, 45%) !default; // #a6a6a6 + +$secondary__color : $color-gray91 !default; +$secondary__color__light : lighten($secondary__color, 5%) !default; + +$page__background-color : $color-white !default; +$panel__background-color : darken($page__background-color, 6%) !default; + +$active__color : $color-orange-red1 !default; +$error__color : $color-red10 !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_components.scss b/src/scss/boilerplate/magento-ui/variables/_components.scss new file mode 100755 index 0000000..83207d5 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_components.scss @@ -0,0 +1,8 @@ +// +// Lib -> Components -> Variables +// _____________________________________________ + +$component__shadow-size__base: 5px !default; +$component__box-shadow__base: 1px 1px $component__shadow-size__base rgba(0, 0, 0, 0.5) !default; + +$component-modal__opacity: 0.98 !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_dropdowns.scss b/src/scss/boilerplate/magento-ui/variables/_dropdowns.scss new file mode 100755 index 0000000..6ed1246 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_dropdowns.scss @@ -0,0 +1,94 @@ +// +// Dropdowns variables +// _____________________________________________ + +// +// Variables simple dropdown +// --------------------------------------------- + +$dropdown-actions__padding : false !default; + +$dropdown-list__min-width : 100% !default; +$dropdown-list__width : false !default; +$dropdown-list__height : false !default; +$dropdown-list__margin-top : 4px !default; +$dropdown-list__position-top : 100% !default; +$dropdown-list__position-right : false !default; +$dropdown-list__position-bottom : false !default; +$dropdown-list__position-left : false !default; +$dropdown-list__pointer : true !default; // [true|false] +$dropdown-list__background : $color-white !default; +$dropdown-list__border : 1px solid $color-gray-light2 !default; +$dropdown-list__shadow : 0 3px 3px rgba(0, 0, 0, 0.15) !default; // [''|none|value] +$dropdown-list__z-index : 100 !default; + +$dropdown-list-pointer__border : $color-gray-light2 !default; +$dropdown-list-pointer__position : left !default; // [left|right] +$dropdown-list-pointer__position-top : -12px !default; +$dropdown-list-pointer__position-left-right : 10px !default; + +$dropdown-list-item__border : 0 !default; +$dropdown-list-item__padding : 3px $indent__xs !default; +$dropdown-list-item__margin : 0 !default; +$dropdown-list-item__hover : $color-gray91 !default; + +$dropdown-toggle-icon__content : $icon-pointer-down !default; +$dropdown-toggle-icon__font : $button-icon__font !default; +$dropdown-toggle-icon__font-size : $button-icon__font-size !default; +$dropdown-toggle-icon__font-line-height : $button-icon__line-height !default; +$dropdown-toggle-icon__font-color : $button-icon__color !default; +$dropdown-toggle-icon__font-color-hover : $button-icon__hover__font-color !default; +$dropdown-toggle-icon__font-color-active : $button-icon__active__font-color !default; +$dropdown-toggle-icon__font-margin : $button-icon__margin !default; +$dropdown-toggle-icon__position : after !default; +$dropdown-toggle-icon__font-vertical-align : $button-icon__vertical-align !default; +$dropdown-toggle-icon__text-hide : $button-icon__text-hide !default; + +$dropdown-toggle-icon__active__content : $icon-pointer-up !default; + +// +// Variables split dropdown +// --------------------------------------------- + +$dropdown-split-actions__padding : 0 $indent__xs !default; +$dropdown-split-toggle__actions__padding : 4px $indent__xs !default; +$dropdown-split-button__actions__padding : false !default; +$dropdown-split-toggle__position : right !default; + +$dropdown-split-list__min-width : $dropdown-list__min-width !default; +$dropdown-split-list__width : $dropdown-list__width !default; +$dropdown-split-list__height : $dropdown-list__height !default; +$dropdown-split-list__margin-top : $dropdown-list__margin-top !default; +$dropdown-split-list__position-top : $dropdown-list__position-top !default; +$dropdown-split-list__position-right : $dropdown-list__position-right !default; +$dropdown-split-list__position-bottom : $dropdown-list__position-bottom !default; +$dropdown-split-list__position-left : $dropdown-list__position-left !default; +$dropdown-split-list__background : $dropdown-list__background !default; +$dropdown-split-list__border : $dropdown-list__border !default; +$dropdown-split-list__pointer : $dropdown-list__pointer !default; +$dropdown-split-list__pointer-border : $dropdown-list-pointer__border !default; +$dropdown-split-list__pointer-position : $dropdown-split-toggle__position !default; +$dropdown-split-list__pointer-position-top : $dropdown-list-pointer__position-top !default; +$dropdown-split-list__pointer-position-left-right : $dropdown-list-pointer__position-left-right !default; +$dropdown-split-list__item-border : $dropdown-list-item__border !default; +$dropdown-split-list__item-padding : $dropdown-list-item__padding !default; +$dropdown-split-list__item-margin : $dropdown-list-item__margin !default; +$dropdown-split-list__item-hover : $dropdown-list-item__hover !default; + +$dropdown-split-button__border-radius-fix : false !default; +$dropdown-split-list__shadow : $dropdown-list__shadow !default; // [''|none|value] +$dropdown-split-list__z-index : $dropdown-list__z-index !default; + +$dropdown-split-toggle-icon__content : $dropdown-toggle-icon__content !default; +$dropdown-split-toggle-icon__font : $button-icon__font !default; +$dropdown-split-toggle-icon__font-size : $button-icon__font-size !default; +$dropdown-split-toggle-icon__font-line-height : $button-icon__line-height !default; +$dropdown-split-toggle-icon__font-color : $button-icon__color !default; +$dropdown-split-toggle-icon__font-color-hover : $button-icon__hover__font-color !default; +$dropdown-split-toggle-icon__font-color-active : $button-icon__active__font-color !default; +$dropdown-split-toggle-icon__font-margin : $button-icon__margin !default; +$dropdown-split-toggle-icon__font-vertical-align : $button-icon__vertical-align !default; +$dropdown-split-toggle-icon__position : $dropdown-toggle-icon__position !default; +$dropdown-split-toggle-icon__text-hide : true !default; // [true|false] + +$dropdown-split-toggle-icon__active__content : $dropdown-toggle-icon__active__content !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_email.scss b/src/scss/boilerplate/magento-ui/variables/_email.scss new file mode 100755 index 0000000..448cd4a --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_email.scss @@ -0,0 +1,19 @@ +// +// Email variables +// _____________________________________________ + +// Structure +$email-body__width : 600px !default; +$email-body__padding : $indent__s !default; + +// Content +$email-content__padding__base : $indent__s !default; +$email-content__padding__s : $indent__xs !default; +$email-content__padding__m : $indent__base !default; +$email-content__padding__l : $indent__l !default; +$email-content__padding__xl : $indent__xl !default; + +// Colors +$email__background-color : $color-white !default; +$email-content__background-color : $color-white !default; + diff --git a/src/scss/boilerplate/magento-ui/variables/_forms.scss b/src/scss/boilerplate/magento-ui/variables/_forms.scss new file mode 100755 index 0000000..2719099 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_forms.scss @@ -0,0 +1,310 @@ +// +// Form variables +// _____________________________________________ + +// +// Form elements inputs default variables +// --------------------------------------------- + +$form-element-input-type : '' !default; // [input-text|select|textarea|input-radio|input-checkbox] +$form-element-input__background : $color-white !default; +$form-element-input__border-color : $color-gray76 !default; +$form-element-input__border : 1px solid $form-element-input__border-color !default; +$form-element-input__border-radius : 1px !default; +$form-element-input__height : 32px !default; +$form-element-input__width : 100% !default; +$form-element-input__margin : false !default; +$form-element-input__padding : 0 9px !default; +$form-element-input__vertical-align : baseline !default; +$form-element-input__background-clip : padding-box !default; // [border-box|content-box|padding-box] +$form-element-input__font-size : $font-size__base !default; +$form-element-input__color : false !default; +$form-element-input__font-family : $font-family__base !default; +$form-element-input__font-weight : false !default; +$form-element-input__font-style : false !default; +$form-element-input__line-height : $line-height__base !default; + +// Placeholder +$form-element-input-placeholder__color : $color-gray76 !default; +$form-element-input-placeholder__font-style : $form-element-input__font-style !default; + +// Disabled state +$form-element-input__disabled__background : $form-element-input__background !default; +$form-element-input__disabled__border : $form-element-input__border !default; +$form-element-input__disabled__opacity : 0.5 !default; +$form-element-input__disabled__color : $form-element-input__color !default; +$form-element-input__disabled__font-style : $form-element-input__font-style !default; + +// Focus state +$form-element-input__focus__background : $form-element-input__background !default; +$form-element-input__focus__border : $form-element-input__border !default; +$form-element-input__focus__color : $form-element-input__color !default; +$form-element-input__focus__font-style : $form-element-input__font-style !default; + +// Form elements choice default variables +$form-element-choice__type : '' !default; // [radio|checkbox] +$form-element-choice__vertical-align : false !default; +$form-element-choice__margin : 2px $indent__xs 0 0 !default; +$form-element-choice__disabled__opacity : $form-element-input__disabled__opacity !default; + +// +// Input-text +// --------------------------------------------- + +$input-text__background : $form-element-input__background !default; +$input-text__border : $form-element-input__border !default; +$input-text__border-radius : $form-element-input__border-radius !default; +$input-text__height : $form-element-input__height !default; +$input-text__width : $form-element-input__width !default; +$input-text__margin : $form-element-input__margin !default; +$input-text__padding : $form-element-input__padding !default; +$input-text__vertical-align : $form-element-input__vertical-align !default; +$input-text__background-clip : $form-element-input__background-clip !default; // [border-box|content-box|padding-box] +$input-text__font-size : $form-element-input__font-size !default; +$input-text__color : $form-element-input__color !default; +$input-text__font-family : $form-element-input__font-family !default; +$input-text__font-weight : $form-element-input__font-weight !default; +$input-text__font-style : $form-element-input__font-style !default; +$input-text__line-height : $form-element-input__line-height !default; + +// Placeholder +$input-text-placeholder__color : $form-element-input-placeholder__color !default; +$input-text-placeholder__font-style : $form-element-input-placeholder__font-style !default; + +// Disabled state +$input-text__disabled__background : $form-element-input__disabled__background !default; +$input-text__disabled__border : $form-element-input__disabled__border !default; +$input-text__disabled__opacity : $form-element-input__disabled__opacity !default; +$input-text__disabled__color : $form-element-input__disabled__color !default; +$input-text__disabled__font-style : $form-element-input__disabled__font-style !default; + +// Focus state +$input-text__focus__background : $form-element-input__focus__background !default; +$input-text__focus__border : $form-element-input__focus__border !default; +$input-text__focus__color : $form-element-input__focus__color !default; +$input-text__focus__font-style : $form-element-input__focus__font-style !default; + +// +// Select +// --------------------------------------------- + +$select__background : $form-element-input__background !default; +$select__border : $form-element-input__border !default; +$select__border-radius : $form-element-input__border-radius !default; +$select__height : $form-element-input__height !default; +$select__width : $form-element-input__width !default; +$select__margin : $form-element-input__margin !default; +$select__padding : $indent__xs $indent__s 4px !default; +$select__vertical-align : $form-element-input__vertical-align !default; +$select__background-clip : $form-element-input__background-clip !default; // [border-box|content-box|padding-box] +$select__font-size : $form-element-input__font-size !default; +$select__color : $form-element-input__color !default; +$select__font-family : $form-element-input__font-family !default; +$select__font-weight : $form-element-input__font-weight !default; +$select__font-style : $form-element-input__font-style !default; +$select__line-height : $form-element-input__line-height !default; + +// Placeholder +$select-placeholder__color : false !default; +$select-placeholder__font-style : false !default; + +// Disabled state +$select__disabled__background : $form-element-input__disabled__background !default; +$select__disabled__border : $form-element-input__disabled__border !default; +$select__disabled__opacity : $form-element-input__disabled__opacity !default; +$select__disabled__color : $form-element-input__disabled__color !default; +$select__disabled__font-style : $form-element-input__disabled__font-style !default; + +// Focus state +$select__focus__background : $form-element-input__focus__background !default; +$select__focus__border : $form-element-input__focus__border !default; +$select__focus__color : $form-element-input__focus__color !default; +$select__focus__font-style : $form-element-input__focus__font-style !default; + +// +// Textarea +// --------------------------------------------- + +$textarea__background : $form-element-input__background !default; +$textarea__border : $form-element-input__border !default; +$textarea__border-radius : $form-element-input__border-radius !default; +$textarea__height : auto !default; +$textarea__width : $form-element-input__width !default; +$textarea__padding : $indent__s !default; +$textarea__margin : 0 !default; +$textarea__vertical-align : $form-element-input__vertical-align !default; +$textarea__background-clip : $form-element-input__background-clip !default; // [border-box|content-box|padding-box] +$textarea__font-size : $form-element-input__font-size !default; +$textarea__color : $form-element-input__color !default; +$textarea__font-family : $form-element-input__font-family !default; +$textarea__font-weight : $form-element-input__font-weight !default; +$textarea__font-style : $form-element-input__font-style !default; +$textarea__line-height : $form-element-input__line-height !default; +$textarea__resize : vertical !default; // [none|both|horizontal|vertical|inherit] + +// Placeholder +$textarea-placeholder__color : $form-element-input-placeholder__color !default; +$textarea-placeholder__font-style : $form-element-input-placeholder__font-style !default; + +// Disabled state +$textarea__disabled__background : $form-element-input__disabled__background !default; +$textarea__disabled__border : $form-element-input__disabled__border !default; +$textarea__disabled__opacity : $form-element-input__disabled__opacity !default; +$textarea__disabled__color : $form-element-input__disabled__color !default; +$textarea__disabled__font-style : $form-element-input__disabled__font-style !default; + +// Focus state +$textarea__focus__background : $form-element-input__focus__background !default; +$textarea__focus__border : $form-element-input__focus__border !default; +$textarea__focus__color : $form-element-input__focus__color !default; +$textarea__focus__font-style : $form-element-input__focus__font-style !default; + +// +// Radio +// --------------------------------------------- + +$input-radio__vertical-align : $form-element-choice__vertical-align !default; +$input-radio__margin : $form-element-choice__margin !default; + +$input-radio__disabled__opacity : $form-element-choice__disabled__opacity !default; + +// +// Checkbox +// --------------------------------------------- + +$input-checkbox__vertical-align : $form-element-choice__vertical-align !default; +$input-checkbox__margin : $form-element-choice__margin !default; + +$input-checkbox__disabled__opacity : $form-element-choice__disabled__opacity !default; + +// +// Validation +// --------------------------------------------- + +$form-validation-note__color-error : $error__color !default; +$form-validation-note__font-size : $font-size__s !default; +$form-validation-note__font-family : false !default; +$form-validation-note__font-style : false !default; +$form-validation-note__font-weight : false !default; +$form-validation-note__line-height : false !default; +$form-validation-note__margin : 3px 0 0 !default; +$form-validation-note__padding : false !default; + +$form-validation-note-icon__use : false !default; +$form-validation-note-icon__font-content : $icon-pointer-up !default; +$form-validation-note-icon__font : $icon-font !default; +$form-validation-note-icon__font-size : $form-validation-note__font-size * 2 !default; +$form-validation-note-icon__font-line-height : $form-validation-note__font-size !default; +$form-validation-note-icon__font-color : $form-validation-note__color-error !default; +$form-validation-note-icon__font-color-hover : false !default; +$form-validation-note-icon__font-color-active : false !default; +$form-validation-note-icon__font-margin : false !default; +$form-validation-note-icon__font-vertical-align : $icon-font__vertical-align !default; +$form-validation-note-icon__font-position : $icon-font__position !default; +$form-validation-note-icon__font-text-hide : $icon-font__text-hide !default; + +$form-element-validation__color-error : false !default; +$form-element-validation__color-valid : false !default; +$form-element-validation__border-error : lighten($form-validation-note__color-error, 20%) !default; +$form-element-validation__border-valid : false !default; +$form-element-validation__background-error : false !default; +$form-element-validation__background-valid : false !default; + +// +// Fieldset +// --------------------------------------------- + +$form-fieldset__border : 0 !default; +$form-fieldset__margin : 0 0 $indent__xl !default; +$form-fieldset__padding : 0 !default; +$form-fieldset-legend__color : false !default; +$form-fieldset-legend__font-size : 20px !default; +$form-fieldset-legend__font-family : false !default; +$form-fieldset-legend__font-weight : false !default; +$form-fieldset-legend__font-style : false !default; +$form-fieldset-legend__line-height : 1.2 !default; +$form-fieldset-legend__margin : 0 0 $indent__m !default; +$form-fieldset-legend__padding : 0 !default; +$form-fieldset-legend__width : false !default; + +// +// Field +// --------------------------------------------- + +$form-field-type : block !default; // [inline|block] +$form-field-type-revert : inline !default; // [inline|block|false] +$form-field__border : false !default; +$form-field__vertical-indent : $indent__base !default; +$form-field__additional-vertical-indent : $form-field__vertical-indent / 2 !default; +$form-field-type-block__margin : 0 0 $form-field__vertical-indent !default; +$form-field-type-inline__margin : 0 0 $form-field__vertical-indent !default; + +$form-field-column : false !default; +$form-field-column__padding : 0 12px 0 0 !default; +$form-field-column__number : 2 !default; + +// Form field label +$form-field-label__align : false !default; +$form-field-label__color : false !default; +$form-field-label__font-size : false !default; +$form-field-label__font-family : false !default; +$form-field-label__font-weight : $font-weight__bold !default; +$form-field-label__font-style : false !default; +$form-field-label__line-height : false !default; + +$form-field-type-label-inline__margin : false !default; +$form-field-type-label-inline__padding-top : 6px !default; +$form-field-type-label-inline__padding : $form-field-type-label-inline__padding-top 15px 0 0 !default; +$form-field-type-label-inline__width : 25.8% !default; +$form-field-type-label-inline__align : right !default; + +$form-field-type-label-block__margin : 0 0 $indent__xs !default; +$form-field-type-label-block__padding : false !default; +$form-field-type-label-block__align : $form-field-label__align !default; + +// Form field control +$form-field-type-control-inline__width : 74.2% !default; + +// Form field label asterisk +$form-field-label-asterisk__color : $color-red10 !default; +$form-field-label-asterisk__font-size : $font-size__s !default; +$form-field-label-asterisk__font-family : false !default; +$form-field-label-asterisk__font-weight : false !default; +$form-field-label-asterisk__font-style : false !default; +$form-field-label-asterisk__line-height : false !default; +$form-field-label-asterisk__margin : 0 0 0 $indent__xs !default; + +// Form field note +$form-field-note__color : false !default; +$form-field-note__font-size : $font-size__s !default; +$form-field-note__font-family : false !default; +$form-field-note__font-weight : false !default; +$form-field-note__font-style : false !default; +$form-field-note__line-height : false !default; +$form-field-note__margin : 3px 0 0 !default; +$form-field-note__padding : 0 !default; + +// Form field note icon +$form-field-note-icon-font : $icon-font !default; +$form-field-note-icon-font__content : $icon-pointer-up !default; +$form-field-note-icon-font__size : $form-field-note__font-size * 2 !default; +$form-field-note-icon-font__line-height : $form-field-note__font-size !default; +$form-field-note-icon-font__color : $form-field-note__color !default; +$form-field-note-icon-font__color-hover : false !default; +$form-field-note-icon-font__color-active : false !default; +$form-field-note-icon-font__margin : false !default; +$form-field-note-icon-font__vertical-align : $icon-font__vertical-align !default; +$form-field-note-icon-font__position : $icon-font__position !default; +$form-field-note-icon-font__text-hide : $icon-font__text-hide !default; + +// Hasrequired +$form-hasrequired__position : top !default; // [top|bottom] +$form-hasrequired__color : $form-field-label-asterisk__color !default; +$form-hasrequired__font-size : $font-size__s !default; +$form-hasrequired__font-family : false !default; +$form-hasrequired__font-weight : false !default; +$form-hasrequired__font-style : false !default; +$form-hasrequired__line-height : false !default; +$form-hasrequired__border : false !default; +$form-hasrequired__margin : $indent__s 0 0 !default; +$form-hasrequired__padding : false !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_global.scss b/src/scss/boilerplate/magento-ui/variables/_global.scss new file mode 100755 index 0000000..9efad1b --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_global.scss @@ -0,0 +1,16 @@ +// +// Indents +// --------------------------------------------- + +$indent__base : 20px !default; +$indent__xl : 40px !default; +$indent__l : 30px !default; +$indent__m : 25px !default; +$indent__s : 10px !default; +$indent__xs : 5px !default; +$indent__auto : auto !default; + +// +// Icons +// --------------------------------------------- +$icons__font-name : 'icons-blank-theme' !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_icons.scss b/src/scss/boilerplate/magento-ui/variables/_icons.scss new file mode 100755 index 0000000..15cc8fb --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_icons.scss @@ -0,0 +1,80 @@ +// +// Icons variables +// _____________________________________________ + +$icon__position : before !default; +$icon__text-hide : false !default; +$icon__height : 26px !default; +$icon__width : 26px !default; +$icon__margin : '' !default; +$icon__vertical-align : middle !default; + +$icon-image__position-x : 0 !default; +$icon-image__position-y : 0 !default; + +$icon-sprite__position-x : 0 !default; +$icon-sprite__position-y : 0 !default; +$icon-sprite__grid : 26px !default; + +$icon-font : $icons__font-name !default; +$icon-font__position : $icon__position !default; +$icon-font__text-hide : $icon__text-hide !default; +$icon-font__margin : $icon__margin !default; +$icon-font__size : inherit !default; +$icon-font__line-height : $icon-font__size !default; +$icon-font__color : inherit !default; +$icon-font__color-hover : false !default; +$icon-font__color-active : false !default; +$icon-font__vertical-align : $icon__vertical-align !default; +$icon-font__display : inline-block !default; + +$icon-calendar__font-size : 40px !default; + +// +// Variables for icons-blank-theme +// --------------------------------------------- + +// ToDo UI : move it to blank theme variables +$icon-wishlist-full : '\e600' !default; +$icon-wishlist-empty : '\e601' !default; +$icon-warning : '\e602' !default; +$icon-update : '\e603' !default; +$icon-trash : '\e604' !default; +$icon-star : '\e605' !default; +$icon-settings : '\e606' !default; +$icon-pointer-down : '\e607' !default; +$icon-next : '\e608' !default; +$icon-menu : '\e609' !default; +$icon-location : '\e60a' !default; +$icon-list : '\e60b' !default; +$icon-info : '\e60c' !default; +$icon-grid : '\e60d' !default; +$icon-comment-reflected : '\e60e' !default; +$icon-collapse : '\e60f' !default; +$icon-checkmark : '\e610' !default; +$icon-cart : '\e611' !default; +$icon-calendar : '\e612' !default; +$icon-arrow-up : '\e613' !default; +$icon-arrow-down : '\e614' !default; +$icon-search : '\e615' !default; +$icon-remove : '\e616' !default; +$icon-prev : '\e617' !default; +$icon-pointer-up : '\e618' !default; +$icon-pointer-right : '\e619' !default; +$icon-pointer-left : '\e61a' !default; +$icon-flag : '\e61b' !default; +$icon-expand : '\e61c' !default; +$icon-envelope : '\e61d' !default; +$icon-compare-full : '\e61e' !default; +$icon-compare-empty : '\e61f' !default; +$icon-comment : '\e620' !default; +$icon-up : '\e621' !default; +$icon-down : '\e622' !default; +$icon-help : '\e623' !default; +$icon-arrow-right-thin : '\e624' !default; +$icon-arrow-left-thin : '\e625' !default; +$icon-arrow-down-thin : '\e626' !default; +$icon-account : '\e627' !default; +$icon-gift-registry : '\e628' !default; +$icon-present : '\e629' !default; +$icon-arrow-up-thin : '\e633' !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_layout.scss b/src/scss/boilerplate/magento-ui/variables/_layout.scss new file mode 100755 index 0000000..17f2bda --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_layout.scss @@ -0,0 +1,35 @@ +// +// Layout variables +// _____________________________________________ + +// Widths +$layout__width : '' !default; // for the fixed width layout +$layout__max-width : 1280px !default; +$layout-indent__width : 20px !default; +$layout__width-xs-indent : 15px !default; + +// Classnames defining different layouts +$layout-class-1column : page-layout-1column !default; +$layout-class-2columns__left : page-layout-2columns-left !default; +$layout-class-2columns__right : page-layout-2columns-right !default; +$layout-class-3columns : page-layout-3columns !default; + +// Variables used for layout grid +$total-columns : 12 !default; +$gutter-width : 0 !default; + +// Variables for layout columns +$layout-column__width : $total-columns !default; +$layout-column__sidebar-width : 2 !default; +$layout-column__left-width : $layout-column__sidebar-width !default; +$layout-column__right-width : $layout-column__sidebar-width !default; + +// Variables for layout columns depending on layout used +$layout-column-main__width-1 : 100% !default; +$layout-column-main__width-2-left : $layout-column__width - $layout-column__left-width !default; +$layout-column-main__width-2-right : $layout-column__width - $layout-column__right-width !default; +$layout-column-main__width-3 : $layout-column__width - $layout-column__left-width - $layout-column__right-width !default; + +// Checkout columns width +$layout-column-checkout__width-left : 3 !default; +$layout-column-checkout__width-main : $layout-column__width - $layout-column-checkout__width-left !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_loaders.scss b/src/scss/boilerplate/magento-ui/variables/_loaders.scss new file mode 100755 index 0000000..4e823bc --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_loaders.scss @@ -0,0 +1,25 @@ +// +// Loader variables +// _____________________________________________ + +$loader-overlay__background-color : rgba(255, 255, 255, 0.5) !default; +$loader-overlay__z-index : 9999 !default; + +$loader-icon__width : 160px !default; +$loader-icon__height : 160px !default; +$loader-icon__background-color : transparent !default; +$loader-icon__background-image : url('../images/loader-2.gif') !default; +$loader-icon__background-position : 50% 50% !default; +$loader-icon__border-radius : 5px !default; +$loader-icon__padding : '' !default; + +$loader-text : false !default; +$loader-text__color : $primary__color !default; +$loader-text__font-size : $font-size__base !default; +$loader-text__font-family : $font-family__base !default; +$loader-text__font-weight : $font-weight__regular !default; +$loader-text__font-style : $font-style__base !default; +$loader-text__padding : 130px 0 0 !default; + +$loading__background-color : $loader-overlay__background-color !default; +$loading__background-image : $loader-icon__background-image !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_messages.scss b/src/scss/boilerplate/magento-ui/variables/_messages.scss new file mode 100755 index 0000000..4f83c13 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_messages.scss @@ -0,0 +1,209 @@ +// +// Messages variables +// _____________________________________________ + +$message__padding : $indent__s $indent__base !default; +$message__margin : 0 0 $indent__s !default; + +$message__color : false !default; // Each message type has its own message color +$message__font-size : 13px !default; +$message__font-family : false !default; +$message__font-style : false !default; +$message__font-weight : false !default; +$message__line-height : 1.2em !default; + +$message-icon__font-size : ceil($message__font-size * 2 + 2) !default; +$message-icon__font-line-height : $message-icon__font-size !default; +$message-icon__inner-padding-left : 40px !default; +$message-icon__lateral-width : 30px !default; +$message-icon__lateral-arrow-size : 5px !default; +$message-icon__top : 18px !default; +$message-icon__right : false !default; +$message-icon__bottom : false !default; +$message-icon__left : 0 !default; + +$message__border-width : false !default; +$message__border-color : false !default; +$message__border-style : false !default; +$message__border-radius : false !default; + +// Information message +$message-info__color : $color-brownie1 !default; +$message-info__background : $color-yellow-light1 !default; +$message-info__border-color : $message__border-color !default; + +$message-info-link__color : $link__color !default; +$message-info-link__color-hover : $link__hover__color !default; +$message-info-link__color-active : $link__hover__color !default; + +$message-info-icon : $icon-warning !default; +$message-info-icon__color-inner : $color-brownie-light1 !default; +$message-info-icon__color-lateral : $color-white !default; +$message-info-icon__background : $color-brownie1 !default; +$message-info-icon__top : $message-icon__top !default; +$message-info-icon__right : $message-icon__right !default; +$message-info-icon__bottom : $message-icon__bottom !default; +$message-info-icon__left : $message-icon__left !default; + +$message-info-map : ( + color : $message-info__color, + background : $message-info__background, + border-color : $message-info__border-color, + link__color : $message-info-link__color, + link__color-hover : $message-info-link__color-hover, + link__color-active : $message-info-link__color-active, + icon : $message-info-icon, + icon__color-inner : $message-info-icon__color-inner, + icon__color-lateral : $message-info-icon__color-lateral, + icon__background : $message-info-icon__background, + icon__top : $message-info-icon__top, + icon__right : $message-info-icon__right, + icon__bottom : $message-info-icon__bottom, + icon__left : $message-info-icon__left +) !default; + +// Warning message +$message-warning__color : $message-info__color !default; +$message-warning__background : $message-info__background !default; +$message-warning__border-color : $message-info__border-color !default; + +$message-warning-link__color : $message-info-link__color !default; +$message-warning-link__color-hover : $message-info-link__color-hover !default; +$message-warning-link__color-active : $message-info-link__color-active !default; + +$message-warning-icon : $message-info-icon !default; +$message-warning-icon__color-inner : $message-info-icon__color-inner !default; +$message-warning-icon__color-lateral : $message-info-icon__color-lateral !default; +$message-warning-icon__background : $message-info-icon__background !default; +$message-warning-icon__top : $message-icon__top !default; +$message-warning-icon__right : $message-icon__right !default; +$message-warning-icon__bottom : $message-icon__bottom !default; +$message-warning-icon__left : $message-icon__left !default; + +$message-warning-map : ( + color : $message-warning__color, + background : $message-warning__background, + border-color : $message-warning__border-color, + link__color : $message-warning-link__color, + link__color-hover : $message-warning-link__color-hover, + link__color-active : $message-warning-link__color-active, + icon : $message-warning-icon, + icon__color-inner : $message-warning-icon__color-inner, + icon__color-lateral : $message-warning-icon__color-lateral, + icon__background : $message-warning-icon__background, + icon__top : $message-warning-icon__top, + icon__right : $message-warning-icon__right, + icon__bottom : $message-warning-icon__bottom, + icon__left : $message-warning-icon__left +) !default; + +// Error message +$message-error__color : $error__color !default; +$message-error__background : $color-pink1 !default; +$message-error__border-color : $message__border-color !default; + +$message-error-link__color : $link__color !default; +$message-error-link__color-hover : $link__hover__color !default; +$message-error-link__color-active : $link__hover__color !default; + +$message-error-icon : $icon-warning !default; +$message-error-icon__color-inner : $color-red11 !default; +$message-error-icon__color-lateral : $color-white !default; +$message-error-icon__background : $color-red11 !default; +$message-error-icon__top : $message-icon__top !default; +$message-error-icon__right : $message-icon__right !default; +$message-error-icon__bottom : $message-icon__bottom !default; +$message-error-icon__left : $message-icon__left !default; + +$message-error-map : ( + color : $message-error__color, + background : $message-error__background, + border-color : $message-error__border-color, + link__color : $message-error-link__color, + link__color-hover : $message-error-link__color-hover, + link__color-active : $message-error-link__color-active, + icon : $message-error-icon, + icon__color-inner : $message-error-icon__color-inner, + icon__color-lateral : $message-error-icon__color-lateral, + icon__background : $message-error-icon__background, + icon__top : $message-error-icon__top, + icon__right : $message-error-icon__right, + icon__bottom : $message-error-icon__bottom, + icon__left : $message-error-icon__left +) !default; + +// Success message +$message-success__color : $color-dark-green1 !default; +$message-success__background : $color-gray-light1 !default; +$message-success__border-color : $message__border-color !default; + +$message-success-link__color : $link__color !default; +$message-success-link__color-hover : $link__hover__color !default; +$message-success-link__color-active : $link__hover__color !default; + +$message-success-icon : $icon-checkmark !default; +$message-success-icon__color-inner : $color-dark-green1 !default; +$message-success-icon__color-lateral : $color-white !default; +$message-success-icon__background : $color-dark-green1 !default; +$message-success-icon__top : $message-icon__top !default; +$message-success-icon__right : $message-icon__right !default; +$message-success-icon__bottom : $message-icon__bottom !default; +$message-success-icon__left : $message-icon__left !default; + +$message-success-map : ( + color : $message-success__color, + background : $message-success__background, + border-color : $message-success__border-color, + link__color : $message-success-link__color, + link__color-hover : $message-success-link__color-hover, + link__color-active : $message-success-link__color-active, + icon : $message-success-icon, + icon__color-inner : $message-success-icon__color-inner, + icon__color-lateral : $message-success-icon__color-lateral, + icon__background : $message-success-icon__background, + icon__top : $message-success-icon__top, + icon__right : $message-success-icon__right, + icon__bottom : $message-success-icon__bottom, + icon__left : $message-success-icon__left +) !default; + +// Notice message +$message-notice__color : $message-info__color !default; +$message-notice__background : $message-info__background !default; +$message-notice__border-color : $message-info__border-color !default; + +$message-notice-link__color : $message-info-link__color !default; +$message-notice-link__color-hover : $message-info-link__color-hover !default; +$message-notice-link__color-active : $message-info-link__color-active !default; + +$message-notice-icon : $message-info-icon !default; +$message-notice-icon__color-inner : $message-info-icon__color-inner !default; +$message-notice-icon__color-lateral : $message-info-icon__color-lateral !default; +$message-notice-icon__background : $message-info-icon__background !default; +$message-notice-icon__top : $message-icon__top !default; +$message-notice-icon__right : $message-icon__right !default; +$message-notice-icon__bottom : $message-icon__bottom !default; +$message-notice-icon__left : $message-icon__left !default; + +$message-notice-map : ( + color : $message-notice__color, + background : $message-notice__background, + border-color : $message-notice__border-color, + link__color : $message-notice-link__color, + link__color-hover : $message-notice-link__color-hover, + link__color-active : $message-notice-link__color-active, + icon : $message-notice-icon, + icon__color-inner : $message-notice-icon__color-inner, + icon__color-lateral : $message-notice-icon__color-lateral, + icon__background : $message-notice-icon__background, + icon__top : $message-notice-icon__top, + icon__right : $message-notice-icon__right, + icon__bottom : $message-notice-icon__bottom, + icon__left : $message-notice-icon__left +) !default; + +// Email messages +$message-email__color : $text__color !default; +$message-email__background : $message-info__background !default; +$message-email__border-color : $message-info__border-color !default; +$message-email-link__color : $message-info-link__color !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_navigation.scss b/src/scss/boilerplate/magento-ui/variables/_navigation.scss new file mode 100755 index 0000000..066ad20 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_navigation.scss @@ -0,0 +1,110 @@ +// +// Navigation variables +// _____________________________________________ + +$navigation__background : $secondary__color__light !default; +$navigation__border : '' !default; + +$navigation-level0-item__font-size : 16 !default; +$navigation-level0-item__font-weight : $font-weight__bold !default; +$navigation-level0-item__line-height : false !default; +$navigation-level0-item__margin : 0 !default; +$navigation-level0-item__padding : 8px $indent__xl 8px 15px !default; +$navigation-level0-item__text-transform : uppercase !default; + +$navigation-level0-item__background : '' !default; +$navigation-level0-item__border : 1px solid $color-gray82 !default; +$navigation-level0-item__color : $color-gray34 !default; +$navigation-level0-item__text-decoration : none !default; + +$navigation-level0-item__active__background : '' !default; +$navigation-level0-item__active__border-color : $color-orange-red1 !default; +$navigation-level0-item__active__border-style : solid !default; +$navigation-level0-item__active__border-width : 0 0 0 8px !default; +$navigation-level0-item__active__color : '' !default; +$navigation-level0-item__active__text-decoration : '' !default; + +$submenu__background : '' !default; +$submenu__border : '' !default; +$submenu__padding-top : $indent__s !default; +$submenu__padding-right : 0 !default; +$submenu__padding-bottom : $indent__s !default; +$submenu__padding-left : 15px !default; +$submenu__font-size : '' !default; +$submenu__font-weight : $font-weight__regular !default; +$submenu-item__line-height : 1.3 !default; + +$submenu-item__background : '' !default; +$submenu-item__border : '' !default; +$submenu-item__color : $color-gray34 !default; +$submenu-item__text-decoration : '' !default; + +$submenu-item__active__background : '' !default; +$submenu-item__active__border : 8px !default; +$submenu-item__active__border-color : $color-orange-red1 !default; +$submenu-item__active__border-style : solid !default; +$submenu-item__active__border-width : 0 0 0 $submenu-item__active__border !default; +$submenu-item__active__color : '' !default; +$submenu-item__active__text-decoration : '' !default; + +// +// Desktop navigation +// --------------------------------------------- + +$navigation-desktop__background : $navigation__background !default; +$navigation-desktop__border : '' !default; +$navigation-desktop__font-size : '' !default; +$navigation-desktop__font-weight : $font-weight__bold !default; + +$navigation-desktop-level0-item__line-height : 53px !default; +$navigation-desktop-level0-item__margin : 0 $indent__s 0 0 !default; +$navigation-desktop-level0-item__padding : 0 12px !default; + +$navigation-desktop-level0-item__background : '' !default; +$navigation-desktop-level0-item__border : '' !default; +$navigation-desktop-level0-item__color : $color-gray34 !default; +$navigation-desktop-level0-item__text-decoration : none !default; + +$navigation-desktop-level0-item__hover__background : '' !default; +$navigation-desktop-level0-item__hover__border : '' !default; +$navigation-desktop-level0-item__hover__color : $primary__color !default; +$navigation-desktop-level0-item__hover__text-decoration : $navigation-desktop-level0-item__text-decoration !default; + +$navigation-desktop-level0-item__active__background : '' !default; +$navigation-desktop-level0-item__active__border-color : $color-orange-red1 !default; +$navigation-desktop-level0-item__active__border-style : solid !default; +$navigation-desktop-level0-item__active__border-width : 0 0 3px !default; +$navigation-desktop-level0-item__active__color : $navigation-desktop-level0-item__hover__color !default; +$navigation-desktop-level0-item__active__text-decoration : $navigation-desktop-level0-item__text-decoration !default; + +$submenu-desktop__background : $page__background-color !default; +$submenu-desktop__border-width : $border-width__base !default; +$submenu-desktop__border-style : solid !default; +$submenu-desktop__border-color : $border-color__base !default; +$submenu-desktop__box-shadow : 0 $indent__xs $indent__xs rgba(0, 0, 0, 0.19) !default; +$submenu-desktop__font-size : '' !default; +$submenu-desktop__font-weight : $font-weight__bold !default; +$submenu-desktop__min-width : 230px !default; +$submenu-desktop__padding : 15px 0 !default; + +$submenu-desktop-arrow : true !default; // [true|false] +$submenu-desktop-arrow__size : 10px !default; +$submenu-desktop-arrow__left : 20px !default; + +$submenu-desktop-item__padding : 8px $indent__base !default; +$submenu-desktop-item__background : '' !default; +$submenu-desktop-item__border : '' !default; +$submenu-desktop-item__color : $navigation-desktop-level0-item__color !default; +$submenu-desktop-item__text-decoration : '' !default; + +$submenu-desktop-item__hover__background : $secondary__color !default; +$submenu-desktop-item__hover__border : '' !default; +$submenu-desktop-item__hover__color : $navigation-desktop-level0-item__hover__color !default; +$submenu-desktop-item__hover__text-decoration : $navigation-desktop-level0-item__text-decoration !default; + +$submenu-desktop-item__active__background : '' !default; +$submenu-desktop-item__active__border-color : $color-orange-red1 !default; +$submenu-desktop-item__active__border-style : solid !default; +$submenu-desktop-item__active__border-width : 0 0 0 3px !default; +$submenu-desktop-item__active__color : '' !default; +$submenu-desktop-item__active__text-decoration : '' !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_pages.scss b/src/scss/boilerplate/magento-ui/variables/_pages.scss new file mode 100755 index 0000000..b74c53b --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_pages.scss @@ -0,0 +1,106 @@ +// +// Pager variables +// _____________________________________________ + +$pager-label__display : none !default; +$pager-reset-spaces : true !default; // Reset spaces between inline-block elements + +$pager__font-size : $font-size__s !default; +$pager__font-weight : $font-weight__bold !default; +$pager__line-height : 32px !default; + +$pager-item__display : inline-block !default; +$pager-item__margin : 0 2px 0 0 !default; +$pager-item__padding : 0 4px !default; + +$pager-actions__padding : 0 !default; + +// Pager current page +$pager-current__font-weight : $font-weight__bold !default; +$pager-current__color : $primary__color !default; +$pager-current__border : false !default; +$pager-current__background : false !default; +$pager-current__gradient : false !default; +$pager-current__gradient-direction : false !default; +$pager-current__gradient-color-start : false !default; +$pager-current__gradient-color-end : false !default; + +// Pager link page +$pager__gradient : false !default; +$pager__gradient-direction : false !default; + +// Pager link default +$pager__color : $link__color !default; +$pager__border : false !default; +$pager__text-decoration : none !default; +$pager__background : false !default; +$pager__gradient-color-start : false !default; +$pager__gradient-color-end : false !default; + +// Pager link visited +$pager__visited__color : $link__visited__color !default; +$pager__visited__border : false !default; +$pager__visited__background : false !default; +$pager__visited__gradient-color-start : false !default; +$pager__visited__gradient-color-end : false !default; + +// Pager link hover +$pager__hover__color : $link__hover__color !default; +$pager__hover__border : false !default; +$pager__hover__text-decoration : none !default; +$pager__hover__background : false !default; +$pager__hover__gradient-color-start : false !default; +$pager__hover__gradient-color-end : false !default; + +// Pager link active +$pager__active__color : $link__active__color !default; +$pager__active__border : false !default; +$pager__active__background : false !default; +$pager__active__gradient-color-start : false !default; +$pager__active__gradient-color-end : false !default; + +// Pager link.action +$pager-icon__use : true !default; +$pager-icon__previous-content : $icon-prev !default; +$pager-icon__next-content : $icon-next !default; +$pager-icon__text-hide : true !default; +$pager-icon__position : before !default; +$pager-icon__font : $icon-font !default; +$pager-icon__font-margin : 0 0 0 -6px !default; +$pager-icon__font-vertical-align : top !default; +$pager-icon__font-size : 46px !default; +$pager-icon__font-line-height : $icon-font__line-height !default; + +// Pager link.action gradient : element has a gradient background +$pager-action__gradient : false !default; // [true|false] +$pager-action__gradient-direction : false !default; // [true|false] + +// Pager link.action default +$pager-action__color : $text__color__muted !default; +$pager-action__border : $border-width__base solid $border-color__base !default; +$pager-action__text-decoration : $pager__text-decoration !default; +$pager-action__background : $pager__background !default; +$pager-action__gradient-color-start : false !default; +$pager-action__gradient-color-end : false !default; + +// Pager link.action visited +$pager-action__visited__color : $pager-action__color !default; +$pager-action__visited__border : false !default; +$pager-action__visited__background : false !default; +$pager-action__visited__gradient-color-start : false !default; +$pager-action__visited__gradient-color-end : false !default; + +// Pager link.action hover +$pager-action__hover__color : $pager-action__color !default; +$pager-action__hover__border : false !default; +$pager-action__hover__background : false !default; +$pager-action__hover__text-decoration : $pager__hover__text-decoration !default; +$pager-action__hover__gradient-color-start : false !default; +$pager-action__hover__gradient-color-end : false !default; + +// Pager link.action active +$pager-action__active__color : $pager-action__color !default; +$pager-action__active__border : false !default; +$pager-action__active__background : false !default; +$pager-action__active__gradient-color-start : false !default; +$pager-action__active__gradient-color-end : false !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_popups.scss b/src/scss/boilerplate/magento-ui/variables/_popups.scss new file mode 100755 index 0000000..f3cb33e --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_popups.scss @@ -0,0 +1,75 @@ +// +// Popup variables +// _____________________________________________ + +$popup__width : 100% !default; +$popup__height : auto !default; +$popup__padding : 22px !default; +$popup__background : $color-white !default; +$popup__border-color : $color-gray-light3 !default; +$popup__border : 1px solid $popup__border-color !default; +$popup__shadow : 0 3px 3px rgba(0, 0, 0, 0.15) !default; +$popup__fade : opacity 0.3s linear !default; +$popup__z-index : 1001 !default; + +$popup__position : fixed !default; +$popup__position-top : 0 !default; +$popup__position-right : 0 !default; +$popup__position-bottom : 0 !default; +$popup__position-left : 0 !default; + +$popup__margin-top : false !default; +$popup__margin-right : false !default; +$popup__margin-bottom : false !default; +$popup__margin-left : false !default; + +$popup-content__height : auto !default; +$popup-content__margin : false !default; +$popup-header__margin : 0 0 25px !default; +$popup-footer__margin : false !default; + +$popup-title-headings : true !default; // [true|false] +$popup-title-headings__level : h3 !default; // [h1|h2|h3|h4|h5|h6] + +$popup-button-close__icon : true !default; // [true|false] +$popup-button-close__reset : true !default; // [true|false] +$popup-button-close__position : absolute !default; +$popup-button-close__position-top : $indent__s !default; +$popup-button-close__position-right : $indent__s !default; +$popup-button-close__position-bottom : false !default; +$popup-button-close__position-left : false !default; + +// Actions toolbar variables +$popup-actions-toolbar : false !default; // [true|false] +$popup-actions-toolbar__margin : $actions-toolbar__margin !default; +$popup-actions-toolbar__padding : $actions-toolbar__padding !default; + +$popup-actions-toolbar-actions__position : $actions-toolbar-actions__position !default; +$popup-actions-toolbar-actions__reverse : $actions-toolbar-actions__reverse !default; +$popup-actions-toolbar-actions__margin : $actions-toolbar-actions__margin !default; +$popup-actions-toolbar-actions-primary__margin : $actions-toolbar-actions-primary__margin !default; +$popup-actions-toolbar-actions-secondary__margin : $actions-toolbar-actions-secondary__margin !default; + +$popup-actions-toolbar-actions-links__margin-top : $actions-toolbar-actions-links__margin-top !default; +$popup-actions-toolbar-actions-links-primary__margin-top : $actions-toolbar-actions-links-primary__margin-top !default; +$popup-actions-toolbar-actions-links-secondary__margin-top : $actions-toolbar-actions-links-secondary__margin-top !default; + +// Popup Icons variables +$popup-icon-font : $button-icon__font !default; +$popup-icon-font__content : $icon-remove !default; +$popup-icon-font__size : $button-icon__font-size !default; +$popup-icon-font__line-height : $button-icon__line-height !default; +$popup-icon-font__color : $button-icon__color !default; +$popup-icon-font__color-hover : $button-icon__hover__font-color !default; +$popup-icon-font__color-active : $button-icon__active__font-color !default; +$popup-icon-font__margin : $button-icon__margin !default; +$popup-icon-font__vertical-align : $button-icon__vertical-align !default; +$popup-icon-font__position : $button-icon__position !default; +$popup-icon-font__text-hide : true !default; + +// Window overlay variables +$overlay__background : $color-black !default; +$overlay__opacity : 0.5 !default; +$overlay__opacity-old : 50 !default; +$overlay__fade : opacity 0.15s linear !default; +$overlay__z-index : 1000 !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_rating.scss b/src/scss/boilerplate/magento-ui/variables/_rating.scss new file mode 100755 index 0000000..cda3440 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_rating.scss @@ -0,0 +1,14 @@ +// +// Rating variables +// _____________________________________________ + +$rating-icon__count : 5 !default; +$rating-icon__content : $icon-star !default; +$rating-icon__font : $icon-font !default; +$rating-icon__font-size : 28px !default; +$rating-icon__letter-spacing : -10px !default; +$rating-icon__color : $color-gray78 !default; + +$rating-icon__active__color : $color-orange-red1 !default; + +$rating-label__hide : false !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_responsive.scss b/src/scss/boilerplate/magento-ui/variables/_responsive.scss new file mode 100755 index 0000000..c358156 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_responsive.scss @@ -0,0 +1,13 @@ +// +// Responsive variables +// _____________________________________________ + +$use-flex : true !default; // Use flexbox [true|false] +$responsive : true !default; // Theme is responsive [true|false] + +$screen__xxs : 320px !default; +$screen__xs : 480px !default; +$screen__s : 640px !default; +$screen__m : 768px !default; +$screen__l : 1024px !default; +$screen__xl : 1440px !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_sections.scss b/src/scss/boilerplate/magento-ui/variables/_sections.scss new file mode 100755 index 0000000..e78ec99 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_sections.scss @@ -0,0 +1,84 @@ +// +// Sections variables +// _____________________________________________ + +// +// Tabs +// --------------------------------------------- + +// Tabs controls +$tab-control__font-size : $font-size__base !default; +$tab-control__font-family : false !default; +$tab-control__font-weight : $font-weight__semibold !default; +$tab-control__font-style : false !default; +$tab-control__height__base : $line-height__computed !default; +$tab-control__height : $indent__base !default; +$tab-control__line-height : $tab-control__height !default; +$tab-control__margin-right : $indent__xs !default; +$tab-control__padding-top : $indent__xs !default; +$tab-control__padding-right : $indent__base !default; +$tab-control__padding-bottom : $tab-control__padding-top !default; +$tab-control__padding-left : $tab-control__padding-right !default; +$tab-control__border-color : $border-color__base !default; +$tab-control__border-width : $border-width__base !default; + +// Current tab +$tab-control__background-color : $panel__background-color !default; +$tab-control__color : $text__color__muted !default; +$tab-control__text-decoration : none !default; + +$tab-control__hover__background-color : lighten($tab-control__background-color, 5%) !default; +$tab-control__hover__color : $tab-control__color !default; +$tab-control__hover__text-decoration : $tab-control__text-decoration !default; + +$tab-control__active__background-color : lighten($tab-control__background-color, 15%) !default; +$tab-control__active__color : $text__color !default; +$tab-control__active__text-decoration : $tab-control__text-decoration !default; + +$tab-content__background-color : $tab-control__active__background-color !default; +$tab-content__border-top-status : false !default; +$tab-content__border : $tab-control__border-width solid $tab-control__border-color !default; +$tab-content__margin-top : $tab-control__height + $tab-control__border-width + $tab-control__padding-top + $tab-control__padding-bottom !default; +$tab-content__padding-top : $indent__base !default; +$tab-content__padding-right : $indent__base !default; +$tab-content__padding-bottom : $tab-content__padding-top !default; +$tab-content__padding-left : $tab-content__padding-right !default; + +// +// Accordions +// --------------------------------------------- + +$accordion-control__font-family : $tab-control__font-family !default; +$accordion-control__font-size : $font-size__l !default; +$accordion-control__font-style : $tab-control__font-style !default; +$accordion-control__font-weight : $tab-control__font-weight !default; +$accordion-control__height : $indent__xl !default; +$accordion-control__line-height : $accordion-control__height !default; +$accordion-control__border-top : $tab-control__border-width solid $tab-control__border-color !default; +$accordion-control__border-right : $tab-control__border-width solid $tab-control__border-color !default; +$accordion-control__border-bottom : $tab-control__border-width solid $tab-control__border-color !default; +$accordion-control__border-left : $tab-control__border-width solid $tab-control__border-color !default; +$accordion-control__background-color : $tab-control__background-color !default; +$accordion-control__color : $tab-control__color !default; +$accordion-control__text-decoration : $tab-control__text-decoration !default; +$accordion-control__margin-bottom : $indent__xs !default; +$accordion-control__padding-top : $tab-control__padding-top !default; +$accordion-control__padding-right : $indent__base !default; +$accordion-control__padding-bottom : $tab-control__padding-bottom !default; +$accordion-control__padding-left : $accordion-control__padding-right !default; + +$accordion-control__visited__color : $accordion-control__color !default; +$accordion-control__visited__text-decoration : $accordion-control__text-decoration !default; + +$accordion-control__hover__background-color : $tab-control__hover__background-color !default; +$accordion-control__hover__color : $tab-control__hover__color !default; +$accordion-control__hover__text-decoration : $tab-control__hover__text-decoration !default; + +$accordion-control__active__background-color : $tab-control__active__background-color !default; +$accordion-control__active__color : $tab-control__active__color !default; +$accordion-control__active__text-decoration : $tab-control__active__text-decoration !default; + +$accordion-content__background-color : $tab-control__active__background-color !default; +$accordion-content__border : $tab-content__border !default; +$accordion-content__margin : 0 0 $indent__xs !default; +$accordion-content__padding : $tab-content__padding-top $tab-content__padding-right $tab-content__padding-bottom $tab-content__padding-left !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_structure.scss b/src/scss/boilerplate/magento-ui/variables/_structure.scss new file mode 100755 index 0000000..5806e8e --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_structure.scss @@ -0,0 +1,24 @@ +// +// Structure +// _____________________________________________ + +// +// Z axis +// --------------------------------------------- + +$z-index-1 : 100 !default; +$z-index-2 : 200 !default; +$z-index-3 : 300 !default; +$z-index-4 : 400 !default; +$z-index-5 : 500 !default; +$z-index-6 : 600 !default; +$z-index-7 : 700 !default; +$z-index-8 : 800 !default; +$z-index-9 : 900 !default; +$z-index-10 : 1000 !default; + +// z-index 9 +$modal__z-index : $z-index-9 !default; + +// z-index 8 +$overlay__z-index : $modal__z-index - 1 !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_tables.scss b/src/scss/boilerplate/magento-ui/variables/_tables.scss new file mode 100755 index 0000000..b3c8198 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_tables.scss @@ -0,0 +1,50 @@ +// +// Table variables +// _____________________________________________ + +$table__width : 100% !default; +$table__margin-bottom : false !default; +$table__background-color : false !default; +$table__border-color : $border-color__base !default; +$table__border-width : $border-width__base !default; +$table__border-style : solid !default; + +$table-head__background-color : $table__background-color !default; +$table-foot__background-color : $table__background-color !default; +$table-body-th__background-color : $table__background-color !default; + +$table-caption__hide : true !default; // [true|false] +$table-caption__font-size : false !default; +$table-caption__color : false !default; +$table-caption__font-family : false !default; +$table-caption__font-weight : false !default; +$table-caption__font-style : false !default; +$table-caption__line-height : false !default; +$table-caption__alignment : false !default; +$table-caption__margin-top : false !default; +$table-caption__margin-bottom : false !default; + +$table-td__background-color : $table__background-color !default; +$table-td__font-size : false !default; +$table-td__color : false !default; +$table-td__font-family : false !default; +$table-td__font-weight : false !default; +$table-td__line-height : false !default; +$table-td__font-style : false !default; + +$table-th__font-size : false !default; +$table-th__color : $text__color__intense !default; +$table-th__font-family : false !default; +$table-th__font-weight : $font-weight__bold !default; +$table-th__line-height : false !default; +$table-th__font-style : false !default; + +$table-cell__padding-horizontal : $indent__s !default; +$table-cell__padding-vertical : 8px !default; +$table-cell__hover__background-color : $panel__background-color !default; +$table-cell-stripped__background-color : lighten($table-cell__hover__background-color, 15%) !default; +$table-cell-stripped__color : $table-td__color !default; + +$table-responsive__background-color : $table__background-color !default; +$table-responsive-th__background-color : false !default; +$table-responsive-cell__padding : $indent__xs 0 !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_tooltips.scss b/src/scss/boilerplate/magento-ui/variables/_tooltips.scss new file mode 100755 index 0000000..2a3402c --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_tooltips.scss @@ -0,0 +1,23 @@ +// +// Tooltips variables +// _____________________________________________ + +$tooltip__background : $color-white !default; +$tooltip__border-color : $color-gray-light2 !default; +$tooltip__border-width : 1px !default; +$tooltip__border-radius : false !default; +$tooltip__color : $primary__color !default; +$tooltip__cursor : help !default; +$tooltip__font-size : false !default; +$tooltip__font-family : false !default; +$tooltip__font-weight : false !default; +$tooltip__line-height : 1.4 !default; +$tooltip__font-style : false !default; +$tooltip__margin : false !default; +$tooltip__padding : 12px 16px !default; +$tooltip__min-width : 210px !default; +$tooltip__max-width : 360px !default; +$tooltip__z-index : 100 !default; + +$tooltip-arrow__size : 5px !default; +$tooltip-arrow__offset : 10px !default; diff --git a/src/scss/boilerplate/magento-ui/variables/_typography.scss b/src/scss/boilerplate/magento-ui/variables/_typography.scss new file mode 100755 index 0000000..5aeccd7 --- /dev/null +++ b/src/scss/boilerplate/magento-ui/variables/_typography.scss @@ -0,0 +1,240 @@ +// +// Typography variables +// _____________________________________________ + +// +// Fonts +// --------------------------------------------- + +// Path +$icons__font-path : "../fonts/Blank-Theme-Icons/Blank-Theme-Icons" !default; + +// Names +$icons__font-name : 'icons-blank-theme' !default; // ToDo UI : we need to rename (it shouldn't use blank theme name) or move icon fonts to blank theme + +// Font families +$font-family-name__base : 'Open Sans' !default; +$font-family__sans-serif : 'Helvetica Neue', Helvetica, Arial, sans-serif !default; +$font-family__serif : Georgia, 'Times New Roman', Times, serif !default; +$font-family__monospace : Menlo, Monaco, Consolas, 'Courier New', monospace !default; + +$font-family__base : $font-family-name__base, $font-family__sans-serif !default; + +// Sizes +$root__font-size : 62.5% !default; // Defines ratio between root font size and base font size, 1rem = 10px +$font-size-ratio__base : 1.4 !default; // Defines ratio of the root font-size to the base font-size + +$font-size-unit : rem !default; // The unit to which most typography values will be converted by default +$font-size-unit-ratio : $root__font-size * 16 / 100 / 1% !default; // Ratio of the root font-size to the font-size unit +$font-size-unit-convert : true !default; // Controls whether font-size values are converted to the specified font-size unit + +$font-size__base : $font-size-unit-ratio * $font-size-ratio__base * 1px !default; // Base font size value in px +$font-size__xl : ceil(1.5 * $font-size__base) !default; // 21px +$font-size__l : ceil(1.25 * $font-size__base) !default; // 18px +$font-size__s : ceil(0.85 * $font-size__base) !default; // 12px +$font-size__xs : floor(0.75 * $font-size__base) !default; // 11px + +// Weights +$font-weight__light : 300 !default; +$font-weight__regular : 400 !default; +$font-weight__heavier : 500 !default; +$font-weight__semibold : 600 !default; +$font-weight__bold : 700 !default; + +// Styles +$font-style__base : normal !default; +$font-style__emphasis : italic !default; + +// Line heights +$line-height__base : 1.428571429 !default; +$line-height__computed : floor($font-size__base * $line-height__base) !default; +$line-height__xl : 1.7 !default; +$line-height__l : 1.5 !default; +$line-height__s : 1.33 !default; + +// Colors +$text__color : $primary__color !default; +$text__color__intense : $primary__color__darker !default; +$text__color__muted : $primary__color__lighter !default; + +// +// Indents +// --------------------------------------------- + +$indent__base : $line-height__computed !default; // 20px +$indent__xl : $indent__base * 2 !default; // 40px +$indent__l : $indent__base * 1.5 !default; // 30px +$indent__m : $indent__base * 1.25 !default; // 25px +$indent__s : $indent__base / 2 !default; // 10px +$indent__xs : $indent__base / 4 !default; // 5px + +// +// Borders +// --------------------------------------------- + +$border-color__base : darken($page__background-color, 18%) !default; +$border-width__base : 1px !default; + +// +// Links +// --------------------------------------------- + +$link__color : $color-blue1 !default; +$link__text-decoration : none !default; + +$link__visited__color : $link__color !default; +$link__visited__text-decoration : none !default; + +$link__hover__color : $color-blue2 !default; +$link__hover__text-decoration : underline !default; + +$link__active__color : $active__color !default; +$link__active__text-decoration : underline !default; + +// +// Focus +// --------------------------------------------- + +$focus__color : $color-sky-blue1 !default; +$focus__box-shadow : 0 0 3px 1px $focus__color !default; + +// +// Lists +// --------------------------------------------- + +$list__color__base : false !default; +$list__font-size__base : false !default; +$list__margin-top : 0 !default; +$list__margin-bottom : $indent__m !default; + +$list-item__margin-top : 0 !default; +$list-item__margin-bottom : $indent__s !default; + +$dl__margin-top : 0 !default; +$dl__margin-bottom : $indent__base !default; + +$dt__margin-top : 0 !default; +$dt__margin-bottom : $indent__xs !default; +$dt__font-weight : $font-weight__bold !default; + +$dd__margin-top : 0 !default; +$dd__margin-bottom : $indent__s !default; + +// +// Paragraphs +// --------------------------------------------- + +$p__margin-top : 0 !default; +$p__margin-bottom : $indent__s !default; + +// +// Headings +// --------------------------------------------- + +$heading__font-family__base : false !default; +$heading__font-weight__base : $font-weight__light !default; +$heading__line-height__base : 1.1 !default; +$heading__color__base : false !default; +$heading__font-style__base : false !default; +$heading__margin-top__base : $indent__base !default; +$heading__margin-bottom__base : $indent__base !default; + +$h1__font-size : ceil(($font-size__base * 1.85)) !default; // 26px +$h1__font-color : $heading__color__base !default; +$h1__font-family : $heading__font-family__base !default; +$h1__font-weight : $heading__font-weight__base !default; +$h1__font-style : $heading__font-style__base !default; +$h1__line-height : $heading__line-height__base !default; +$h1__margin-top : 0 !default; +$h1__margin-bottom : $heading__margin-bottom__base !default; +$h1__font-size-desktop : ceil(($font-size__base * 2.85)) !default; // 40px + +$h2__font-size : ceil(($font-size__base * 1.85)) !default; // 26px +$h2__font-color : $heading__color__base !default; +$h2__font-family : $heading__font-family__base !default; +$h2__font-weight : $heading__font-weight__base !default; +$h2__font-style : $heading__font-style__base !default; +$h2__line-height : $heading__line-height__base !default; +$h2__margin-top : $indent__m !default; +$h2__margin-bottom : $heading__margin-bottom__base !default; + +$h3__font-size : ceil(($font-size__base * 1.28)) !default; // 18px +$h3__font-color : $heading__color__base !default; +$h3__font-family : $heading__font-family__base !default; +$h3__font-weight : $heading__font-weight__base !default; +$h3__font-style : $heading__font-style__base !default; +$h3__line-height : $heading__line-height__base !default; +$h3__margin-top : $indent__base * 0.75 !default; +$h3__margin-bottom : $indent__s !default; + +$h4__font-size : $font-size__base !default; // 14px +$h4__font-color : $heading__color__base !default; +$h4__font-family : $heading__font-family__base !default; +$h4__font-weight : $font-weight__bold !default; +$h4__font-style : $heading__font-style__base !default; +$h4__line-height : $heading__line-height__base !default; +$h4__margin-top : $heading__margin-top__base !default; +$h4__margin-bottom : $heading__margin-bottom__base !default; + +$h5__font-size : ceil(($font-size__base * 0.85)) !default; // 12px +$h5__font-color : $heading__color__base !default; +$h5__font-family : $heading__font-family__base !default; +$h5__font-weight : $font-weight__bold !default; +$h5__font-style : $heading__font-style__base !default; +$h5__line-height : $heading__line-height__base !default; +$h5__margin-top : $heading__margin-top__base !default; +$h5__margin-bottom : $heading__margin-bottom__base !default; + +$h6__font-size : ceil(($font-size__base * 0.7)) !default; // 10px +$h6__font-color : $heading__color__base !default; +$h6__font-family : $heading__font-family__base !default; +$h6__font-weight : $font-weight__bold !default; +$h6__font-style : $heading__font-style__base !default; +$h6__line-height : $heading__line-height__base !default; +$h6__margin-top : $heading__margin-top__base !default; +$h6__margin-bottom : $heading__margin-bottom__base !default; + +$heading__small-color : $primary__color !default; +$heading__small-line-height : 1 !default; +$heading__small-size : ($font-size__xs / $font-size__base) * 100% !default; + +// Code blocks +$code__background-color : $panel__background-color !default; +$code__color : $primary__color__darker !default; +$code__font-size : $font-size__s !default; +$code__padding : 2px 4px !default; + +$pre__background-color : $panel__background-color !default; +$pre__border-color : $border-color__base !default; +$pre__border-width : $border-width__base !default; +$pre__color : $primary__color__darker !default; + +$kbd__background-color : $panel__background-color !default; +$kbd__color : $primary__color__darker !default; + +// Blockquote +$blockquote__border-color : $border-color__base !default; +$blockquote__border-width : 0 !default; +$blockquote__content-before : '\2014 \00A0' !default; +$blockquote__font-size : $font-size__base !default; +$blockquote__font-style : $font-style__emphasis !default; +$blockquote__margin : 0 0 $indent__base $indent__xl !default; +$blockquote__padding : 0 !default; + +$blockquote-small__color : $primary__color !default; +$blockquote-small__font-size : $font-size__xs !default; + +$cite__font-style : $font-style__base !default; + +// Misc +$hr__border-color : $border-color__base !default; +$hr__border-style : solid !default; +$hr__border-width : $border-width__base !default; + +$mark__color : $primary__color__dark !default; +$mark__background-color : $panel__background-color !default; + +$abbr__border-color : $border-color__base !default; + +// Disable filters output in css +$disable-filters : false !default;