Skip to content
This repository has been archived by the owner on Jan 16, 2025. It is now read-only.

Commit

Permalink
All blocks migrated from LESS to SASS
Browse files Browse the repository at this point in the history
  • Loading branch information
@Igloczek
Igloczek committed Oct 13, 2017
1 parent 1da05c0 commit a7a8f33
Show file tree
Hide file tree
Showing 16 changed files with 253 additions and 213 deletions.
3 changes: 0 additions & 3 deletions Magento_Theme/styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,5 @@ $header-icons-color-hover : $color-gray20 !default;
$addto-color : $text__color__muted !default;
$addto-hover-color : $primary__color !default;

$minicart-icons-color : $header-icons-color !default;
$minicart-icons-color-hover : $header-icons-color-hover !default;

// Footer
$footer__background-color : transparent !default;
7 changes: 7 additions & 0 deletions styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,3 +237,10 @@ $product-name-link__text-decoration__visited: $link__hover__text-decoration !def
// ---------------------------------------------

$button__shadow : inset 0 2px 1px rgba(0, 0, 0, 0.12) !default;

//
// Minicart
// ---------------------------------------------

$minicart-icons-color : $header-icons-color !default;
$minicart-icons-color-hover : $header-icons-color-hover !default;
4 changes: 2 additions & 2 deletions styles/blocks/_buttons.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
a.action.primary,
button {
border-radius: 3px;
@include lib-css(border-radius, $button__border-radius);
}
button {
&:active {
box-shadow: $button__shadow;
@include lib-css(box-shadow, $button__shadow);
}
}
a.action.primary {
Expand Down
26 changes: 14 additions & 12 deletions styles/blocks/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,14 @@
$form-field__vertical-indent__desktop: 29px;
$form-calendar-icon__color: $primary__color;

//
// Common
// _____________________________________________

.fieldset {
@include lib-form-fieldset();
&:last-child {
margin-bottom: 0;
}

& > .field,
& > .fields > .field {
> .field,
> .fields > .field {
@include lib-form-field();

&.no-label {
Expand Down Expand Up @@ -86,10 +82,15 @@ fieldset.field {
}
}

.field-error,
div.mage-error[generated] {
margin-top: 7px;
}

.field-error {
@include lib-form-validation-note();
}

.field .tooltip {
@include lib-tooltip(right);
.tooltip-content {
Expand All @@ -109,13 +110,14 @@ select {
~ .ui-datepicker-trigger {
@include lib-button-reset();
@include lib-icon-font(
$_icon-font-content : $icon-calendar,
$_icon-font-color : $primary__color__lighter,
$_icon-font-size : $icon-calendar__font-size,
$_icon-font-line-height: $icon-calendar__font-size,
$_icon-font-display : inline-block,
$_icon-font-text-hide : true
$_icon-font-content : $icon-calendar,
$_icon-font-color : $primary__color__lighter,
$_icon-font-size : $icon-calendar__font-size,
$_icon-font-line-height : $icon-calendar__font-size,
$_icon-font-display : block,
$_icon-font-text-hide : true
);
display: inline-block;
vertical-align: middle;

&:focus {
Expand Down
37 changes: 18 additions & 19 deletions styles/blocks/_layout.scss
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,30 @@
$layout-column-main__sidebar-offset: 2%;
$layout-column__additional-sidebar-offset: $layout-column-main__sidebar-offset;

//
// Common
// _____________________________________________
$layout-column-main__sidebar-offset : 2%;
$layout-column__additional-sidebar-offset : $layout-column-main__sidebar-offset;

.columns {
@include lib-layout-columns();

.column.main {
@extend .abs-add-box-sizing;
padding-bottom: $indent__xl;
flex-basis: 100%;
flex-grow: 1;
order: 1;
@include lib-css(padding-bottom, $indent__xl);
@include lib-vendor-prefix-flex-basis(100%);
@include lib-vendor-prefix-flex-grow(1);
@include lib-vendor-prefix-order(1);
width: 100%;
}

.sidebar-main {
@extend .abs-add-box-sizing;
flex-grow: 1;
flex-basis: 100%;
order: 1;
@include lib-vendor-prefix-flex-grow(1);
@include lib-vendor-prefix-flex-basis(100%);
@include lib-vendor-prefix-order(1);
}

.sidebar-additional {
@extend .abs-add-box-sizing;
flex-grow: 1;
flex-basis: 100%;
order: 2;
@include lib-vendor-prefix-flex-grow(1);
@include lib-vendor-prefix-flex-basis(100%);
@include lib-vendor-prefix-order(2);
}
}

Expand Down Expand Up @@ -85,9 +82,11 @@ $layout-column__additional-sidebar-offset: $layout-column-main__sidebar-offset;

.page-main {
width: 100%;
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;

@include lib-vendor-prefix-flex-grow(1);
@include lib-vendor-prefix-flex-shrink(0);
@include lib-vendor-prefix-flex-basis(auto);

.ie9 & {
width: auto;
}
Expand Down
8 changes: 4 additions & 4 deletions styles/blocks/_loaders.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
@include lib-loader();
position: absolute;

& > span {
> span {
display: none;
}
}
Expand All @@ -12,18 +12,18 @@
background: rgba(255, 255, 255, 0.5);

.loader {
& > img {
> img {
@include lib-loading-mask();
}

& > p {
> p {
display: none;
}
}
}

body {
& > .loading-mask {
> .loading-mask {
z-index: $loader-overlay__z-index;
}
}
Expand Down
54 changes: 25 additions & 29 deletions styles/blocks/_navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@

$active-nav-indent: 54px;

//
// Common
// _____________________________________________

.panel.header {
.links,
.switcher {
Expand All @@ -16,15 +12,15 @@ $active-nav-indent: 54px;
}

.nav-sections {
background: $navigation__background;
@include lib-css(background, $navigation__background);
}

.nav-toggle {
@include lib-icon-font(
$icon-menu,
$_icon-font-size : 28px,
$_icon-font-color : $header-icons-color,
$_icon-font-color-hover: $header-icons-color-hover
$_icon-font-size : 28px,
$_icon-font-color : $header-icons-color,
$_icon-font-color-hover : $header-icons-color-hover
);
@include lib-icon-text-hide();
cursor: pointer;
Expand All @@ -48,10 +44,10 @@ $active-nav-indent: 54px;
.level-top {
position: relative;
@include lib-icon-font(
$_icon-font-content : $icon-down,
$_icon-font-size : 42px,
$_icon-font-position: after,
$_icon-font-display : block
$_icon-font-content : $icon-down,
$_icon-font-size : 42px,
$_icon-font-position : after,
$_icon-font-display : block
);

&:after {
Expand All @@ -62,8 +58,8 @@ $active-nav-indent: 54px;

&.ui-state-active {
@include lib-icon-font-symbol(
$_icon-font-content : $icon-up,
$_icon-font-position: after
$_icon-font-content : $icon-up,
$_icon-font-position : after
);
}
}
Expand All @@ -72,7 +68,7 @@ $active-nav-indent: 54px;

.nav-sections {
-webkit-overflow-scrolling: touch;
transition: left 0.3s;
@include lib-css(transition, left 0.3s, 1);
height: 100%;
left: -80%;
left: calc(-1 * (100% - #{$active-nav-indent}));
Expand Down Expand Up @@ -103,10 +99,10 @@ $active-nav-indent: 54px;
strong {
position: relative;
@include lib-icon-font(
$_icon-font-content : $icon-down,
$_icon-font-size : 42px,
$_icon-font-position: after,
$_icon-font-display : block
$_icon-font-content : $icon-down,
$_icon-font-size : 42px,
$_icon-font-position : after,
$_icon-font-display : block
);

&:after {
Expand All @@ -118,8 +114,8 @@ $active-nav-indent: 54px;

&.active strong {
@include lib-icon-font-symbol(
$_icon-font-content : $icon-up,
$_icon-font-position: after
$_icon-font-content : $icon-up,
$_icon-font-position : after
);
}
}
Expand All @@ -143,15 +139,15 @@ $active-nav-indent: 54px;
padding: 0.8rem $indent__base;
}

& > a {
> a {
border-top: 1px solid $color-gray82;
}
}

a,
a:hover {
color: $navigation-level0-item__color;
text-decoration: $navigation-level0-item__text-decoration;
@include lib-css(color, $navigation-level0-item__color);
@include lib-css(text-decoration, $navigation-level0-item__text-decoration);
display: block;
font-weight: 700;
padding: 0.8rem $indent__base;
Expand All @@ -169,7 +165,7 @@ $active-nav-indent: 54px;
width: 100%;

.page-wrapper {
transition: left 0.3s;
@include lib-css(transition, left 0.3s, 1);
height: 100%;
left: 0;
overflow: hidden;
Expand All @@ -193,14 +189,14 @@ $active-nav-indent: 54px;
.nav-sections {
$_shadow: 0 0 5px 0 rgba(50, 50, 50, 0.75);

box-shadow: $_shadow;
@include lib-css(box-shadow, $_shadow, 1);
left: 0;
z-index: 99;
}

.nav-toggle {
&:after {
background: rgba(0, 0, 0, 0.7);
background: rgba(0, 0, 0, $overlay__opacity);
content: '';
display: block;
height: 100%;
Expand Down Expand Up @@ -270,8 +266,8 @@ $active-nav-indent: 54px;
}

.nav-sections {
flex-shrink: 0;
flex-basis: auto;
@include lib-vendor-prefix-flex-shrink(0);
@include lib-vendor-prefix-flex-basis(auto);
margin-bottom: $indent__m;
}

Expand Down
23 changes: 9 additions & 14 deletions styles/blocks/_popups.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,20 @@

$popup-marker__size: 7px;

//
// Common
// _____________________________________________


// Popup working with dropdown dialog
.ui-dialog {
&.popup {
.action {
&.close {
bottom: $popup-button-close__position-bottom;
left: $popup-button-close__position-left;
position: $popup-button-close__position;
@include lib-css(bottom, $popup-button-close__position-bottom);
@include lib-css(left, $popup-button-close__position-left);
@include lib-css(position, $popup-button-close__position);
height: 40px;
right: 0;
top: 0;
width: 40px;
z-index: 1001;
@include _lib-popup-button-close-icon(
@include lib-popup-button-close-icon(
$popup-button-close__icon,
$popup-icon-font__content,
$popup-icon-font,
Expand All @@ -46,11 +41,11 @@ $popup-marker__size: 7px;

.popup-pointer {
@include lib-pointer(
$_size : $popup-marker__size,
$_background-color : $popup__background,
$_border-color : $popup__border-color,
$_position__vertical__value : 2px,
$_position__horizontal__value: 2px
$_size : $popup-marker__size,
$_background-color : $popup__background,
$_border-color : $popup__border-color,
$_position__vertical__value : 2px,
$_position__horizontal__value : 2px
);
margin-left: -$popup-marker__size * 2;
position: absolute;
Expand Down
Loading

0 comments on commit a7a8f33

Please sign in to comment.