chore: comment useless scss

This commit is contained in:
07akioni 2020-09-08 14:05:07 +08:00
parent 8752d9e2de
commit 29ff5211ef
4 changed files with 310 additions and 310 deletions

View File

@ -1,23 +1,23 @@
@import './mixins/mixins.scss';
// @import './mixins/mixins.scss';
@include themes-mixin {
@include b(base-menu-mask) {
@include once {
@include fade-in-transition(base-menu-mask);
font-size: 14px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 14px;
overflow: hidden;
}
color: $--base-menu-mask-text-color;
background-color: $--base-menu-mask-background-color;
}
}
// @include themes-mixin {
// @include b(base-menu-mask) {
// @include once {
// @include fade-in-transition(base-menu-mask);
// font-size: 14px;
// position: absolute;
// left: 0;
// right: 0;
// top: 0;
// bottom: 0;
// display: flex;
// align-items: center;
// justify-content: center;
// text-align: center;
// padding: 14px;
// overflow: hidden;
// }
// color: $--base-menu-mask-text-color;
// background-color: $--base-menu-mask-background-color;
// }
// }

View File

@ -1,237 +1,237 @@
@import './mixins/mixins.scss';
// @import './mixins/mixins.scss';
@mixin tabs-size-mixin ($size) {
@include m($size + '-size') {
@include m(line-type) {
@include b(tabs-label) {
@include e(label) {
font-size: map-get($--n-tabs-tab-font-size, $size);
}
}
}
}
}
// @mixin tabs-size-mixin ($size) {
// @include m($size + '-size') {
// @include m(line-type) {
// @include b(tabs-label) {
// @include e(label) {
// font-size: map-get($--n-tabs-tab-font-size, $size);
// }
// }
// }
// }
// }
@include themes-mixin {
@include b(tabs) {
@include once {
@include tabs-size-mixin('small');
@include tabs-size-mixin('medium');
@include tabs-size-mixin('large');
@include tabs-size-mixin('huge');
width: 100%;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
@include m(flex) {
@include b(tabs-nav) {
@include b(tabs-nav-scroll) {
width: 100%;
@include b(tabs-label-wrapper) {
width: 100%;
@include b(tabs-label) {
margin-right: 0;
}
}
}
}
}
}
@include b(tabs-nav) {
@include once {
line-height: 1.75;
display: flex;
background-clip: padding-box;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
@include b(tabs-nav-scroll) {
overflow: hidden;
}
}
@include b(tabs-nav-scroll-button) {
@include once {
font-size: 20px;
height: 20px;
line-height: 20px;
align-self: center;
cursor: pointer;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include m(left) {
margin-right: 8px;
}
@include m(right) {
margin-left: 8px;
}
}
@include b(icon) {
fill: map-get($--tabs-tab-scroll-button-color, 'default');
}
@include m(disabled) {
@include once {
cursor: not-allowed;
}
@include b(icon) {
fill: map-get($--tabs-tab-scroll-button-color, 'disabled');
}
}
}
}
@include b(tabs-label-wrapper) {
@include once {
display: inline-block;
font-weight: $--n-strong-weight;
white-space: nowrap;
position: relative;
}
@include b(tabs-label-bar) {
@include once {
position: absolute;
bottom: 2px;
height: 2px;
border-radius: 1px;
transition: left .2s $--n-ease-in-out-cubic-bezier, max-width .2s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
}
background-color: $--tabs-tab-bar-background-color;
@include m(transition-disabled) {
transition: none;
}
}
@include b(tabs-label) {
@include once {
cursor: pointer;
white-space: nowrap;
flex-wrap: nowrap;
display: inline-flex;
align-items: center;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
@include m(disabled) {
cursor: not-allowed;
}
}
@include e(close) {
@include once {
margin-left: 8px;
font-size: 16px;
line-height: 16px;
height: 16px;
cursor: pointer;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
@include b(icon) {
fill: map-get($--tabs-tab-close-button-color, 'default');
}
}
@include e(label) {
@include once {
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: map-get($--tabs-tab-text-color, 'default');
}
}
}
@include b(tab-panel) {
@include once {
width: 100%;
margin-top: 8px;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
}
color: $--tabs-panel-text-color;
}
@include m(line-type) {
@include once {
@include b(tabs-nav) {
@include b(tabs-nav-scroll-button) {
padding-bottom: 4px;
}
}
}
@include b(tabs-label) {
@include once {
box-sizing: border-box;
padding-bottom: 2px;
vertical-align: bottom;
@include e(label) {
font-size: 14px;
}
&:not(:last-child) {
margin-right: 36px;
}
}
&:hover {
@include e(label) {
color: map-get($--tabs-tab-text-color, 'hover');
}
}
@include m(active) {
@include e(label) {
color: map-get($--tabs-tab-text-color, 'active');
}
}
@include m(disabled) {
@include e(label) {
color: map-get($--tabs-tab-text-color, 'disabled');
}
}
}
}
@include m(card-type) {
@include b(tabs-nav) {
@include once {
box-sizing: border-box;
padding-top: 4px;
padding-bottom: 4px;
@include b(tabs-nav-scroll-button) {
@include m(left) {
margin-left: 2px;
margin-right: 2px;
}
@include m(right) {
margin-left: 2px;
margin-right: 2px;
}
}
@include b(tabs-label-bar) {
bottom: 0;
border-radius: 0;
}
}
border-top: 1px solid $--tabs-nav-border-color;
border-bottom: 1px solid $--tabs-nav-border-color;
}
@include b(tabs-label) {
@include once {
margin-right: 4px;
box-sizing: border-box;
height: 34px;
line-height: 34px;
padding: 0 16px;
position: relative;
vertical-align: bottom;
border-radius: $--n-tabs-border-radius;
border: 1px solid transparent;
}
@include e(label) {
@include once {
font-size: 14px;
}
color: map-get($--tabs-card-tab-text-color, 'default')
}
&:hover {
background-color: $--tabs-card-tab-background-color;
}
@include m(active) {
background-color: $--tabs-card-tab-background-color;
border: 1px solid $--tabs-card-tab-border-color;
@include e(label) {
@include once {
font-size: 14px;
}
color: map-get($--tabs-card-tab-text-color, 'active')
}
}
@include m(disabled) {
@include e(label) {
color: map-get($--tabs-tab-text-color, 'disabled');
}
}
}
}
}
}
// @include themes-mixin {
// @include b(tabs) {
// @include once {
// @include tabs-size-mixin('small');
// @include tabs-size-mixin('medium');
// @include tabs-size-mixin('large');
// @include tabs-size-mixin('huge');
// width: 100%;
// transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
// @include m(flex) {
// @include b(tabs-nav) {
// @include b(tabs-nav-scroll) {
// width: 100%;
// @include b(tabs-label-wrapper) {
// width: 100%;
// @include b(tabs-label) {
// margin-right: 0;
// }
// }
// }
// }
// }
// }
// @include b(tabs-nav) {
// @include once {
// line-height: 1.75;
// display: flex;
// background-clip: padding-box;
// transition: border-color .3s $--n-ease-in-out-cubic-bezier;
// @include b(tabs-nav-scroll) {
// overflow: hidden;
// }
// }
// @include b(tabs-nav-scroll-button) {
// @include once {
// font-size: 20px;
// height: 20px;
// line-height: 20px;
// align-self: center;
// cursor: pointer;
// transition: color .3s $--n-ease-in-out-cubic-bezier;
// @include m(left) {
// margin-right: 8px;
// }
// @include m(right) {
// margin-left: 8px;
// }
// }
// @include b(icon) {
// fill: map-get($--tabs-tab-scroll-button-color, 'default');
// }
// @include m(disabled) {
// @include once {
// cursor: not-allowed;
// }
// @include b(icon) {
// fill: map-get($--tabs-tab-scroll-button-color, 'disabled');
// }
// }
// }
// }
// @include b(tabs-label-wrapper) {
// @include once {
// display: inline-block;
// font-weight: $--n-strong-weight;
// white-space: nowrap;
// position: relative;
// }
// @include b(tabs-label-bar) {
// @include once {
// position: absolute;
// bottom: 2px;
// height: 2px;
// border-radius: 1px;
// transition: left .2s $--n-ease-in-out-cubic-bezier, max-width .2s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
// }
// background-color: $--tabs-tab-bar-background-color;
// @include m(transition-disabled) {
// transition: none;
// }
// }
// @include b(tabs-label) {
// @include once {
// cursor: pointer;
// white-space: nowrap;
// flex-wrap: nowrap;
// display: inline-flex;
// align-items: center;
// transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
// @include m(disabled) {
// cursor: not-allowed;
// }
// }
// @include e(close) {
// @include once {
// margin-left: 8px;
// font-size: 16px;
// line-height: 16px;
// height: 16px;
// cursor: pointer;
// transition: color .3s $--n-ease-in-out-cubic-bezier;
// }
// @include b(icon) {
// fill: map-get($--tabs-tab-close-button-color, 'default');
// }
// }
// @include e(label) {
// @include once {
// transition: color .3s $--n-ease-in-out-cubic-bezier;
// }
// color: map-get($--tabs-tab-text-color, 'default');
// }
// }
// }
// @include b(tab-panel) {
// @include once {
// width: 100%;
// margin-top: 8px;
// transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
// }
// color: $--tabs-panel-text-color;
// }
// @include m(line-type) {
// @include once {
// @include b(tabs-nav) {
// @include b(tabs-nav-scroll-button) {
// padding-bottom: 4px;
// }
// }
// }
// @include b(tabs-label) {
// @include once {
// box-sizing: border-box;
// padding-bottom: 2px;
// vertical-align: bottom;
// @include e(label) {
// font-size: 14px;
// }
// &:not(:last-child) {
// margin-right: 36px;
// }
// }
// &:hover {
// @include e(label) {
// color: map-get($--tabs-tab-text-color, 'hover');
// }
// }
// @include m(active) {
// @include e(label) {
// color: map-get($--tabs-tab-text-color, 'active');
// }
// }
// @include m(disabled) {
// @include e(label) {
// color: map-get($--tabs-tab-text-color, 'disabled');
// }
// }
// }
// }
// @include m(card-type) {
// @include b(tabs-nav) {
// @include once {
// box-sizing: border-box;
// padding-top: 4px;
// padding-bottom: 4px;
// @include b(tabs-nav-scroll-button) {
// @include m(left) {
// margin-left: 2px;
// margin-right: 2px;
// }
// @include m(right) {
// margin-left: 2px;
// margin-right: 2px;
// }
// }
// @include b(tabs-label-bar) {
// bottom: 0;
// border-radius: 0;
// }
// }
// border-top: 1px solid $--tabs-nav-border-color;
// border-bottom: 1px solid $--tabs-nav-border-color;
// }
// @include b(tabs-label) {
// @include once {
// margin-right: 4px;
// box-sizing: border-box;
// height: 34px;
// line-height: 34px;
// padding: 0 16px;
// position: relative;
// vertical-align: bottom;
// border-radius: $--n-tabs-border-radius;
// border: 1px solid transparent;
// }
// @include e(label) {
// @include once {
// font-size: 14px;
// }
// color: map-get($--tabs-card-tab-text-color, 'default')
// }
// &:hover {
// background-color: $--tabs-card-tab-background-color;
// }
// @include m(active) {
// background-color: $--tabs-card-tab-background-color;
// border: 1px solid $--tabs-card-tab-border-color;
// @include e(label) {
// @include once {
// font-size: 14px;
// }
// color: map-get($--tabs-card-tab-text-color, 'active')
// }
// }
// @include m(disabled) {
// @include e(label) {
// color: map-get($--tabs-tab-text-color, 'disabled');
// }
// }
// }
// }
// }
// }

View File

@ -1,25 +1,25 @@
@import "./mixins/mixins.scss";
// @import "./mixins/mixins.scss";
@include themes-mixin {
.#{block(tooltip)} {
@include b(tooltip-content) {
@include once {
white-space: nowrap;
}
&.#{block(popover-content)} {
@include once {
padding: 8px 14px;
border-radius: $--n-tooltip-border-radius;
}
box-shadow: $--tooltip-box-shadow;
background-color: $--tooltip-background-color;
color: $--tooltip-text-color;
@include b(popover-arrow-wrapper) {
@include b(popover-arrow) {
background-color: $--tooltip-background-color;
}
}
}
}
}
}
// @include themes-mixin {
// .#{block(tooltip)} {
// @include b(tooltip-content) {
// @include once {
// white-space: nowrap;
// }
// &.#{block(popover-content)} {
// @include once {
// padding: 8px 14px;
// border-radius: $--n-tooltip-border-radius;
// }
// box-shadow: $--tooltip-box-shadow;
// background-color: $--tooltip-background-color;
// color: $--tooltip-text-color;
// @include b(popover-arrow-wrapper) {
// @include b(popover-arrow) {
// background-color: $--tooltip-background-color;
// }
// }
// }
// }
// }
// }

View File

@ -1,33 +1,33 @@
@import './themes/common.scss';
@import './themes/light/index.scss';
@import './mixins/mixins.scss';
// @import './themes/common.scss';
// @import './themes/light/index.scss';
// @import './mixins/mixins.scss';
body {
margin: 0;
font-size: 14px;
font-family: $--n-font-family;
}
// body {
// margin: 0;
// font-size: 14px;
// font-family: $--n-font-family;
// }
input {
font-family: $--n-font-family;
font-size: inherit;
}
// input {
// font-family: $--n-font-family;
// font-size: inherit;
// }
body > {
@include b(positioning-container) {
position: fixed;
}
}
// body > {
// @include b(positioning-container) {
// position: fixed;
// }
// }
@include b(positioning-container) {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
transform: translateZ(0);
@include b(positioning-content) {
pointer-events: all;
}
}
// @include b(positioning-container) {
// position: absolute;
// left: 0;
// right: 0;
// top: 0;
// bottom: 0;
// pointer-events: none;
// transform: translateZ(0);
// @include b(positioning-content) {
// pointer-events: all;
// }
// }