diff --git a/src/assets/fabricator/styles/partials/_color-chips.scss b/src/assets/fabricator/styles/partials/_color-chips.scss index 06fff600..84d6291d 100644 --- a/src/assets/fabricator/styles/partials/_color-chips.scss +++ b/src/assets/fabricator/styles/partials/_color-chips.scss @@ -5,7 +5,7 @@ .f-color-chip { flex-grow: 1; - flex-shrink: 0; + flex-shrink: 1; flex-basis: 100%; border-top-width: 8em; border-top-style: solid; diff --git a/src/assets/fabricator/styles/partials/_layout.scss b/src/assets/fabricator/styles/partials/_layout.scss index 6a0cc4c8..de580516 100644 --- a/src/assets/fabricator/styles/partials/_layout.scss +++ b/src/assets/fabricator/styles/partials/_layout.scss @@ -29,6 +29,7 @@ body { .f-container { @include clearfix; @include border-box; + @include transition; position: relative; padding: 0 1em; z-index: 0; diff --git a/src/assets/fabricator/styles/partials/_menu.scss b/src/assets/fabricator/styles/partials/_menu.scss index 0109f0e2..71e90c63 100644 --- a/src/assets/fabricator/styles/partials/_menu.scss +++ b/src/assets/fabricator/styles/partials/_menu.scss @@ -1,6 +1,7 @@ // menu .f-menu { @include border-box; + @include transition; position: fixed; top: 0; left: 0; diff --git a/src/assets/fabricator/styles/partials/_variables.scss b/src/assets/fabricator/styles/partials/_variables.scss index 46238109..4eba4452 100644 --- a/src/assets/fabricator/styles/partials/_variables.scss +++ b/src/assets/fabricator/styles/partials/_variables.scss @@ -30,7 +30,7 @@ $menu-width: map-get($settings, menu-width); // functions @function color($color) { - @return map-get($colors, $color); + @return map-get($colors, $color); } @@ -50,3 +50,14 @@ $menu-width: map-get($settings, menu-width); @mixin border-box { box-sizing: border-box; } + +@mixin transition($transition...) { + @if length($transition) < 1 { + $transition: all 0.3s ease; + } + + -moz-transition: $transition; + -o-transition: $transition; + -webkit-transition: $transition; + transition: $transition; +}