From caf34ed7c1a6b6f1658c386b329bcfaf6ef833c7 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Fri, 1 Feb 2019 12:04:13 +0900 Subject: [PATCH] chore(build): make dev Sass build faster We used Sass importer because our dev env had `carbon-addons-cloud` code with circular dependency back to this repository (`carbon-components`). However, we found that it caused significant slowdown of our Sass dev build to an unacceptable level for change-style-and-see workflow. This change puts a copy of such `carbon-addons-cloud` code in this repository (as a dev-env-specific code) so we no longer need Sass importer, which yields 5x `sass:dev` task performance. In future, we should migrate from that code to UI shell side nav. Refs #1502 and #1709. --- demo/scss/_interior-left-nav.scss | 379 ++++++++++++++++++++++++++++++ demo/scss/demo.scss | 2 +- gulpfile.js | 5 - 3 files changed, 380 insertions(+), 6 deletions(-) create mode 100644 demo/scss/_interior-left-nav.scss diff --git a/demo/scss/_interior-left-nav.scss b/demo/scss/_interior-left-nav.scss new file mode 100644 index 000000000000..0311549b8d6d --- /dev/null +++ b/demo/scss/_interior-left-nav.scss @@ -0,0 +1,379 @@ +// +// Copyright IBM Corp. 2016, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +//----------------------------- +// Interior Left Nav +//----------------------------- + +@import '../../src/globals/scss/vars'; +@import '../../src/globals/scss/helper-mixins'; +@import '../../src/globals/scss/functions'; +@import '../../src/globals/scss/layer'; +@import '../../src/globals/scss/import-once'; +@import '../../src/globals/scss/css--reset'; +@import '../../src/globals/scss/css--typography'; + +@mixin interior-left-nav { + .#{$prefix}--interior-left-nav { + @include reset; + @include font-family; + width: rem(250px); + position: fixed; + top: rem(90px); + height: 100%; + background-color: $color__white; + border-right: 1px solid $color__gray-1; + + &--v6 { + top: rem(50px); + } + + .left-nav-list { + list-style: none; + display: flex; + flex-direction: column; + background-color: $color__white; + padding-top: 1.5rem; + overflow: auto; + + &__item { + cursor: pointer; + width: 100%; + padding: 0; + + &:focus { + outline: 1px solid transparent; + + &:not(.left-nav-list__item--has-children) { + background-color: $color__gray-2; + } + + .left-nav-list__item-link { + color: $color__blue-51; + text-decoration: underline; + } + + .left-nav-list--nested .left-nav-list__item-link { + color: $color__blue-90; + text-decoration: none; + } + } + + &--active { + & > .left-nav-list__item-link { + background-color: $color__gray-2; + color: $color__blue-51; + font-weight: 600; + } + } + + &-link { + @include typescale('zeta'); + color: $color__blue-90; + font-weight: 400; + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + text-decoration: none; + transition: background-color $transition--base; + padding: 0.75rem 1.5rem 0.75rem rem(59px); + } + + &-icon { + display: flex; + + .#{$prefix}--interior-left-nav__icon { + fill: $color__blue-51; + width: rem(8px); + height: rem(8px); + transition: $transition--base; + } + } + + &--expanded { + .left-nav-list--nested { + max-height: 20rem; + transition: $transition--expansion $carbon--ease-in; + overflow: inherit; + opacity: 1; + + .left-nav-list__item { + opacity: 1; + } + } + + & > .left-nav-list__item-link { + color: $color__blue-51; + } + + .left-nav-list__item-icon .#{$prefix}--interior-left-nav__icon { + transform: rotate(180deg); + } + } + + &:not(.left-nav-list__item--has-children):hover { + & > .left-nav-list__item-link { + background-color: $color__gray-2; + color: $color__blue-51; + } + } + } + + &__item--has-children { + .left-nav-list__item-link { + padding-right: 1.5rem; + } + + &:hover { + > .left-nav-list__item-link { + color: $color__blue-51; + } + } + } + } + + .left-nav-list--nested { + max-height: 0; + overflow: hidden; + transition: $transition--expansion $carbon--ease-out; + padding: 0; + opacity: 0; + + .left-nav-list__item { + width: 100%; + position: relative; + padding: 0; + transition: $transition--base; + opacity: 0; + + &-link { + @include typescale('zeta'); + color: $color__blue-90; + padding: 0.75rem 1.35rem 0.75rem 4.5rem; + font-weight: 400; + display: flex; + align-items: center; + justify-content: space-between; + + &:focus { + outline: 1px solid transparent; + background-color: $color__gray-2; + color: $color__blue-51; + text-decoration: underline; + } + } + + &:hover { + outline: none; + } + + &--active { + color: $color__blue-51; + background-color: $color__gray-2; + + & > .left-nav-list__item-link { + font-weight: 600; + color: $color__blue-51; + } + } + } + } + } + + .#{$prefix}--interior-left-nav--collapseable { + overflow: hidden; + display: flex; + flex-direction: column; + width: rem(200px); + padding-top: rem(20px); + transition: background-color 300ms $carbon--standard-easing, width 300ms $carbon--standard-easing; + + ul, + li, + hr, + .#{$prefix}--interior-left-nav-collapse__target { + opacity: 1; + } + + .left-nav-list, + .left-nav-list__item-link { + background-color: inherit; + } + + .left-nav-list__item--expanded > .left-nav-list { + padding-top: rem(6px); + padding-bottom: rem(6px); + } + + .left-nav-list__item--expanded > .left-nav-list__item-link { + color: $color__blue-90; + } + + .left-nav-line { + margin: rem(24px) rem(20px); + border: 1px solid $color__gray-1; + } + + .left-nav-list { + padding-top: 0; + + @include light-ui { + background-color: inherit; + } + } + + .left-nav-list__item--active > .left-nav-list__item-link { + position: relative; + background-color: transparent; + + &:before { + top: 0; + position: absolute; + background-color: $color__blue-51; + height: 100%; + left: 0; + width: 4px; + content: ''; + } + } + + .left-nav-list__item { + margin-bottom: rem(5px); + } + + .left-nav-list__item-link, + .left-nav-list--nested .left-nav-list__item-link { + padding: rem(9px) rem(20px); + } + + .left-nav-list--nested .left-nav-list__item-link { + @include typescale('omega'); + padding-left: rem(40px); + } + + .#{$prefix}--interior-left-nav-collapse { + cursor: pointer; + background-color: rgba($color__blue-51, 0.1); + display: flex; + justify-content: flex-end; + align-items: center; + margin-top: auto; + margin-bottom: rem(90px); + padding: rem(14px) rem(16px); + + &--v6 { + margin-bottom: rem(50px); + } + + &:hover, + &:focus { + background-color: rgba($color__blue-51, 0.3); + } + } + + .#{$prefix}--interior-left-nav-collapse__target { + margin-left: rem(10px); + margin-right: rem(10px); + } + + .#{$prefix}--interior-left-nav-collapse__link { + @include typescale('zeta'); + display: flex; + align-items: center; + text-decoration: none; + padding: 0.25rem; + + &:focus { + @include focus-outline('border'); + } + } + + .#{$prefix}--interior-left-nav-collapse__arrow { + transform: rotate(0); + fill: $color__blue-51; + height: 12px; + width: 12px; + } + } + + .#{$prefix}--interior-left-nav--collapsing, + .#{$prefix}--interior-left-nav--collapsed { + width: rem(48px); + transition: background-color 300ms $carbon--standard-easing, width 300ms $carbon--standard-easing; + cursor: pointer; + background-color: rgba($color__blue-51, 0.1); + + &:hover, + &:focus { + background-color: rgba($color__blue-51, 0.3); + } + + ul, + li, + hr, + .#{$prefix}--interior-left-nav-collapse__target { + opacity: 0; + transition: opacity 300ms $carbon--standard-easing; + overflow: hidden; + white-space: nowrap; + } + + .#{$prefix}--interior-left-nav-collapse { + background-color: transparent; + + &:hover { + background-color: transparent; + } + } + + .#{$prefix}--interior-left-nav-collapse__arrow { + transform: rotate(180deg); + transition: transform 300ms $carbon--standard-easing; + } + } + + .#{$prefix}--interior-left-nav--collapsed { + ul, + li, + hr, + .#{$prefix}--interior-left-nav-collapse__target { + display: none; + } + + .#{$prefix}--interior-left-nav-collapse { + justify-content: center; + padding-left: 0; + padding-right: 0; + } + } + + .#{$prefix}--interior-left-nav--expanding { + width: rem(200px); + transition: width 300ms $carbon--standard-easing; + background-color: #fff; + + ul, + li, + hr, + .#{$prefix}--interior-left-nav-collapse__target { + opacity: 1; + transition: opacity $transition--expansion $carbon--standard-easing; + overflow: hidden; + white-space: nowrap; + } + + .#{$prefix}--interior-left-nav-collapse__arrow { + transform: rotate(0deg); + transition: transform 300ms $carbon--standard-easing; + } + } +} + +@include exports('interior-left-nav') { + @include interior-left-nav; +} diff --git a/demo/scss/demo.scss b/demo/scss/demo.scss index 282cb5948581..98583313afc6 100644 --- a/demo/scss/demo.scss +++ b/demo/scss/demo.scss @@ -1,5 +1,5 @@ // Used for sidebar in dev environment -@import 'carbon-addons-cloud/scss/components/InteriorLeftNav/interior-left-nav'; +@import 'interior-left-nav'; @import '../../src/globals/scss/styles'; @import '../../src/globals/scss/functions'; @import './_vars.scss'; diff --git a/gulpfile.js b/gulpfile.js index bffe6bd84867..f26f547885c9 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -353,11 +353,6 @@ gulp.task('sass:dev', () => .pipe( sass({ includePaths: ['node_modules'], - importer: (url, prev, done) => { - done({ - file: url.replace(/^carbon-components\/scss\//, `${path.resolve(__dirname, 'src')}/`), - }); - }, outputStyle: 'expanded', }).on('error', sass.logError) )