diff --git a/demo/deployment-index.js b/demo/deployment-index.js index f18308466..b09e2c1c6 100644 --- a/demo/deployment-index.js +++ b/demo/deployment-index.js @@ -2,8 +2,6 @@ import { Vue, i18n } from './init' import hljs from './hljs' import demoRouterView from './DemoRouterView' import naive from '../lib/index' -import '../lib/styles/index.css' -// import './styles/test-customize-style-scheme.scss' // test import './font' import createRouter from './routes/router' import { routes } from './routes/routes' diff --git a/demo/dev-design-index.js b/demo/dev-design-index.js index 1066d2ca0..15659b07c 100644 --- a/demo/dev-design-index.js +++ b/demo/dev-design-index.js @@ -4,7 +4,6 @@ import debugRouteMixin from './routes/debug-route-mixin' import hljs from './hljs' import demoRouterView from './DemoRouterView' import naive from '../src/index' -import '../src/_styles/index.scss' import './font' import { routes, childRoutes } from './routes/routes' import createRouter from './routes/router' diff --git a/demo/dev-index.js b/demo/dev-index.js index e036720c4..3d6f955a3 100644 --- a/demo/dev-index.js +++ b/demo/dev-index.js @@ -5,7 +5,6 @@ import debugRouteMixin from './routes/debug-route-mixin' import hljs from './hljs' import DemoRouterView from './DemoRouterView' import naive from '../src/index' -import '../src/_styles/index.scss' import './font' import { routes, childRoutes } from './routes/routes' import createDemoRouter from './routes/router' diff --git a/jest.config.js b/jest.config.js index 81a7cf424..79247a61c 100644 --- a/jest.config.js +++ b/jest.config.js @@ -28,8 +28,7 @@ module.exports = { // An array of regexp pattern strings used to skip coverage collection coveragePathIgnorePatterns: [ - '/node_modules/', - '/src/_jest-mock/' + '/node_modules/' // '/src/**/__tests__/**/*.[jt]s', // '/src/**/*.(spec|test).[tj]s' ], @@ -77,11 +76,7 @@ module.exports = { ], // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module - moduleNameMapper: { - '_styles-in-js/lightStyleScheme.scss': '/src/_jest-mock/light-style-scheme.js', - '_styles-in-js/darkStyleScheme.scss': '/src/_jest-mock/dark-style-scheme.js', - 'common.scss': '/src/_jest-mock/common.js' - }, + // moduleNameMapper: {}, // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader // modulePathIgnorePatterns: [], diff --git a/src/_jest-mock/common.js b/src/_jest-mock/common.js deleted file mode 100644 index d40ec20ed..000000000 --- a/src/_jest-mock/common.js +++ /dev/null @@ -1,7 +0,0 @@ -export default { - tinySize: '22', - smallSize: '28', - mediumSize: '34', - largeSize: '40', - hugeSize: '46' -} diff --git a/src/_jest-mock/dark-style-scheme.js b/src/_jest-mock/dark-style-scheme.js deleted file mode 100644 index 0ab9327e6..000000000 --- a/src/_jest-mock/dark-style-scheme.js +++ /dev/null @@ -1,5 +0,0 @@ -export default new Proxy({}, { - get () { - return 'rgb(0, 0, 0)' - } -}) diff --git a/src/_jest-mock/light-style-scheme.js b/src/_jest-mock/light-style-scheme.js deleted file mode 100644 index 0ab9327e6..000000000 --- a/src/_jest-mock/light-style-scheme.js +++ /dev/null @@ -1,5 +0,0 @@ -export default new Proxy({}, { - get () { - return 'rgb(0, 0, 0)' - } -}) diff --git a/src/_styles/Affix.scss b/src/_styles/Affix.scss deleted file mode 100644 index 354c8b119..000000000 --- a/src/_styles/Affix.scss +++ /dev/null @@ -1,10 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include b(affix) { -// @include m(affixed) { -// position: fixed; -// @include m(absolute-positioned) { -// position: absolute; -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Anchor.scss b/src/_styles/Anchor.scss deleted file mode 100644 index 9b8cf4571..000000000 --- a/src/_styles/Anchor.scss +++ /dev/null @@ -1,93 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(anchor) { -// @include once { -// padding-left: 4px; -// position: relative; -// } -// @include b(anchor-link-background) { -// @include once { -// position: absolute; -// left: 2px; -// width: 100%; -// max-width: 0; -// transition: top .15s $--n-ease-in-out-cubic-bezier, max-width .15s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier; -// border-top-right-radius: 10.5px; -// border-bottom-right-radius: 10.5px; -// } -// background-color: $--anchor-link-background-color; -// } -// @include b(anchor-rail) { -// @include once { -// position: absolute; -// left: 0; -// top: 0; -// bottom: 0; -// width: 4px; -// border-radius: 2px; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// overflow: hidden; -// } -// background-color: $--anchor-rail-background-color; -// @include e(bar) { -// @include once { -// position: absolute; -// left: 0; -// transition: top .15s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier; -// width: 4px; -// height: 21px; -// background-color: transparent; -// } -// @include m(active) { -// background-color: $--n-primary-color; -// } -// } -// @include once { -// & + { -// @include b(anchor-link) { -// margin-top: 0; -// } -// } -// } -// } -// @include b(anchor-link) { -// @include once { -// margin-top: .5em; -// padding-left: 16px; -// position: relative; -// line-height: 1.5em; -// font-size: 13px; -// min-height: 1.5em; -// display: flex; -// flex-direction: column; -// & > { -// @include b(anchor-link) { -// padding-left: 16px; -// } -// } -// } -// @include e(title) { -// @include once { -// outline: none; -// max-width: 100%; -// text-decoration: none; -// white-space: nowrap; -// text-overflow: ellipsis; -// overflow: hidden; -// cursor: pointer; -// display: inline-block; -// padding-right: 16px; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// } -// color: map-get($--anchor-link-title-text-color, 'default'); -// &:hover, &:focus { -// color: map-get($--anchor-link-title-text-color, 'hover'); -// } -// @include m(active) { -// color: map-get($--anchor-link-title-text-color, 'active'); -// } -// } -// } -// } -// } diff --git a/src/_styles/AutoComplete.scss b/src/_styles/AutoComplete.scss deleted file mode 100644 index 663fe89a6..000000000 --- a/src/_styles/AutoComplete.scss +++ /dev/null @@ -1,5 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include b(auto-complete-menu) { -// @include fade-in-scale-up-transition(auto-complete-menu, $original-transition: (background-color .3s $--n-ease-in-out-cubic-bezier)); -// } \ No newline at end of file diff --git a/src/_styles/Avatar.scss b/src/_styles/Avatar.scss deleted file mode 100644 index 026f38e9c..000000000 --- a/src/_styles/Avatar.scss +++ /dev/null @@ -1,53 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @mixin avatar-size-mixin($size) { -// @include m($size + '-size') { -// $width: map-get($--n-height, $size); -// width: $width; -// height: $width; -// @include m(circle-shaped, round-shaped) { -// border-radius: $width / 2; -// } -// @include e(text) { -// line-height: 1.25; -// } -// @include b(icon) { -// font-size: $width; -// } -// } -// } - -// @include themes-mixin { -// @include b(avatar) { -// @include once { -// @include avatar-size-mixin('small'); -// @include avatar-size-mixin('medium'); -// @include avatar-size-mixin('large'); -// @include b(icon) { -// fill: #FFF; -// stroke: #FFF; -// vertical-align: bottom; -// } -// color: #FFF; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier; -// font-size: 14px; -// display: inline-block; -// position: relative; -// border-radius: $--n-avatar-border-radius; -// overflow: hidden; -// text-align: center; -// img { -// width: 100%; -// height: 100%; -// } -// @include e(text) { -// white-space: nowrap; -// display: inline-block; -// position: absolute; -// left: 50%; -// top: 50%; -// } -// } -// background-color: $--avatar-background-color; -// } -// } diff --git a/src/_styles/BackTop.scss b/src/_styles/BackTop.scss deleted file mode 100644 index 4a3957aa0..000000000 --- a/src/_styles/BackTop.scss +++ /dev/null @@ -1,39 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(back-top) { -// @include once { -// @include fade-in-scale-up-transition(back-top); -// position: fixed; -// right: 40px; -// bottom: 40px; -// min-width: 40px; -// height: 40px; -// cursor: pointer; -// @include m(transition-disabled) { -// transition: none !important; -// } -// } -// @include e(default-button) { -// @include once { -// transition: box-shadow .3s $--n-ease-in-out-cubic-bezier, fill .3s $--n-ease-in-out-cubic-bezier; -// border-radius: 20px; -// height: 40px; -// width: 40px; -// svg { -// pointer-events: none; -// } -// } -// fill: map-get($--back-top-button-fill, 'default'); -// box-shadow: map-get($--back-top-box-shadow, 'default'); -// &:hover { -// box-shadow: map-get($--back-top-box-shadow, 'hover'); -// fill: map-get($--back-top-button-fill, 'hover'); -// } -// &:active { -// box-shadow: map-get($--back-top-box-shadow, 'active'); -// fill: map-get($--back-top-button-fill, 'active'); -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/BaseLoading.scss b/src/_styles/BaseLoading.scss deleted file mode 100644 index eaa86e15e..000000000 --- a/src/_styles/BaseLoading.scss +++ /dev/null @@ -1,51 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @keyframes n-base-loading-rotate { -// 0% { -// transform: rotate(0deg); -// } -// 100% { -// transform: rotate(270deg); -// } -// } - -// @keyframes n-base-loading-dash { -// 0% { -// stroke-dashoffset: $--n-base-loading-stroke-dashoffset; -// } -// 50% { -// stroke-dashoffset: $--n-base-loading-stroke-dashoffset / 4; -// transform: rotate(135deg); -// } -// 100% { -// stroke-dashoffset: $--n-base-loading-stroke-dashoffset; -// transform: rotate(450deg); -// } -// } - -// @include themes-mixin { -// @include b(base-loading) { -// @include once { -// line-height: 1; -// } -// stroke: $--base-loading-stroke; -// transition: stroke .3s $--n-ease-in-out-cubic-bezier; -// @include b(base-loading-circular) { -// @include once { -// height: 100%; -// width: 100%; -// animation: n-base-loading-rotate 1.5s linear infinite; -// transform-origin: center; -// } -// @include b(base-loading-circular-path) { -// @include once { -// transform-origin: center; -// animation: n-base-loading-dash 1.5s ease-in-out infinite; -// stroke-dasharray: $--n-base-loading-stroke-dashoffset; -// stroke-dashoffset: 0; -// stroke-linecap: round; -// } -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/BaseMenuMask.scss b/src/_styles/BaseMenuMask.scss deleted file mode 100644 index 122b576a7..000000000 --- a/src/_styles/BaseMenuMask.scss +++ /dev/null @@ -1,23 +0,0 @@ -// @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; -// } -// } \ No newline at end of file diff --git a/src/_styles/BaseSelectMenu.scss b/src/_styles/BaseSelectMenu.scss deleted file mode 100644 index 0fca42631..000000000 --- a/src/_styles/BaseSelectMenu.scss +++ /dev/null @@ -1,160 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @mixin base-select-size-mixin ($size) { -// @include m($size + '-size') { -// @include b(virtual-scroller) { -// height: 100%; -// max-height: map-get($--n-height, $size) * 7.6; -// scrollbar-width: none; -// -moz-scrollbar-width: none; -// &::-webkit-scrollbar { -// width: 0; -// height: 0; -// } -// } -// @include b(scrollbar-container) { -// max-height: map-get($--n-height, $size) * 7.6; -// } -// @include b(base-select-option) { -// height: map-get($--n-height, $size); -// line-height: map-get($--n-height, $size); -// font-size: map-get($--n-font-size, $size); -// } -// @include b(base-select-group-header) { -// height: map-get($--n-height, $size); -// line-height: map-get($--n-height, $size); -// font-size: map-get($--n-font-size, $size) - 2px; -// } -// } -// } - -// @include themes-mixin { -// @include b(base-select-menu) { -// // @include base-select-size-mixin("small"); -// // @include base-select-size-mixin("medium"); -// // @include base-select-size-mixin("large"); -// // @include base-select-size-mixin("huge"); -// // @include once { - -// // outline: none; -// // margin-top: 4px; -// // margin-bottom: 4px; -// // z-index: 0; -// // position: relative; -// // border-radius: $--n-base-select-menu-border-radius; -// // transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// // overflow: hidden; -// // @include b(base-select-menu-option-wrapper) { -// // position: relative; -// // width: 100%; -// // } -// // @include e(action) { -// // padding: 8px 14px; -// // font-size: 14px; -// // } -// // } -// // background-color: $--base-select-menu-background-color; -// // box-shadow: $--base-select-menu-box-shadow; -// // @include b(base-select-group-header) { -// // @include once { -// // cursor: default; -// // padding: 0 14px; -// // } -// // color: map-get($--base-select-menu-group-header-text-color, 'default'); -// // } -// // @include b(base-select-option) { -// // @include once { -// // cursor: pointer; -// // position: relative; -// // padding: 0 14px; -// // white-space: nowrap; -// // transition: color .3s $--n-ease-in-out-cubic-bezier; -// // text-overflow: ellipsis; -// // overflow: hidden; -// // box-sizing: border-box; -// // @include m(grouped) { -// // padding: 0 21px; -// // } -// // } -// // color: map-get($--base-select-menu-option-color, "default"); -// // @include m(selected) { -// // color: map-get($--base-select-menu-option-color, "selected"); -// // } -// // @include m(disabled) { -// // color: map-get($--base-select-menu-option-color, "disabled"); -// // @include once { -// // &::after { -// // display: none; -// // } -// // } -// // @include m(selected) { -// // color: map-get($--base-select-menu-option-color, "disabled-selected"); -// // &::after { -// // border-right: 1px solid map-get($--base-select-menu-option-color, "disabled-selected"); -// // border-bottom: 1px solid map-get($--base-select-menu-option-color, "disabled-selected"); -// // @include once { -// // display: block; -// // } -// // } -// // } -// // @include once { -// // cursor: not-allowed; -// // } -// // } -// // } -// // @include e(action) { -// // @include once { -// // transition: -// // color .3s $--n-ease-in-out-cubic-bezier, -// // border-color .3s $--n-ease-in-out-cubic-bezier; -// // } -// // border-top: 1px solid $--base-select-menu-action-divider-color; -// // color: $--base-select-menu-action-text-color; -// // } -// // @include m(no-tracking-rect) { -// // @include b(base-select-option) { -// // @include not-m(disabled) { -// // &:hover { -// // color: map-get($--base-select-menu-option-color, "selected"); -// // } -// // } -// // } -// // } -// // @include m(multiple) { -// // @include b(base-select-option) { -// // @include once { -// // position: relative; -// // transition: color .3s $--n-ease-in-out-cubic-bezier; -// // padding-right: 28px; -// // @include m(selected) { -// // background: none; -// // &::after { -// // opacity: 1; -// // transform: rotate(45deg) scale(1); -// // } -// // } -// // } -// // &::after { -// // @include once { -// // content: ''; -// // height: 6px; -// // width: 3px; -// // position: absolute; -// // right: 14px; -// // transform: rotate(45deg) scale(.5); -// // top: calc(50% - 4px); -// // opacity: 0; -// // transition: -// // transform .3s $--n-ease-in-out-cubic-bezier, -// // opacity .3s $--n-ease-in-out-cubic-bezier; -// // } -// // border-right: 1px solid $--base-select-menu-option-check-mark-color; -// // border-bottom: 1px solid $--base-select-menu-option-check-mark-color; -// // } -// // &:active { -// // color: map-get($--base-select-menu-option-color, "active"); -// // } -// // } -// // } -// } -// } diff --git a/src/_styles/BaseTrackingRect.scss b/src/_styles/BaseTrackingRect.scss deleted file mode 100644 index 8dbedd37a..000000000 --- a/src/_styles/BaseTrackingRect.scss +++ /dev/null @@ -1,38 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(base-tracking-rect) { -// @include once { -// position: absolute; -// left: 0; -// right: 0; -// height: 0; -// } -// @include e(body) { -// @include once { -// position: absolute; -// right: 0; -// left: 0; -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// top .3s $--n-ease-in-out-cubic-bezier!important; -// &.#{block()}-transition-enter, &.#{block()}-transition-leave-to { -// opacity: 0; -// } -// &.#{block()}-transition-enter-active { -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// opacity .15s $--n-ease-out-cubic-bezier, -// top .3s $--n-ease-in-out-cubic-bezier!important; -// } -// &.#{block()}-transition-leave-active { -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// opacity .15s $--n-ease-in-cubic-bezier, -// top .3s $--n-ease-in-out-cubic-bezier!important; -// } -// } -// background-color: $--base-tracking-rect-background-color; -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Breadcrumb.scss b/src/_styles/Breadcrumb.scss deleted file mode 100644 index cb08a179a..000000000 --- a/src/_styles/Breadcrumb.scss +++ /dev/null @@ -1,62 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(breadcrumb) { -// @include once { -// white-space: nowrap; -// } -// @include b(breadcrumb-item) { -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// @include b(icon) { -// font-size: 16px; -// vertical-align: -.2em; -// } -// } -// @include b(icon) { -// fill: map-get($--breadcrumb-link-text-color, 'default'); -// stroke: map-get($--breadcrumb-link-text-color, 'default'); -// } -// @include e(link) { -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// cursor: pointer; -// } -// color: map-get($--breadcrumb-link-text-color, 'default'); -// } -// @include e(separator) { -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// margin: 0 4px; -// } -// color: map-get($--breadcrumb-separator-text-color, 'default'); -// } -// &:hover { -// @include b(icon) { -// fill: map-get($--breadcrumb-link-text-color, 'hover'); -// stroke: map-get($--breadcrumb-link-text-color, 'hover'); -// } -// @include e(link) { -// color: map-get($--breadcrumb-link-text-color, 'hover'); -// } -// } -// &:last-child { -// @include e(link) { -// @include once { -// cursor: unset; -// } -// color: map-get($--breadcrumb-link-text-color, 'active'); -// } -// @include b(icon) { -// fill: map-get($--breadcrumb-link-text-color, 'active'); -// stroke: map-get($--breadcrumb-link-text-color, 'active'); -// } -// @include once { -// @include e(separator) { -// display: none; -// } -// } -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Card.scss b/src/_styles/Card.scss deleted file mode 100644 index aff73fa27..000000000 --- a/src/_styles/Card.scss +++ /dev/null @@ -1,191 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @mixin card-size-mixin ($size) { -// @include m($size + '-size') { -// @include m(content-segmented) { -// & > { -// @include e(content) { -// padding-top: map-get($--n-card-margin-bottom, $size); -// } -// } -// } -// @include m(content-soft-segmented) { -// & > { -// @include e(content) { -// margin: 0 map-get($--n-card-margin-left, $size); -// padding: map-get($--n-card-margin-bottom, $size) 0; -// } -// } -// } -// @include m(footer-segmented) { -// & > { -// @include e(footer) { -// padding-top: map-get($--n-card-margin-bottom, $size); -// } -// } -// } -// @include m(footer-soft-segmented) { -// & > { -// @include e(footer) { -// padding: map-get($--n-card-margin-bottom, $size) 0; -// margin: 0 map-get($--n-card-margin-left, $size); -// } -// } -// } -// & > { -// @include b(card-header) { -// padding: -// map-get($--n-card-margin-top, $size) -// map-get($--n-card-margin-left, $size) -// map-get($--n-card-margin-bottom, $size) -// map-get($--n-card-margin-left, $size); -// @include e(main) { -// font-size: map-get($--n-card-font-size, $size); -// } -// @include e(extra) { -// font-size: 14px; -// } -// } -// @include e(content, footer) { -// &:first-child { -// padding-top: map-get($--n-card-margin-bottom, $size); -// } -// padding: 0 map-get($--n-card-margin-left, $size) map-get($--n-card-margin-bottom, $size) map-get($--n-card-margin-left, $size) ; -// font-size: 14px; -// } -// @include e(action) { -// background-color: $--card-action-background-color; -// padding: map-get($--n-card-margin-bottom, $size) map-get($--n-card-margin-left, $size); -// font-size: 14px; -// } -// } -// } -// } - -// @include themes-mixin { -// @include b(card) { -// @include once { -// display: block; -// width: 100%; -// box-sizing: border-box; -// position: relative; -// transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier; -// border-radius: $--n-card-border-radius; -// @include card-size-mixin('small'); -// @include card-size-mixin('medium'); -// @include card-size-mixin('large'); -// @include card-size-mixin('huge'); -// @include b(card-cover) { -// $border-radius: $--n-card-border-radius - 1px; -// overflow: hidden; -// border-radius: $border-radius $border-radius 0 0; -// width: 100%; -// img { -// display: block; -// width: 100%; -// } -// } -// } -// background-color: $--card-background-color; -// color: $--card-text-color; -// @include m(bordered) { -// border: 1px solid $--card-border-color; -// } -// @include m(action-segmented) { -// & > { -// @include e(action) { -// &:not(:first-child) { -// border-top: 1px solid $--card-border-color; -// } -// } -// } -// } -// @include m(content-segmented, content-soft-segmented) { -// & > { -// @include e(content) { -// @include once { -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// } -// &:not(:first-child) { -// border-top: 1px solid $--card-border-color; -// } -// } -// } -// } -// @include m(footer-segmented, footer-soft-segmented) { -// & > { -// @include e(footer) { -// @include once { -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// } -// &:not(:first-child) { -// border-top: 1px solid $--card-border-color; -// } -// } -// } -// } -// @include once { -// & > { -// @include e(content) { -// box-sizing: border-box; -// line-height: 1.75; -// font-size: 14px; -// } -// @include e(footer) { -// box-sizing: border-box; -// line-height: 1.75; -// font-size: 14px; -// } -// } -// } -// & > { -// @include b(card-header) { -// @include once { -// box-sizing: border-box; -// display: flex; -// align-items: center; -// } -// @include e(main) { -// @include once { -// font-weight: $--n-strong-weight; -// font-size: 18px; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// flex: 1; -// } -// color: $--card-title-text-color; -// } -// @include e(extra) { -// @include once { -// font-weight: 400; -// font-size: 14px; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// } -// color: $--card-text-color; -// } -// @include e(close-mark) { -// @include once { -// cursor: pointer; -// transition: fill .3s $--n-ease-in-out-cubic-bezier; -// } -// fill: map-get($--card-close-color, 'default'); -// &:hover { -// fill: map-get($--card-close-color, 'hover'); -// } -// &:active { -// fill: map-get($--card-close-color, 'active'); -// } -// } -// } -// @include e(action) { -// @include once { -// box-sizing: border-box; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier; -// line-height: 1.75; -// font-size: 14px; -// background-clip: padding-box; -// } -// background-color: $--card-action-background-color; -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Cascader.scss b/src/_styles/Cascader.scss deleted file mode 100644 index c704d4f65..000000000 --- a/src/_styles/Cascader.scss +++ /dev/null @@ -1,185 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @mixin cascader-size-mixin ($size) { -// @include b(cascader-menu) { -// @include m($size + '-size') { -// @include b(cascader-submenu) { -// height: map-get($--n-height, $size) * 6.6; -// @include b(cascader-option) { -// height: map-get($--n-height, $size); -// line-height: map-get($--n-height, $size); -// font-size: map-get($--n-font-size, $size); -// } -// } -// } -// } -// } - -// @include cascader-size-mixin('small'); -// @include cascader-size-mixin('medium'); -// @include cascader-size-mixin('large'); -// @include b(cascader) { -// width: 100%; -// } - -// @include themes-mixin { -// @include b(cascader-menu) { -// @include once { -// @include fade-in-scale-up-transition(cascader-menu, inherit, .2s); -// transform: $--n-transform-debounce-scale; -// position: relative; -// margin: 4px 0; -// display: flex; -// flex-wrap: nowrap; -// border-radius: $--n-cascader-border-radius; -// overflow: hidden; -// /** -// * if width not set, cascader select menu's inner scroll area's width is -// * not correct, which won't change after select menu width is set -// */ -// @include b(scrollbar) { -// width: 100%; -// } -// } -// box-shadow: $--cascader-menu-box-shadow; -// @include b(cascader-submenu) { -// @include once { -// position: relative; -// overflow: hidden; -// min-width: 182px; -// @include b(scrollbar-content) { -// position: relative; -// } -// &:first-child { -// border-top-left-radius: $--n-cascader-border-radius; -// border-bottom-left-radius: $--n-cascader-border-radius; -// } -// &:last-child { -// border-top-right-radius: $--n-cascader-border-radius; -// border-bottom-right-radius: $--n-cascader-border-radius; -// } -// } -// &:not(:first-child) { -// border-left: 1px solid $--cascader-menu-border-color; -// } -// background-color: $--cascader-menu-background-color; -// } -// @include b(cascader-option) { -// @include once { -// box-sizing: border-box; -// min-width: 182px; -// background-color: transparent; -// transition: -// background-color .2s $--n-ease-in-out-cubic-bezier, -// color 0.2s $--n-ease-in-out-cubic-bezier; -// display: flex; -// padding: 0px 24px 0 33px; -// white-space: nowrap; -// position: relative; -// cursor: pointer; -// } -// color: map-get($--cascader-option-text-color, 'default'); -// @include not-m(not-leaf) { -// &::after { -// @include once { -// content: ''; -// height: 6px; -// width: 3px; -// position: absolute; -// right: 14px; -// transform: rotate(45deg) scale(.5); -// top: calc(50% - 4px); -// opacity: 0; -// transition: transform .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier; -// } -// border-right: 1px solid $--cascader-item-check-mark-color; -// border-bottom: 1px solid $--cascader-item-check-mark-color; -// } -// } -// @include once { -// @include m(single-type) { -// padding: 0px 24px 0 18px; -// } -// @include e(checkbox) { -// position: absolute; -// top: 50%; -// transform: translateY(-50%); -// left: 10px; -// display: block; -// } -// @include e(radio) { -// position: absolute; -// top: 50%; -// transform: translateY(-50%); -// left: 10px; -// display: block; -// } -// @include e(loading) { -// @include fade-in-scale-up-transition( -// cascader-option-loading, -// $original-transform: translateY(-50%) -// ); -// position: absolute; -// width: 14px; -// height: 14px; -// right: 10px; -// top: 50%; -// transform: translateY(-50%); -// display: block; -// } -// } -// @include m(selected) { -// color: map-get($--cascader-option-text-color, 'active'); -// @include once { -// &::after { -// transform: rotate(45deg) scale(1); -// opacity: 1; -// } -// } -// } -// @include m(active) { -// color: map-get($--cascader-option-text-color, 'active'); -// } -// @include m(disabled) { -// color: map-get($--cascader-option-text-color, 'disabled'); -// @include once { -// cursor: not-allowed; -// } -// } -// @include m(tracked) { -// background-color: $--cascader-menu-tracking-rect-background-color; -// } -// @include m(not-leaf) { -// &::after { -// @include once { -// content: ''; -// position: absolute; -// width: 5px; -// height: 5px; -// transform: rotate(45deg) translateY(-50%); -// right: 18px; -// top: 50%; -// opacity: 1; -// transition: opacity .3s $--n-ease-in-out-cubic-bezier; -// } -// border-top: 2px solid $--cascader-option-arrow-background-color; -// border-right: 2px solid $--cascader-option-arrow-background-color; -// } -// } -// @include once { -// @include m(loading) { -// @include m(not-leaf) { -// &::after { -// opacity: 0; -// } -// } -// } -// } -// } -// @include b(base-tracking-rect) { -// @include e(body) { -// background-color: $--cascader-menu-tracking-rect-background-color !important; -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Checkbox.scss b/src/_styles/Checkbox.scss deleted file mode 100644 index ba3570bac..000000000 --- a/src/_styles/Checkbox.scss +++ /dev/null @@ -1,171 +0,0 @@ -// @import "./mixins/mixins.scss"; - -// @mixin checkbox-size-mixin ($size) { -// @include m($size + '-size') { -// font-size: map-get($--n-font-size, $size); -// @include b(checkbox-box) { -// height: map-get($--n-checkbox-size, $size); -// width: map-get($--n-checkbox-size, $size); -// } -// } -// } - -// @include themes-mixin { -// @include once { -// @include b(checkbox-group) { -// font-size: 14px; -// line-height: 1.25; -// @include b(checkbox) { -// margin-right: 18px; -// } -// } -// @include b(checkbox) { -// @include checkbox-size-mixin('small'); -// @include checkbox-size-mixin('medium'); -// @include checkbox-size-mixin('large'); -// line-height: 1.25; -// outline: none; -// cursor: pointer; -// display: inline-flex; -// align-items: center; -// white-space: nowrap; -// @include b(checkbox-box) { -// display: inline-block; -// box-sizing: border-box; -// border-radius: 4px; -// position: relative; -// transition: -// box-shadow 0.3s $--n-ease-in-out-cubic-bezier, -// background-color 0.3s $--n-ease-in-out-cubic-bezier; -// @include b(checkbox-icon) { -// @include icon-switch-transition(); -// display: flex; -// align-items: center; -// justify-content: center; -// position: absolute; -// left: 0; -// right: 0; -// top: 0; -// bottom: 0; -// transform: $--n-transform-debounce-scale; -// @include e(line, check) { -// width: calc(100% - 2px); -// opacity: 0; -// transform: scale(0.5); -// transform-origin: center; -// transition: -// fill 0.3s $--n-ease-in-out-cubic-bezier, -// transform 0.3s $--n-ease-in-out-cubic-bezier, -// opacity 0.3s $--n-ease-in-out-cubic-bezier, -// border-color 0.3s $--n-ease-in-out-cubic-bezier; -// } -// } -// } -// @include e(label) { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// user-select: none; -// padding-left: 8px; -// } -// @include m(checked) { -// @include b(checkbox-box) { -// @include b(checkbox-icon) { -// @include e(check) { -// opacity: 1; -// transform: scale(1); -// } -// } -// } -// } -// @include m(indeterminate) { -// @include b(checkbox-box) { -// @include b(checkbox-icon) { -// @include e(check) { -// opacity: 0; -// transform: scale(.5); -// } -// @include e(line) { -// opacity: 1; -// transform: scale(1); -// } -// } -// } -// } -// @include m(disabled) { -// cursor: not-allowed; -// } -// } -// } -// @include as-modal-content { -// @include b(checkbox) { -// @include m(table-header) { -// @include not-m(checked) { -// @include not-m(indeterminate) { -// @include not-m(disabled) { -// @include b(checkbox-box) { -// background-color: map-get($--checkbox-background-color, 'modal-table'); -// } -// } -// } -// } -// } -// } -// } -// @include b(checkbox) { -// &:hover { -// @include b(checkbox-box) { -// box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active'); -// } -// } -// &:focus:not(:active) { -// @include b(checkbox-box) { -// box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active'), 0 0 0 2px change-color(map-get($--checkbox-border-color, 'active'), $alpha: .3); -// } -// } -// @include b(checkbox-box) { -// background-color: map-get($--checkbox-background-color, 'default'); -// box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'default'); -// @include b(checkbox-icon) { -// @include e(check, line) { -// fill: map-get($--checkbox-icon-color, 'default'); -// } -// } -// } -// @include e(label) { -// color: map-get($--checkbox-label-text-color, 'default'); -// } -// @include m(table-header) { -// @include b(checkbox-box) { -// background-color: map-get($--checkbox-background-color, 'table'); -// } -// } -// @include m(checked, indeterminate) { -// &:focus:not(:active) { -// @include b(checkbox-box) { -// box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active'), 0 0 0 2px change-color(map-get($--checkbox-border-color, 'active'), $alpha: .3); -// } -// } -// @include b(checkbox-box) { -// background-color: map-get($--checkbox-border-color, 'active'); -// box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'active'); -// @include once { -// border-left: 0; -// border-top: 0; -// } -// } -// } -// @include m(disabled) { -// @include b(checkbox-box) { -// background-color: map-get($--checkbox-background-color, 'disabled'); -// box-shadow: inset 0 0 0 1px map-get($--checkbox-border-color, 'disabled'); -// @include b(checkbox-icon) { -// @include e(check, line) { -// fill: map-get($--checkbox-icon-color, 'disabled'); -// } -// } -// } -// @include e(label) { -// color: map-get($--checkbox-label-text-color, 'disabled'); -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Code.scss b/src/_styles/Code.scss deleted file mode 100644 index ec89db74e..000000000 --- a/src/_styles/Code.scss +++ /dev/null @@ -1,170 +0,0 @@ -// @import "./mixins/mixins.scss"; - -// @include themes-mixin { -// @include b(code) { -// [class^=hljs] { -// color: $--code-text-color; -// } -// } -// } - -// @include b(code) { -// margin: 0; -// font-size: 14px; -// font-family: $--n-mono-font-family; -// code { -// font-family: $--n-mono-font-family; -// } -// [class^=hljs] { -// transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier; -// } -// &.#{block(light-theme)} { - -// .hljs-comment, -// .hljs-quote { -// color: #a0a1a7; -// font-style: italic; -// } - -// .hljs-doctag, -// .hljs-keyword, -// .hljs-formula { -// color: #a626a4; -// } - -// .hljs-section, -// .hljs-name, -// .hljs-selector-tag, -// .hljs-deletion, -// .hljs-subst { -// color: #e45649; -// } - -// .hljs-literal { -// color: #0184bb; -// } - -// .hljs-string, -// .hljs-regexp, -// .hljs-addition, -// .hljs-attribute, -// .hljs-meta-string { -// color: #50a14f; -// } - -// .hljs-built_in, -// .hljs-class .hljs-title { -// color: #c18401; -// } - -// .hljs-attr, -// .hljs-variable, -// .hljs-template-variable, -// .hljs-type, -// .hljs-selector-class, -// .hljs-selector-attr, -// .hljs-selector-pseudo, -// .hljs-number { -// color: #986801; -// } - -// .hljs-symbol, -// .hljs-bullet, -// .hljs-link, -// .hljs-meta, -// .hljs-selector-id, -// .hljs-title { -// color: #4078f2; -// } - -// .hljs-emphasis { -// font-style: italic; -// } - -// .hljs-strong { -// font-weight: $--n-strong-weight; -// } - -// .hljs-link { -// text-decoration: underline; -// } - -// .hljs-function .hljs-params { -// color: #383a42; -// } -// .hljs-function .hljs-params .hljs-typing { -// color: #383a42; -// } -// } -// &.#{block(dark-theme)} { -// .hljs { -// display: block; -// overflow-x: auto; -// padding: 0.5em; -// line-height: 1.3em; -// color: #abb2bf; -// background: #282c34; -// } -// .hljs-keyword, .hljs-operator { -// color: #F92672; -// } -// .hljs-pattern-match { -// color: #F92672; -// } -// .hljs-pattern-match .hljs-constructor { -// color: #61aeee; -// } -// .hljs-function { -// color: #61aeee; -// } -// .hljs-function .hljs-params { -// color: #A6E22E; -// } -// .hljs-function .hljs-params .hljs-typing { -// color: #FD971F; -// } -// .hljs-module-access .hljs-module { -// color: #7e57c2; -// } -// .hljs-constructor { -// color: #e2b93d; -// } -// .hljs-constructor .hljs-string { -// color: #9CCC65; -// } -// .hljs-comment, .hljs-quote { -// color: #b18eb1; -// font-style: italic; -// } -// .hljs-doctag, .hljs-formula { -// color: #c678dd; -// } -// .hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst { -// color: #e06c75; -// } -// .hljs-literal { -// color: #56b6c2; -// } -// .hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string { -// color: #98c379; -// } -// .hljs-built_in, .hljs-class .hljs-title { -// color: #e6c07b; -// } -// .hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-number { -// color: #d19a66; -// } -// .hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title { -// color: #61aeee; -// } -// .hljs-emphasis { -// font-style: italic; -// } -// .hljs-strong { -// font-weight: $--n-strong-weight; -// } -// .hljs-link { -// text-decoration: underline; -// } -// } -// } diff --git a/src/_styles/Collapse.scss b/src/_styles/Collapse.scss deleted file mode 100644 index 804729dd8..000000000 --- a/src/_styles/Collapse.scss +++ /dev/null @@ -1,91 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(collapse) { -// @include once { -// width: 100%; -// } -// @include b(collapse-item) { -// @include once { -// overflow: hidden; -// font-size: 14px; -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// margin-top: 16px; -// &:first-child { -// margin-top: 0px; -// } -// &:first-child > { -// @include e(header) { -// padding-top: 0px; -// } -// } -// @include m(left-arrow-placement) { -// @include e(header) { -// @include b(collapse-item-arrow) { -// margin-right: 4px; -// } -// } -// } -// @include m(right-arrow-placement) { -// @include e(header) { -// @include b(collapse-item-arrow) { -// margin-left: 4px; -// } -// } -// } -// @include b(collapse-item) { -// margin-left: 32px; -// } -// @include e(content-wrapper) { -// @include fade-in-height-expand-transition($duration: .15s); -// overflow: hidden; -// } -// @include m(active) { -// @include e(header) { -// @include m(active) { -// @include b(collapse-item-arrow) { -// @include b(icon) { -// transform: rotate(90deg); -// } -// } -// } -// } -// } -// } -// &:not(:first-child) { -// border-top: 1px solid $--collapse-border-color; -// } -// @include e(header) { -// @include once { -// display: flex; -// flex-wrap: nowrap; -// align-items: center; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// position: relative; -// cursor: pointer; -// padding: 16px 0 0 0; -// @include b(collapse-item-arrow) { -// display: flex; -// @include b(icon) { -// transition: transform .15s $--n-ease-in-out-cubic-bezier, $--n-icon-transition; -// font-size: 16px; -// } -// } -// } -// color: $--collapse-header-text-color; -// @include b(collapse-item-arrow) { -// @include b(icon) { -// fill: $--collapse-header-text-color; -// } -// } -// } -// @include e(content-inner) { -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// padding-top: 16px; -// } -// color: $--collapse-content-text-color; -// } -// } -// } -// } diff --git a/src/_styles/Confirm.scss b/src/_styles/Confirm.scss deleted file mode 100644 index 596768849..000000000 --- a/src/_styles/Confirm.scss +++ /dev/null @@ -1,80 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(confirm) { -// @include once { -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// color .3s $--n-ease-in-out-cubic-bezier; -// box-sizing: border-box; -// width: 100%; -// margin: auto; -// border-radius: $--n-border-radius; -// padding: 28px; -// padding-bottom: 20px; -// padding-top: 16px; -// @include e(content) { -// font-size: 15px; -// padding-right: 9px; -// margin-top: 10px; -// margin-bottom: 19px; -// position: relative; -// } -// @include e(footer) { -// display: flex; -// justify-content: flex-end; -// } -// } -// @include b(confirm-title) { -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// display: flex; -// justify-content: space-between; -// align-items: center; -// font-size: 18px; -// font-weight: $--n-strong-weight; -// @include b(confirm-title-icon) { -// vertical-align: middle; -// margin-right: 8px; -// } -// @include b(confirm-title-content) { -// display: flex; -// align-items: center; -// } -// } -// @include b(confirm-title-icon) { -// @include m(warning-type) { -// fill: map-get($--confirm-icon-color, 'warning'); -// stroke: map-get($--confirm-icon-color, 'warning'); -// } -// @include m(success-type) { -// fill: map-get($--confirm-icon-color, 'success'); -// stroke: map-get($--confirm-icon-color, 'success'); -// } -// @include m(error-type) { -// fill: map-get($--confirm-icon-color, 'error'); -// stroke: map-get($--confirm-icon-color, 'error'); -// } -// @include m(info-type) { -// fill: map-get($--confirm-icon-color, 'info'); -// stroke: map-get($--confirm-icon-color, 'info'); -// } -// } -// @include e(close) { -// fill: map-get($--confirm-close-color, 'default'); -// stroke: map-get($--confirm-close-color, 'default'); -// &:hover { -// fill: map-get($--confirm-close-color, 'hover'); -// stroke: map-get($--confirm-close-color, 'hover'); -// } -// &:active { -// fill: map-get($--confirm-close-color, 'active'); -// stroke: map-get($--confirm-close-color, 'active'); -// } -// } -// color: $--confirm-title-text-color; -// } -// background: $--confirm-background-color; -// color: $--confirm-text-color; -// } -// } diff --git a/src/_styles/DataTable.scss b/src/_styles/DataTable.scss deleted file mode 100644 index 66e3f7c70..000000000 --- a/src/_styles/DataTable.scss +++ /dev/null @@ -1,522 +0,0 @@ -// @import "./mixins/mixins.scss"; - -// @mixin data-table-size-mixin () { -// @include m(small-size) { -// font-size: map-get($--n-font-size, 'medium'); -// @include b(data-table-th) { -// padding: 5px 5px 5px 11px; -// } -// @include b(data-table-td) { -// padding: 5px 5px 5px 11px; -// } -// } -// @include m(medium-size) { -// font-size: map-get($--n-font-size, 'medium'); -// @include b(data-table-th) { -// padding: 10px 10px 10px 16px; -// } -// @include b(data-table-td) { -// padding: 10px 10px 10px 16px; -// } -// } -// @include m(large-size) { -// font-size: map-get($--n-font-size, 'large'); -// @include b(data-table-th) { -// padding: 15px 15px 15px 20px; -// } -// @include b(data-table-td) { -// padding: 15px 15px 15px 20px; -// } -// } -// } - -// @include themes-mixin { -// @include b(data-table) { -// @include once { -// // @include data-table-size-mixin(); -// width: 100%; -// // font-size: 14px; -// @include b(data-table-empty) { -// margin: 16px 0 14px 0; -// flex-grow: 1; -// flex-shrink: 0; -// opacity: 1; -// display: flex; -// align-items: center; -// justify-content: center; -// transition: opacity .3s $--n-ease-in-out-cubic-bezier; -// @include m(hide) { -// opacity: 0; -// } -// } -// @include e(pagination) { -// margin-top: 24px; -// display: flex; -// justify-content: flex-end; -// } -// } -// @include b(data-table-wrapper) { -// @include once { -// position: relative; -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// border-top-left-radius: $--n-data-table-border-radius; -// border-top-right-radius: $--n-data-table-border-radius; -// overflow: hidden; -// line-height: 1.75; -// } -// } -// @include m(single-column) { -// @include b(data-table-wrapper) { -// @include b(data-table-table){ -// @include b(data-table-tr) { -// @include b(data-table-td) { -// border-bottom: 0px solid map-get($--data-table-border-color, 'default') !important; -// &::after { -// bottom: 0 !important; -// } -// &::before { -// bottom: 0 !important; -// } -// } -// } -// } -// } -// } -// @include not-m(single-line) { -// @include b(data-table-wrapper) { -// @include b(data-table-table){ -// @include b(data-table-th) { -// border-right: 1px solid map-get($--data-table-border-color, 'default'); -// &:last-child { -// border-right: 0px solid map-get($--data-table-border-color, 'default'); -// } -// } -// @include b(data-table-td) { -// border-right: 1px solid map-get($--data-table-border-color, 'default'); -// &:last-child { -// border-right: 0px solid map-get($--data-table-border-color, 'default'); -// } -// } -// } -// } -// } -// @include m(bordered) { -// @include b(data-table-wrapper) { -// overflow: hidden; -// border: 1px solid map-get($--data-table-border-color, 'default'); -// border-bottom-left-radius: $--n-data-table-border-radius; -// border-bottom-right-radius: $--n-data-table-border-radius; -// @include b(data-table-table){ -// @include b(data-table-tr) { -// &:last-child { -// @include b(data-table-td) { -// border-bottom: 0px solid map-get($--data-table-border-color, 'default'); -// } -// } -// } -// } -// } -// } -// @include b(data-table-base-table) { -// @include b(scrollbar) { -// @include b(scrollbar-content) { -// overflow: visible; -// } -// } -// } -// @include b(data-table-table) { -// @include once { -// font-variant-numeric: tabular-nums; -// width: 100%; -// word-wrap: break-word; -// word-break: break-all; -// table-layout: fixed; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// border-collapse: separate; -// border-spacing: 0; -// } -// background-color: map-get($--data-table-body-background-color, 'default'); -// @include b(data-table-thead) { -// @include once { -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// } -// background-color: map-get($--data-table-header-background-color, 'default'); -// } -// @include b(data-table-tr) { -// @include once { -// box-sizing: border-box; -// transition: background-color 0.3s $--n-ease-in-out-cubic-bezier; -// background-clip: padding-box; -// &:last-child { -// @include b(data-table-td) { -// &::after { -// bottom: 0 !important; -// } -// &::before { -// bottom: 0 !important; -// } -// } -// } -// } -// &:hover { -// background-color: map-get($--data-table-row-background-color, 'hover'); -// @include b(data-table-td) { -// background-color: map-get($--data-table-row-background-color, 'hover'); -// } -// } -// } -// @include b(data-table-td) { -// @include once { -// text-align: left; -// box-sizing: border-box; -// border: none; -// transition: -// box-shadow .3s $--n-ease-in-out-cubic-bezier, -// background-color .3s $--n-ease-in-out-cubic-bezier, -// border-color .3s $--n-ease-in-out-cubic-bezier, -// color .3s $--n-ease-in-out-cubic-bezier; -// @include m(ellipsis) { -// text-overflow: ellipsis; -// overflow: hidden; -// white-space: nowrap; -// } -// @include m(selection) { -// line-height: 0; -// } -// @include m(fixed-left) { -// left: 0; -// position: sticky; -// z-index: 2; -// &::after { -// pointer-events: none; -// content: ""; -// width: 36px; -// display: inline-block; -// position: absolute; -// top: 0; -// bottom: -1px; -// transition: box-shadow .2s $--n-ease-in-out-cubic-bezier; -// right: -36px; -// } -// } -// @include m(fixed-right) { -// right: 0; -// position: sticky; -// &::before { -// pointer-events: none; -// content: ""; -// width: 36px; -// display: inline-block; -// position: absolute; -// top: 0; -// bottom: -1px; -// transition: box-shadow .2s $--n-ease-in-out-cubic-bezier; -// left: -36px; -// } -// } -// } -// background-color: map-get($--data-table-body-background-color, 'default'); -// @include m(shadow-before) { -// &::before { -// box-shadow: inset -12px 0 8px -12px $--data-table-fixed-column-box-shadow-color; -// } -// } -// @include m(shadow-after) { -// border-right-color: transparent !important; -// &::after { -// box-shadow: inset 12px 0 8px -12px $--data-table-fixed-column-box-shadow-color; -// } -// } -// color: $--data-table-body-text-color; -// border-bottom: 1px solid map-get($--data-table-border-color, 'default'); -// } -// @include b(data-table-th) { -// @include once { -// position: relative; -// text-align: left; -// font-weight: $--n-strong-weight; -// box-sizing: border-box; -// transition: -// border-color .3s $--n-ease-in-out-cubic-bezier, -// color .3s $--n-ease-in-out-cubic-bezier, -// background-color .3s $--n-ease-in-out-cubic-bezier; -// @include m(filterable) { -// padding-right: 36px; -// } -// @include m(selection) { -// line-height: 0; -// } -// @include e(ellipsis) { -// display: inline-block; -// vertical-align: middle; -// text-overflow: ellipsis; -// overflow: hidden; -// white-space: nowrap; -// max-width: 100%; -// } -// } -// background-color: map-get($--data-table-header-background-color, 'default'); -// border-color: map-get($--data-table-border-color, 'default'); -// color: $--data-table-header-text-color; -// @include m(sortable) { -// @include once { -// cursor: pointer; -// @include e(ellipsis) { -// max-width: calc(100% - 18px); -// } -// } -// &:hover { -// background-color: map-get($--data-table-header-background-color, 'hover'); -// } -// } -// @include m(fixed-left) { -// left: 0; -// position: sticky; -// z-index: 2; -// &::after { -// content: ""; -// pointer-events: none; -// width: 36px; -// display: inline-block; -// position: absolute; -// top: 0; -// bottom: -1px; -// transition: box-shadow .3s $--n-ease-in-out-cubic-bezier; -// right: -36px; -// } -// } -// @include m(fixed-right) { -// right: 0; -// position: sticky; -// z-index: 1; -// &::before { -// content: ""; -// pointer-events: none; -// width: 36px; -// display: inline-block; -// position: absolute; -// top: 0; -// bottom: -1px; -// transition: box-shadow .3s $--n-ease-in-out-cubic-bezier; -// left: -36px; -// } -// } -// @include m(shadow-before) { -// &::before { -// box-shadow: inset -12px 0 8px -12px $--data-table-fixed-column-box-shadow-color; -// } -// } -// @include m(shadow-after) { -// border-right-color: transparent !important; -// &::after { -// box-shadow: inset 12px 0 8px -12px $--data-table-fixed-column-box-shadow-color; -// } -// } -// } -// } -// @include b(data-table-base-table-header) { -// @include once { -// flex-shrink: 0; -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// &::-webkit-scrollbar { -// width: 0; -// height: 0; -// } -// scrollbar-width: none; -// @include b(data-table-table) { -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// } -// } -// @include b(data-table-table) { -// border-bottom: 1px solid map-get($--data-table-border-color, 'default'); -// } -// @include b(data-table-th) { -// @include b(data-table-sort-button) { -// @include once { -// height: 14px; -// width: 14px; -// margin-left: 4px; -// position: relative; -// display: inline-block; -// vertical-align: middle; -// @include e(asc-icon) { -// bottom: calc(50% - 2px); -// left: 0; -// } -// @include e(desc-icon) { -// top: calc(50% - 2px); -// left: 0; -// } -// } -// @include m(asc) { -// @include e(asc-icon) { -// fill: map-get($--data-table-button-color, 'active'); -// } -// } -// @include m(desc) { -// @include e(desc-icon) { -// fill: map-get($--data-table-button-color, 'active'); -// } -// } -// @include e(asc-icon, desc-icon) { -// @include once { -// transition: fill .3s $--n-ease-in-out-cubic-bezier; -// position: absolute; -// } -// fill: map-get($--data-table-button-color, 'default'); -// } -// } -// @include b(data-table-filter-button) { -// @include once { -// position: absolute; -// z-index: auto; -// right: 0; -// width: 36px; -// top: 0; -// bottom: 0; -// cursor: pointer; -// } -// @include e(icon-wrapper) { -// @include once { -// position: absolute; -// z-index: auto; -// right: 0; -// left: 0; -// top: 0; -// bottom: 0; -// display: flex; -// justify-content: center; -// align-items: center; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// } -// &:hover { -// background-color: map-get($--data-table-icon-button-background-color, 'hover'); -// } -// @include b(icon) { -// @include once { -// font-size: 12px; -// } -// fill: map-get($--data-table-button-color, 'default'); -// stroke: map-get($--data-table-button-color, 'default'); -// } -// } -// @include m(popover-visible) { -// @include e(icon-wrapper) { -// background-color: map-get($--data-table-icon-button-background-color, 'hover'); -// } -// } -// @include m(active) { -// @include e(icon-wrapper) { -// background-color: map-get($--data-table-icon-button-background-color, 'hover'); -// @include b(icon) { -// fill: map-get($--data-table-button-color, 'active'); -// stroke: map-get($--data-table-button-color, 'active'); -// } -// } -// } -// } -// } -// } -// } -// @include as-modal-content { -// @include b(data-table) { -// @include b(data-table-table) { -// background-color: map-get($--data-table-body-background-color, 'modal'); -// @include b(data-table-thead) { -// background-color: map-get($--data-table-header-background-color, 'modal'); -// } -// @include b(data-table-th) { -// border-color: map-get($--data-table-border-color, 'modal'); -// background-color: map-get($--data-table-header-background-color, 'modal'); -// @include m(sortable) { -// &:hover { -// background-color: map-get($--data-table-header-background-color, 'modal-hover'); -// } -// } -// } -// @include b(data-table-tr) { -// &:hover { -// background-color: map-get($--data-table-row-background-color, 'modal-hover'); -// @include b(data-table-td) { -// background-color: map-get($--data-table-row-background-color, 'modal-hover'); -// } -// } -// } -// @include b(data-table-td) { -// border-color: map-get($--data-table-border-color, 'modal'); -// background-color: map-get($--data-table-body-background-color, 'modal') -// } -// } -// @include not-m(single-line) { -// @include b(data-table-wrapper) { -// @include b(data-table-table){ -// @include b(data-table-th) { -// border-right: 1px solid map-get($--data-table-border-color, 'modal'); -// &:last-child { -// border-right: 0px solid map-get($--data-table-border-color, 'modal'); -// } -// } -// @include b(data-table-td) { -// border-right: 1px solid map-get($--data-table-border-color, 'modal'); -// &:last-child { -// border-right: 0px solid map-get($--data-table-border-color, 'modal'); -// } -// } -// } -// } -// } -// @include m(bordered) { -// @include b(data-table-wrapper) { -// border: 1px solid map-get($--data-table-border-color, 'modal'); -// @include b(data-table-table){ -// @include b(data-table-tr) { -// &:last-child { -// @include b(data-table-td) { -// border-bottom: 0px solid map-get($--data-table-border-color, 'modal'); -// } -// } -// } -// } -// } -// } -// @include b(data-table-base-table-header) { -// @include b(data-table-table) { -// border-bottom: 1px solid map-get($--data-table-border-color, 'modal'); -// } -// } -// } -// } -// } - -// @include b(data-table-filter-menu) { -// @include b(scrollbar) { -// max-height: 240px; -// } -// @include e(group) { -// display: flex; -// flex-direction: column; -// padding: 12px 12px 0 12px; -// @include b(checkbox) { -// margin-bottom: 12px; -// margin-right: 0; -// } -// @include b(radio) { -// margin-bottom: 12px; -// margin-right: 0; -// } -// } -// @include b(divider) { -// margin: 0; -// } -// @include e(action) { -// padding: 8px 12px; -// display: flex; -// flex-wrap: no-wrap; -// justify-content: space-evenly; -// @include b(button) { -// &:not(:last-child) { -// margin-right: 8px; -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/DatePicker.scss b/src/_styles/DatePicker.scss deleted file mode 100644 index 64f615ab2..000000000 --- a/src/_styles/DatePicker.scss +++ /dev/null @@ -1,305 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(date-picker) { -// position: relative; -// @include m(invalid) { -// input { -// text-decoration: line-through; -// text-decoration-color: $--date-picker-text-decoration-color; -// } -// } -// @include m(start-invalid) { -// input:nth-of-type(1) { -// text-decoration: line-through; -// text-decoration-color: $--date-picker-text-decoration-color; -// } -// } -// @include m(end-invalid) { -// input:nth-of-type(2) { -// text-decoration: line-through; -// text-decoration-color: $--date-picker-text-decoration-color; -// } -// } -// } -// @include b(date-panel) { -// outline: none; -// @include fade-in-scale-up-transition(date-panel); -// transform: $--n-transform-debounce-scale; -// margin-top: 4px; -// margin-bottom: 4px; -// display: grid; -// grid-template-columns: 1fr; -// border-radius: $--n-date-picker-border-radius; -// background: $--date-picker-background-color; -// box-shadow: $--date-picker-box-shadow; -// color: $--date-picker-text-color; -// @include b(date-panel-calendar) { -// padding: 4px 12px; -// display: grid; -// grid-template-columns: 1fr; -// } -// @include m(date) { -// grid-template-areas: -// "calendar" -// "action"; -// @include b(date-panel-calendar) { -// padding-top: 6px; -// grid-area: calendar; -// } -// @include b(date-panel-actions) { -// grid-area: action; -// } -// } -// @include m(daterange) { -// grid-template-areas: -// "start-calendar divider end-calendar" -// "action action action"; -// @include b(date-panel-calendar) { -// padding-top: 6px; -// @include m(start) { -// grid-area: start-calendar; -// } -// @include m(end) { -// grid-area: end-calendar; -// } -// } -// @include b(date-panel-actions) { -// grid-area: action; -// } -// } -// @include m(datetime) { -// grid-template-areas: -// "head" -// "calendar" -// "action"; -// @include b(date-panel-input-wrapper) { -// grid-area: head; -// } -// @include b(date-panel-calendar) { -// grid-area: calendar; -// } -// @include b(date-panel-actions) { -// grid-area: action; -// } -// } -// @include m(datetimerange) { -// grid-template-areas: -// "head head head" -// "start-calendar divider end-calendar" -// "action action action"; -// @include b(date-panel-input-wrapper) { -// grid-area: head; -// } -// @include b(date-panel-calendar) { -// @include m(start) { -// grid-area: start-calendar; -// } -// @include m(end) { -// grid-area: end-calendar; -// } -// } -// @include b(date-panel-actions) { -// grid-area: action; -// } -// } -// @include b(date-panel-input-wrapper) { -// @include once { - -// @include e(arrow) { -// @include once { -// width: 16px; -// height: 16px; -// margin: 0 8px; -// position: relative; -// } -// @include b(base-icon) { -// @include once { -// position: absolute; -// left: 0; -// right: 0; -// top: 0; -// bottom: 0; -// } -// fill: $--date-picker-icon-color; -// } -// } -// > { -// @include b(input) { -// margin-right: 10px; -// flex: 1; -// width: 0; -// } -// @include b(time-picker) { -// z-index: 1; -// flex: 1; -// width: 0; -// } -// } -// } -// @include b(date-panel-date-input) { -// @include m(invalid) { -// input { -// text-decoration: line-through; -// text-decoration-color: $--date-picker-text-decoration-color; -// } -// } -// } -// border-bottom: 1px solid $--date-picker-divider-color; -// } -// @include b(date-panel-month) { -// @include once { -// display: flex; -// box-sizing: border-box; -// align-items: center; -// height: 28px; -// padding: 0 8px; -// @include e(prev, next, fast-prev, fast-next) { -// cursor: pointer; -// width: 14px; -// height: 14px; -// } -// @include e(fast-prev, next) { -// margin-right: 10px; -// } -// } -// @include e(prev, next, fast-prev, fast-next) { -// fill: $--date-picker-icon-color; -// } -// @include e(month-year) { -// @include once { -// font-size: 14px; -// font-weight: $--n-strong-weight; -// line-height: 17px; -// flex-grow: 1; -// text-align: center; -// } -// color: $--date-picker-month-text-color; -// } -// } -// @include b(date-panel-weekdays) { -// @include once { -// display: grid; -// margin: auto; -// grid-template-columns: repeat(7, 38px); -// grid-template-rows: repeat(1, 32px); -// align-items: center; -// justify-items: center; -// margin-bottom: 4px; -// } -// @include e(day) { -// @include once { -// line-height: 15px; -// width: 24px; -// text-align: center; -// font-size: 12px; -// } -// color: $--date-picker-text-color; -// } -// border-bottom: 1px solid $--date-picker-divider-color; -// } -// @include b(date-panel-dates) { -// @include once { -// margin: auto; -// display: grid; -// grid-template-columns: repeat(7, 38px); -// grid-template-rows: repeat(6, 32px); -// align-items: center; -// justify-items: center; -// flex-wrap: wrap; -// } -// @include b(date-panel-date) { -// @include once { -// position: relative; -// width: 24px; -// height: 24px; -// line-height: 24px; -// text-align: center; -// font-size: 13px; -// border-radius: 3px; -// z-index: 0; -// cursor: pointer; -// transition: background-color .2s $--n-ease-in-out-cubic-bezier, color .2s $--n-ease-in-out-cubic-bezier; -// @include m(transition-disabled) { -// transition: none!important; -// } -// } -// @include not-m(disabled) { -// @include not-m(selected) { -// &:hover { -// background-color: map-get($--date-picker-item-background-color, 'hover'); -// } -// } -// } -// @include m(current) { -// &::after { -// @include once { -// position: absolute; -// top: 3px; -// right: 2px; -// content: ""; -// height: 4px; -// width: 4px; -// border-radius: 2px; -// transition: background-color .2s $--n-ease-in-out-cubic-bezier; -// } -// background-color: map-get($--date-picker-item-background-color, 'active'); -// } -// } -// @include m(covered) { -// @include not-m(selected) { -// &::before { -// @include once { -// content: ""; -// z-index: -1; -// position: absolute; -// left: -7px; -// right: -7px; -// top: 0; -// bottom: 0; -// } -// background: map-get($--date-picker-item-background-color, 'hover'); -// } -// } -// } -// @include m(selected) { -// color: map-get($--date-picker-item-text-color, 'active'); -// background-color: map-get($--date-picker-item-background-color, 'active'); -// &::after { -// background-color: map-get($--date-picker-item-sup-color, 'active'); -// } -// } -// @include m(excluded) { -// @include once { -// opacity: 0.45; -// } -// } -// @include m(disabled) { -// @include once { -// cursor: not-allowed; -// opacity: $--n-disabled-opacity !important; -// } -// } -// } -// } -// @include e(vertical-divider) { -// grid-area: divider; -// height: 100%; -// width: 1px; -// background: $--date-picker-divider-color; -// } -// @include b(date-panel-actions) { -// @include once { -// flex: 1; -// padding: 8px 12px; -// display: flex; -// align-items: center; -// justify-content: flex-end; -// @include b(button) { -// margin-left: 8px; -// } -// } -// border-top: 1px solid $--date-picker-divider-color; -// } -// } -// } diff --git a/src/_styles/Descriptions.scss b/src/_styles/Descriptions.scss deleted file mode 100644 index a965cbc43..000000000 --- a/src/_styles/Descriptions.scss +++ /dev/null @@ -1,191 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @mixin descriptions-size-mixin ($size) { -// @include m($size + '-size') { -// @include b(descriptions-header) { -// margin-bottom: map-get($--n-descriptions-padding, $size); -// } -// @include m(bordered) { -// @include b(descriptions-table-wrapper) { -// @include b(descriptions-table) { -// @include b(descriptions-table-row) { -// @include b(descriptions-table-header) { -// padding: map-get($--n-descriptions-bordered-padding, $size); -// } -// @include b(descriptions-table-content) { -// padding: map-get($--n-descriptions-bordered-padding, $size); -// } -// &:last-child { -// @include b(descriptions-table-content) { -// padding: map-get($--n-descriptions-bordered-padding, $size); -// } -// } -// } -// } -// } -// } -// @include b(descriptions-table-wrapper) { -// @include b(descriptions-table) { -// @include b(descriptions-table-row) { -// @include b(descriptions-table-content) { -// padding: 0 0 map-get($--n-descriptions-padding, $size) 0; -// } -// &:last-child { -// @include b(descriptions-table-content) { -// padding: 0; -// } -// } -// } -// } -// } -// } -// } - -// @include themes-mixin { -// @include b(descriptions) { -// @include once { -// @include descriptions-size-mixin('small'); -// @include descriptions-size-mixin('medium'); -// @include descriptions-size-mixin('large'); -// @include m(left-label-placement) { -// @include b(descriptions-table-content) { -// & > * { -// vertical-align: top; -// } -// } -// } -// @include m(left-label-align) { -// th { -// text-align: left; -// } -// } -// @include m(center-label-align) { -// th { -// text-align: center; -// } -// } -// @include m(right-label-align) { -// th { -// text-align: right; -// } -// } -// } -// @include m(bordered) { -// @include b(descriptions-table-wrapper) { -// @include once { -// border-radius: $--n-descriptions-border-radius; -// overflow: hidden; -// } -// background: map-get($--descriptions-content-background-color, 'default'); -// border: 1px solid $--descriptions-border-color; -// @include b(descriptions-table) { -// @include b(descriptions-table-row) { -// &:not(:last-child) { -// @include b(descriptions-table-content) { -// border-bottom: 1px solid $--descriptions-border-color; -// } -// @include b(descriptions-table-header) { -// background-clip: padding-box; -// border-bottom: 1px solid $--descriptions-border-color; -// } -// } -// @include b(descriptions-table-header) { -// @include once { -// font-weight: 400; -// } -// background: $--descriptions-header-background-color; -// &:not(:last-child) { -// border-right: 1px solid $--descriptions-border-color; -// } -// } -// @include b(descriptions-table-content) { -// &:not(:last-child) { -// border-right: 1px solid $--descriptions-border-color; -// } -// } -// } -// } -// } -// } -// @include b(descriptions-header) { -// @include once { -// font-weight: $--n-strong-weight; -// font-size: 18px; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// } -// color: $--descriptions-header-text-color; -// } -// @include b(descriptions-table-wrapper) { -// @include once { -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// } -// @include b(descriptions-table) { -// @include once { -// width: 100%; -// border-collapse: separate; -// border-spacing: 0; -// box-sizing: border-box; -// } -// @include b(descriptions-table-row) { -// @include once { -// box-sizing: border-box; -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// } -// @include b(descriptions-table-header) { -// @include once { -// font-weight: $--n-strong-weight; -// line-height: 1.75; -// display: table-cell; -// box-sizing: border-box; -// transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier; -// } -// color: $--descriptions-header-text-color; -// } -// @include b(descriptions-table-content) { -// @include e(content) { -// color: $--descriptions-content-text-color; -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// display: inline-block; -// } -// } -// @include e(label) { -// color: $--descriptions-header-text-color; -// @include once { -// font-weight: $--n-strong-weight; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// display: inline-block; -// margin-right: 14px; -// } -// } -// @include once { -// vertical-align: top; -// line-height: 1.75; -// display: table-cell; -// box-sizing: border-box; -// transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier; -// padding: 0 0 16px 0; -// } -// color: $--descriptions-content-text-color; -// } -// @include once { -// &:last-child { -// @include b(descriptions-table-content) { -// padding: 0; -// } -// } -// } -// } -// } -// } -// } -// @include as-modal-content { -// @include b(descriptions) { -// @include m(bordered) { -// @include b(descriptions-table-wrapper) { -// background: map-get($--descriptions-content-background-color, 'modal'); -// } -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Divider.scss b/src/_styles/Divider.scss deleted file mode 100644 index aae75baac..000000000 --- a/src/_styles/Divider.scss +++ /dev/null @@ -1,84 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(divider) { -// @include once { -// position: relative; -// display: flex; -// width: 100%; -// box-sizing: border-box; -// font-size: 16px; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// @include not-m(vertical) { -// margin-top: 24px; -// margin-bottom: 24px; -// @include not-m(no-title) { -// display: flex; -// align-items: center; -// } -// } -// @include e(title) { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// display: flex; -// align-items: center; -// margin-left: 12px; -// margin-right: 12px; -// white-space: nowrap; -// font-weight: $--n-strong-weight; -// } -// @include m(title-position-left) { -// @include e(line) { -// @include m(left) { -// width: 28px; -// } -// } -// } -// @include m(title-position-right) { -// @include e(line) { -// @include m(right) { -// width: 28px; -// } -// } -// } -// @include m(dashed) { -// @include e(line) { -// background-color: transparent; -// height: 0px; -// width: 100%; -// border-style: dashed; -// border-width: 1px 0 0; -// } -// } -// @include m(vertical) { -// display: inline-block; -// height: 1em; -// margin: 0 8px; -// vertical-align: middle; -// width: 1px; -// } -// } -// color: $--divider-text-color; -// @include once { -// @include e(line) { -// border: none; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier; -// height: 1px; -// width: 100%; -// margin: 0; -// } -// } -// @include not-m(dashed) { -// @include e(line) { -// background-color: $--divider-border-color; -// } -// } -// @include m(dashed) { -// @include e(line) { -// border-color: $--divider-border-color; -// } -// } -// @include m(vertical) { -// background-color: $--divider-border-color; -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Drawer.scss b/src/_styles/Drawer.scss deleted file mode 100644 index cbd2c3007..000000000 --- a/src/_styles/Drawer.scss +++ /dev/null @@ -1,61 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(drawer) { -// @include once { -// @include slide-in-from-right-transition($duration: .3s); -// @include slide-in-from-left-transition($duration: .3s); -// @include slide-in-from-top-transition($duration: .3s); -// @include slide-in-from-bottom-transition($duration: .3s); -// @include m(right-placement) { -// top: 0; -// bottom: 0; -// right: 0; -// } -// @include m(left-placement) { -// top: 0; -// bottom: 0; -// left: 0; -// } -// @include m(top-placement) { -// top: 0; -// left: 0; -// right: 0; -// } -// @include m(bottom-placement) { -// left: 0; -// bottom: 0; -// right: 0; -// } -// padding: 16px 24px; -// position: absolute; -// pointer-events: all; -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// color .3s $--n-ease-in-out-cubic-bezier; -// } -// background-color: $--drawer-background-color; -// color: $--drawer-text-color; -// } -// } - -// @include b(drawer-overlay) { -// @include fade-in-transition(drawer-overlay, $enter-duration: .3s, $leave-duration: .3s); -// background-color: rgba(0, 0, 0, .3); -// position: absolute; -// left: 0; -// right: 0; -// top: 0; -// bottom: 0; -// pointer-events: all; -// } - -// @include b(drawer-container) { -// position: absolute; -// left: 0; -// right: 0; -// top: 0; -// bottom: 0; -// pointer-events: none; -// overflow: hidden; -// } \ No newline at end of file diff --git a/src/_styles/Dropdown.scss b/src/_styles/Dropdown.scss deleted file mode 100644 index 4939c9e4d..000000000 --- a/src/_styles/Dropdown.scss +++ /dev/null @@ -1,104 +0,0 @@ -// @import "./mixins/mixins.scss"; - -// @include themes-mixin { -// @include b(popover-content) { -// @include b(dropdown-submenu-activator) { -// @include e(arrow) { -// fill: $--dropdown-item-suffix-fill; -// } -// } -// @include once { -// position: relative; -// @include b(dropdown-submenu-activator) { -// display: inline-block; -// display: flex; -// align-items: center; -// justify-content: space-between; -// @include e(arrow) { -// position: relative; -// right: -8px; -// } -// } -// @include b(dropdown-menu) { -// outline: none; -// @include b(base-select-menu) { -// margin-top: 0; -// margin-bottom: 0; -// @include m(small-size) { -// padding-top: 4px; -// padding-bottom: 4px; -// @include b(base-select-option) { -// padding: 0 16px; -// } -// @include b(dropdown-divider) { -// margin: 0 0; -// } -// @include b(dropdown-submenu-activator) { -// @include e(arrow) { -// font-size: 16px; -// margin-left: 12px; -// } -// } -// } -// @include m(medium-size) { -// padding-top: 6px; -// padding-bottom: 6px; -// @include b(base-select-option) { -// padding: 0 20px; -// } -// @include b(dropdown-divider) { -// margin: 0 0; -// } -// @include b(dropdown-submenu-activator) { -// @include e(arrow) { -// font-size: 16px; -// margin-left: 16px; -// } -// } -// } -// @include m(large-size) { -// padding-top: 6px; -// padding-bottom: 6px; -// @include b(base-select-option) { -// padding: 0 24px; -// } -// @include b(dropdown-divider) { -// margin: 2px 0; -// } -// @include b(dropdown-submenu-activator) { -// @include e(arrow) { -// font-size: 16px; -// margin-left: 20px; -// } -// } -// } -// @include m(huge-size) { -// padding-top: 8px; -// padding-bottom: 8px; -// @include b(base-select-option) { -// padding: 0 24px; -// } -// @include b(dropdown-submenu-activator) { -// @include e(arrow) { -// font-size: 16px; -// margin-left: 20px; -// } -// } -// } -// } -// } -// @include b(dropdown-divider) { -// margin: 2px 0; -// } -// @include b(dropdown-menu-wrapper) { -// position: absolute !important; -// } -// @include b(dropdown-submenu) { -// @include fade-in-scale-up-transition(dropdown-menu); -// margin-top: 0; -// margin-left: 6px; -// margin-right: 6px; -// } -// } -// } -// } diff --git a/src/_styles/DynamicInput.scss b/src/_styles/DynamicInput.scss deleted file mode 100644 index 64ba71a23..000000000 --- a/src/_styles/DynamicInput.scss +++ /dev/null @@ -1,47 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include once { -// @include b(dynamic-input) { -// width: 100%; -// @include b(dynamic-input-item) { -// margin-bottom: 10px; -// display: flex; -// flex-wrap: nowrap; -// @include b(dynamic-input-preset-input) { -// flex: 1; -// } -// @include b(dynamic-input-preset-pair) { -// flex: 1; -// display: flex; -// @include b(dynamic-input-pair-input){ -// &:first-child { -// margin-right: 12px; -// } -// } -// } -// @include e(action) { -// width: 80px; -// display: flex; -// justify-content: flex-end; -// align-items: flex-start; -// flex-shrink: 0; -// flex-grow: 0; -// @include m(icon) { -// cursor: pointer; -// } -// } -// &:last-child { -// margin-bottom: 0; -// } -// } -// @include b(form-item) { -// padding-top: 0 !important; -// margin-right: 0 !important; -// @include b(form-item-blank) { -// padding: 0 !important; -// } -// } -// } -// } -// } diff --git a/src/_styles/Empty.scss b/src/_styles/Empty.scss deleted file mode 100644 index d76acfca0..000000000 --- a/src/_styles/Empty.scss +++ /dev/null @@ -1,52 +0,0 @@ -// @import "./mixins/mixins.scss"; - -// @mixin empty-size-mixin($size) { -// @include m($size + '-size') { -// font-size: map-get($--n-empty-font-size, $size); -// @include e(icon) { -// width: map-get($--n-empty-icon-size, $size); -// height: map-get($--n-empty-icon-size, $size); -// font-size: map-get($--n-empty-icon-size, $size); -// line-height: map-get($--n-empty-icon-size, $size); -// } -// } -// } - -// @include themes-mixin { -// @include b(empty) { -// @include once { -// @include empty-size-mixin('small'); -// @include empty-size-mixin('medium'); -// @include empty-size-mixin('large'); -// @include empty-size-mixin('huge'); -// display: flex; -// flex-direction: column; -// align-items: center; -// font-size: 14px; -// } -// @include e(icon) { -// @include once { -// transition: fill .3s $--n-ease-in-out-cubic-bezier; -// } -// @include b(icon) { -// fill: $--empty-icon-color; -// stroke: $--empty-icon-color; -// } -// } -// @include e(description) { -// @include once { -// margin-top: 4px; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// } -// color: $--empty-text-color; -// } -// @include e(extra) { -// @include once { -// text-align: center; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// margin-top: 16px; -// } -// color: $--empty-extra-text-color; -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Form.scss b/src/_styles/Form.scss deleted file mode 100644 index 94cbec7b1..000000000 --- a/src/_styles/Form.scss +++ /dev/null @@ -1,172 +0,0 @@ -@import './mixins/mixins.scss'; - -@include b(form) { - width: 100%; - font-size: 14px; - line-height: 1.5; - @include m(inline) { - width: 100%; - display: inline-flex; - align-items: flex-start; - align-content: space-around; - @include b(form-item) { - width: auto; - &:last-child { - margin-right: 0; - } - } - } -} - -$form-item-label-height: ( - 'small': 20px, - 'medium': 22px, - 'large': 24px -) !global; - -@mixin form-item-size-mixin ($size) { - $form-item-feedback-font-size: ( - 'small': 13px, - 'medium': 14px, - 'large': 14px - ) !global; - @include m($size + '-size') { - @include m(top-labelled) { - @include m(no-label) { - padding-top: map-get($form-item-label-height, $size); - } - @include b(form-item-label) { - font-size: map-get($--n-font-size, $size) - 1px; - height: map-get($form-item-label-height, $size); - } - } - @include m(left-labelled) { - @include b(form-item-label) { - font-size: map-get($--n-font-size, $size); - height: map-get($--n-height, $size) + 6px; - line-height: map-get($--n-height, $size) + 6px; - } - } - @include b(form-item-blank) { - min-height: map-get($--n-height, $size); - } - @include b(form-item-feedback-wrapper) { - font-size: map-get($--n-font-size, $size) - 1px; - } - } -} - -@include themes-mixin { - @include b(form-item) { - @include once { - width: 100%; - @include form-item-size-mixin('small'); - @include form-item-size-mixin('medium'); - @include form-item-size-mixin('large'); - @include m(top-labelled) { - margin-right: 18px; - @include m(no-label) { - padding-top: map-get($form-item-label-height, 'medium'); - } - @include b(form-item-label) { - display: block; - width: 100%; - padding-bottom: 8px; - padding-left: 2px; - } - } - @include m(left-labelled) { - display: flex; - flex-wrap: nowrap; - @include b(form-item-label) { - box-sizing: border-box; - padding-right: 12px; - white-space: nowrap; - flex-shrink: 0; - flex-grow: 0; - } - @include b(form-item-control) { - flex-grow: 1; - } - } - @include m(right-label-aligned) { - @include b(form-item-label) { - text-align: right; - &::after { - display: none; - } - } - } - @include m(left-label-aligned) { - @include b(form-item-label) { - text-align: left; - &::before { - display: none; - } - } - } - @include b(form-item-blank) { - padding-top: 3px; - padding-bottom: 3px; - min-height: map-get($--n-height, 'medium'); - display: flex; - align-items: center; - position: relative; - } - } - @include b(form-item-blank) { - @include m(error) { - & + { - @include b(form-item-feedback-wrapper) { - color: map-get($--form-item-feedback-text-color, 'error'); - } - } - } - @include m(warning) { - & + { - @include b(form-item-feedback-wrapper) { - color: map-get($--form-item-feedback-text-color, 'warning'); - } - } - } - } - @include m(required) { - @include b(form-item-label) { - &::after, &::before { - @include once { - content: ' *'; - } - color: $--form-item-required-asterisk; - } - } - } - @include b(form-item-label) { - @include once { - display: inline-block; - height: map-get($form-item-label-height, 'medium'); - box-sizing: border-box; - font-size: 14px; - transition: color .3s $--n-ease-in-out-cubic-bezier; - &::after { - transition: color .3s $--n-ease-in-out-cubic-bezier; - } - } - color: $--form-item-label-text-color; - } - @include b(form-item-feedback-wrapper) { - @include once { - padding-left: 2px; - padding-top: 0px; - box-sizing: border-box; - min-height: 1.5em; - font-size: 14px; - transform-origin: top left; - line-height: 1.5; - transition: color .3s $--n-ease-in-out-cubic-bezier; - @include b(form-item-feedback) { - @include fade-down-transition($name: form-item-feedback, $from-offset: -3px); - } - } - } - } -} diff --git a/src/_styles/GradientText.scss b/src/_styles/GradientText.scss deleted file mode 100644 index 963fac8a6..000000000 --- a/src/_styles/GradientText.scss +++ /dev/null @@ -1,25 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @mixin gradient-text-type-mixin ($type) { -// @include m($type + '-type') { -// background-image: map-get($--gradient-text-background-image, $type); -// } -// } - -// @include themes-mixin { -// @include b(gradient-text) { -// @include once { -// display: inline-block; -// font-weight: $--n-strong-weight; -// font-size: inherit; -// background-clip: text; -// color: transparent; -// white-space: nowrap; -// } -// @include gradient-text-type-mixin(default); -// @include gradient-text-type-mixin(success); -// @include gradient-text-type-mixin(warning); -// @include gradient-text-type-mixin(error); -// @include gradient-text-type-mixin(info); -// } -// } diff --git a/src/_styles/Grid.scss b/src/_styles/Grid.scss deleted file mode 100644 index 854fa2d82..000000000 --- a/src/_styles/Grid.scss +++ /dev/null @@ -1,40 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include b(row) { -// @include m(flex) { -// display: flex; -// } -// width: 100%; -// } - -// @mixin col-size-mixin ($span) { -// @include m($span + '-span') { -// width: percentage($number: 1 / 24 * $span); -// } -// @include m($span + '-offset') { -// margin-left: percentage($number: 1 / 24 * $span); -// } -// @include m($span + '-push') { -// left: percentage($number: 1 / 24 * $span); -// } -// @include m($span + '-pull') { -// right: percentage($number: 1 / 24 * $span); -// } -// } - -// @include b(col) { -// vertical-align: top; -// box-sizing: border-box; -// display: inline-block; -// position: relative; -// z-index: auto; -// @for $i from 1 through 24 { -// @include col-size-mixin($i); -// } -// @include e(box) { -// position: relative; -// z-index: auto; -// width: 100%; -// height: 100%; -// } -// } \ No newline at end of file diff --git a/src/_styles/Icon.scss b/src/_styles/Icon.scss deleted file mode 100644 index 8e358d89b..000000000 --- a/src/_styles/Icon.scss +++ /dev/null @@ -1,37 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(icon) { -// @include once { -// height: 1em; -// width: 1em; -// line-height: 1em; -// text-align: center; -// display: inline-block; -// position: relative; -// transition: $--n-icon-transition; -// svg { -// transition: opacity .3s $--n-ease-in-out-cubic-bezier; -// height: 1em; -// width: 1em; -// } -// } -// fill: $--n-base-text-color; -// stroke: $--n-base-text-color; -// @include m(primary-depth) { -// svg { -// opacity: $--n-primary-opacity; -// } -// } -// @include m(secondary-depth) { -// svg { -// opacity: $--n-secondary-opacity; -// } -// } -// @include m(tertiary-depth) { -// svg { -// opacity: $--n-tertiary-opacity; -// } -// } -// } -// } diff --git a/src/_styles/Layout.scss b/src/_styles/Layout.scss deleted file mode 100644 index 4cb933623..000000000 --- a/src/_styles/Layout.scss +++ /dev/null @@ -1,212 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(layout) { -// color: $--layout-text-color; -// background-color: $--layout-background-color; -// @include once { -// box-sizing: border-box; -// position: relative; -// z-index: auto; -// transition: -// margin-left .3s $--n-ease-in-out-cubic-bezier, -// background-color .3s $--n-ease-in-out-cubic-bezier, -// color .3s $--n-ease-in-out-cubic-bezier; -// flex: auto; -// overflow-x: hidden; -// @include m(has-sider) { -// display: flex; -// flex-wrap: nowrap; -// width: 100%; -// flex-direction: row; -// } -// @include m(absolute-positioned) { -// position: absolute; -// left: 0; -// right: 0; -// top: 0; -// bottom: 0; -// @include b(layout-sider) { -// z-index: 1; -// } -// } -// } -// } -// @include b(layout-header) { -// @include once { -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// box-shadow .3s $--n-ease-in-out-cubic-bezier, -// border-color .3s $--n-ease-in-out-cubic-bezier; -// box-sizing: border-box; -// width: 100%; -// @include m(absolute-positioned) { -// position: absolute; -// left: 0; -// right: 0; -// top: 0; -// } -// } -// background-color: $--layout-header-background-color; -// @include m(bordered) { -// border-bottom: solid 1px $--layout-header-border-color; -// } -// } -// @include b(layout-content) { -// @include once { -// box-sizing: border-box; -// position: relative; -// z-index: auto; -// } -// transition: -// margin-left .3s $--n-ease-in-out-cubic-bezier, -// background-color .3s $--n-ease-in-out-cubic-bezier, -// color .3s $--n-ease-in-out-cubic-bezier; -// } -// @include b(layout-footer) { -// @include once { -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// border-color .3s $--n-ease-in-out-cubic-bezier; -// box-sizing: border-box; -// @include m(absolute-positioned) { -// position: absolute; -// left: 0; -// right: 0; -// bottom: 0; -// } -// } -// @include m(bordered) { -// border-top: solid 1px $--layout-footer-border-color; -// } -// } -// @include b(layout-sider) { -// @include once { -// box-sizing: border-box; -// position: relative; -// z-index: auto; -// transition: -// min-width .3s $--n-ease-in-out-cubic-bezier, -// max-width .3s $--n-ease-in-out-cubic-bezier, -// transform .3s $--n-ease-in-out-cubic-bezier, -// background-color .3s $--n-ease-in-out-cubic-bezier; -// @include e(border) { -// position: absolute; -// top: 0; -// right: 0; -// bottom: 0; -// width: 1px; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// } -// } -// background-color: $--layout-sider-background-color; -// @include b(layout-toggle-button) { -// @include once { -// z-index: 1; -// transition: -// transform .3s $--n-ease-in-out-cubic-bezier, -// fill .3s $--n-ease-in-out-cubic-bezier; -// cursor: pointer; -// width: 36px; -// height: 36px; -// position: absolute; -// top: 50%; -// right: 0; -// transform: translateX(50%) translateY(-50%); -// } -// fill: $--layout-sider-toggle-button-fill; -// } -// @include b(layout-toggle-bar) { -// @include once { -// cursor: pointer; -// height: 72px; -// width: 32px; -// position: absolute; -// top: calc(50% - 36px); -// right: -28px; -// @include e(top, bottom) { -// position: absolute; -// width: 4px; -// border-radius: 2px; -// height: 38px; -// left: 14px; -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// transform .3s $--n-ease-in-out-cubic-bezier; -// } -// @include e(bottom) { -// position: absolute; -// top: 34px; -// } -// &:hover { -// @include e(top) { -// transform: rotate(12deg) scale(1.15) translateY(-2px); -// } -// @include e(bottom) { -// transform: rotate(-12deg) scale(1.15) translateY(2px); -// } -// } -// @include m(collapsed) { -// &:hover { -// @include e(top) { -// transform: rotate(-12deg) scale(1.15) translateY(-2px); -// } -// @include e(bottom) { -// transform: rotate(12deg) scale(1.15) translateY(2px); -// } -// } -// } -// } -// @include e(top, bottom) { -// background-color: map-get( -// $--layout-sider-toggle-bar-background-color, -// 'default' -// ); -// } -// &:hover { -// @include e(top, bottom) { -// background-color: map-get( -// $--layout-sider-toggle-bar-background-color, -// 'hover' -// ); -// } -// } -// } -// @include once { -// @include e(content) { -// opacity: 0; -// transition: opacity .3s $--n-ease-in-out-cubic-bezier; -// } -// } -// @include once { -// @include m(show-content) { -// @include e(content) { -// opacity: 1; -// } -// } -// @include m(collapsed) { -// @include b(layout-toggle-button) { -// transform: translateX(50%) translateY(-50%) rotate(180deg); -// } -// } -// @include m(absolute-positioned) { -// position: absolute; -// left: 0; -// top: 0; -// bottom: 0; -// @include e(content) { -// position: absolute; -// left: 0; -// right: 0; -// top: 0; -// bottom: 0; -// } -// } -// } -// @include m(bordered) { -// @include e(border) { -// background-color: $--layout-sider-border-color; -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/List.scss b/src/_styles/List.scss deleted file mode 100644 index 54c9a74d1..000000000 --- a/src/_styles/List.scss +++ /dev/null @@ -1,85 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(list) { -// @include once { -// font-size: 14px; -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// color .3s $--n-ease-in-out-cubic-bezier, -// border-color .3s $--n-ease-in-out-cubic-bezier; -// padding: 0; -// list-style-type: none; -// } -// color: $--list-text-color; -// @include m(bordered) { -// background-color: map-get( -// $--list-background-color, -// 'default' -// ); -// @include once { -// border-radius: $--n-list-border-radius; -// } -// border: 1px solid $--list-border-color; -// @include b(list-item) { -// @include once { -// padding: 12px 20px; -// } -// &:not(:last-child) { -// border-bottom: 1px solid $--list-border-color; -// } -// } -// @include e(header, footer) { -// @include once { -// padding: 12px 20px; -// } -// &:not(:last-child) { -// border-bottom: 1px solid $--list-border-color; -// } -// } -// } -// @include e(header, footer) { -// @include once { -// padding: 12px 0; -// box-sizing: border-box; -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// } -// &:not(:last-child) { -// border-bottom: 1px solid $--list-border-color; -// } -// } -// @include b(list-item) { -// @include once { -// padding: 12px 0; -// box-sizing: border-box; -// display: flex; -// flex-wrap: nowrap; -// align-items: center; -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// @include e(prefix) { -// margin-right: 20px; -// flex: 0; -// } -// @include e(suffix) { -// margin-left: 20px; -// flex: 0; -// } -// @include e(main) { -// flex: 1; -// } -// } -// &:not(:last-child) { -// border-bottom: 1px solid $--list-border-color; -// } -// } -// } -// @include as-modal-content { -// @include b(list) { -// @include m(bordered) { -// background-color: map-get( -// $--list-background-color, 'modal' -// ); -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/LoadingBar.scss b/src/_styles/LoadingBar.scss deleted file mode 100644 index 3dd354b1e..000000000 --- a/src/_styles/LoadingBar.scss +++ /dev/null @@ -1,35 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(loading-bar-container) { -// @include once { -// @include fade-in-transition(loading-bar-container, .3s, .8s); -// z-index: 5999; -// position: fixed; -// top: 0; -// left: 0; -// right: 0; -// height: 2px; -// } -// @include b(loading-bar) { -// @include once { -// width: 100%; -// transition: max-width 4s linear, background-color .2s linear; -// max-width: 0; -// } -// height: $--loading-bar-height; -// @include m(starting) { -// background-color: map-get($map: $--loading-bar-background-color, $key: 'loading'); -// transition: max-width 4s linear, background-color .2s linear; -// } -// @include m(finishing) { -// background-color: map-get($map: $--loading-bar-background-color, $key: 'loading'); -// transition: max-width .2s linear, background-color .2s linear; -// } -// @include m(error) { -// background-color: map-get($map: $--loading-bar-background-color, $key: 'error'); -// transition: max-width .2s linear, background-color .2s linear; -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Log.scss b/src/_styles/Log.scss deleted file mode 100644 index 032484183..000000000 --- a/src/_styles/Log.scss +++ /dev/null @@ -1,60 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(log) { -// @include once { -// position: relative; -// font-size: 14px; -// box-sizing: border-box; -// transition: -// border-color .3s $--n-ease-in-out-cubic-bezier, -// color .3s $--n-ease-in-out-cubic-bezier; -// @include e(lines) { -// margin: 0; -// white-space: pre-wrap; -// } -// @include e(line) { -// font-family: $--n-mono-font-family; -// margin: 0; -// } -// } -// color: $--log-text-color; -// @include b(log-loader) { -// @include once { -// @include fade-in-width-expand-transition($duration: .3s, $delay: 0s); -// transition: -// color .3s $--n-ease-in-out-cubic-bezier, -// background-color .3s $--n-ease-in-out-cubic-bezier; -// box-sizing: border-box; -// position: absolute; -// right: 16px; -// top: 8px; -// height: 34px; -// border-radius: 17px; -// line-height: 34px; -// white-space: nowrap; -// overflow: hidden; -// @include e(content) { -// display: inline-block; -// vertical-align: bottom; -// line-height: 34px; -// padding-left: 40px; -// padding-right: 20px; -// white-space: nowrap; -// } -// @include b(base-loading) { -// position: absolute; -// left: 12px; -// top: calc(50% - 10px); -// font-size: 20px; -// width: 20px; -// height: 20px; -// display: inline-block; -// } -// } -// border: 1px solid $--log-loader-border-color; -// color: $--log-loader-text-color; -// background-color: $--log-loader-background-color; -// } -// } -// } diff --git a/src/_styles/Menu.scss b/src/_styles/Menu.scss deleted file mode 100644 index 7610eaacf..000000000 --- a/src/_styles/Menu.scss +++ /dev/null @@ -1,309 +0,0 @@ - -// @import './mixins/mixins.scss'; - -// @include themes-mixin() { -// @include b(menu) { -// color: $--menu-item-text-color; -// @include once { -// overflow: hidden; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// width: 100%; -// box-sizing: border-box; -// font-size: 14px; -// @include m(transition-disabled) { -// @include b(menu-item-content) { -// @include e(icon) { -// @include b(icon) { -// transition: none !important; -// } -// } -// @include b(menu-item-content-header) { -// transition: none !important; -// @include e(extra) { -// transition: none !important; -// } -// } -// } -// } -// } -// @include m(horizontal) { -// @include b(menu-list) { -// @include once { -// display: flex; -// @include b(submenu) { -// margin: 0; -// } -// } -// @include b(menu-item) { -// @include once { -// margin: 0; -// &::after { -// background-color: transparent !important; -// } -// } -// @include m(selected) { -// @include b(menu-item-content) { -// border-bottom: 2px solid $--menu-horizontal-border-color; -// } -// } -// } -// @include b(menu-item-content) { -// @include once { -// padding: 0 20px; -// border-bottom: 2px solid transparent; -// } -// @include m(child-selected) { -// border-bottom: 2px solid $--menu-horizontal-border-color; -// } -// @include not-m(disabled) { -// &:hover { -// border-bottom: 2px solid $--menu-horizontal-border-color; -// } -// @include m(hover) { -// border-bottom: 2px solid $--menu-horizontal-border-color; -// } -// } -// } -// } -// } -// @include m(collapsed) { -// @include b(menu-list) { -// @include b(menu-item) { -// @include once { -// &::after { -// background-color: transparent !important; -// } -// } -// } -// @include b(menu-item-content) { -// @include once { -// @include b(menu-item-content-header) { -// opacity: 0; -// } -// @include e(arrow) { -// opacity: 0; -// } -// } -// @include e(icon) { -// @include b(icon) { -// fill: map-get($--menu-item-content-icon-color, 'collapsed'); -// stroke: map-get($--menu-item-content-icon-color, 'collapsed'); -// } -// } -// } -// } -// } -// @include b(menu-list) { -// @include once { -// list-style: none; -// margin: 0; -// padding: 0; -// @include b(menu-item) { -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// list-style: none; -// height: 42px; -// margin-top: 6px; -// } -// @include b(submenu) { -// cursor: pointer; -// position: relative; -// margin-top: 6px; -// @include b(menu-item-content) { -// height: 42px; -// } -// @include b(submenu-content) { -// overflow: hidden; // margin overlay work around, Todo, refactor -// padding: 0; -// list-style: none; -// @include fade-in-height-expand-transition($duration: .2s); -// } -// } -// } -// @include b(menu-item) { -// @include once { -// position: relative; -// &::after { -// content: ""; -// background-color: transparent; -// position: absolute; -// left: 8px; -// right: 8px; -// top: 0; -// bottom: 0; -// border-radius: $--n-border-radius; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// pointer-events: none; -// } -// } -// @include not-m(disabled) { -// &:active { -// &::after { -// background-color: $--menu-item-background-color; -// } -// } -// } -// @include m(selected) { -// &::after { -// background-color: $--menu-item-background-color; -// } -// @include b(menu-item-content) { -// @include e(icon) { -// @include b(icon) { -// fill: map-get($--menu-item-content-icon-color, 'selected'); -// stroke: map-get($--menu-item-content-icon-color, 'selected'); -// } -// } -// @include b(menu-item-content-header) { -// color: map-get($--menu-item-content-text-color, 'selected'); -// @include e(extra) { -// color: map-get($--menu-item-content-extra-text-color, 'selected'); -// } -// } -// } -// } -// } -// @include b(menu-item-content) { -// @include once { -// box-sizing: border-box; -// line-height: 1.75; -// height: 100%; -// display: flex; -// align-items: center; -// cursor: pointer; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier, padding-left .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier; -// position: relative; -// z-index: auto; -// padding-right: 12px; -// @include m(disabled) { -// opacity: 0.45; -// cursor: not-allowed; -// } -// @include m(collapsed) { -// @include e(arrow) { -// transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.2s $--n-ease-in-out-cubic-bezier, border-color 0.3s $--n-ease-in-out-cubic-bezier; -// transform: rotate(225deg); -// } -// } -// @include m(uncollapsable) { -// cursor: default; -// } -// } -// @include e(icon) { -// @include once { -// transition: font-size .3s $--n-ease-in-out-cubic-bezier, padding-right .3s $--n-ease-in-out-cubic-bezier; -// box-sizing: content-box; -// flex-shrink: 0; -// padding-right: 8px; -// display: inline-flex; -// align-items: center; -// justify-content: center; -// } -// @include b(icon) { -// fill: map-get($--menu-item-content-icon-color, 'default'); -// stroke: map-get($--menu-item-content-icon-color, 'default'); -// } -// } -// @include e(arrow) { -// border-left: 2px solid $--menu-submenu-arrow-color; -// border-top: 2px solid $--menu-submenu-arrow-color; -// @include once { -// content: ''; -// height: 6px; -// width: 6px; -// position: absolute; -// right: 24px; -// top: calc(50% - 2px); -// transform: rotate(45deg) ; -// transform-origin: 25% 25%; -// opacity: 1; -// transition: transform 0.2s $--n-ease-in-out-cubic-bezier, opacity 0.2s $--n-ease-in-out-cubic-bezier .1s, border-color 0.3s $--n-ease-in-out-cubic-bezier; -// } -// } -// @include b(menu-item-content-header) { -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier; -// opacity: 1; -// flex-grow: 1; -// flex-shrink: 1; -// white-space: nowrap; -// overflow: hidden; -// text-overflow: ellipsis; -// } -// color: map-get($--menu-item-content-text-color, 'default'); -// @include e(extra) { -// @include once { -// white-space: nowrap; -// margin-left: 6px; -// display: inline-block; -// transition: color 0.3s $--n-ease-in-out-cubic-bezier; -// font-size: 13px; -// } -// color: map-get($--menu-item-content-extra-text-color, 'default'); -// } -// } -// @include not-m(disabled) { -// & { -// @include not-m(uncollapsable) { -// &:hover { -// @include e(icon) { -// @include b(icon) { -// fill: map-get($--menu-item-content-icon-color, 'hover'); -// stroke: map-get($--menu-item-content-icon-color, 'hover'); -// } -// } -// @include b(menu-item-content-header) { -// color: map-get($--menu-item-content-text-color, 'hover'); -// @include e(extra) { -// color: map-get($--menu-item-content-extra-text-color, 'selected'); -// } -// } -// } -// @include m(hover) { -// @include e(icon) { -// @include b(icon) { -// fill: map-get($--menu-item-content-icon-color, 'hover'); -// stroke: map-get($--menu-item-content-icon-color, 'hover'); -// } -// } -// @include b(menu-item-content-header) { -// color: map-get($--menu-item-content-text-color, 'hover'); -// @include e(extra) { -// color: map-get($--menu-item-content-extra-text-color, 'selected'); -// } -// } -// } -// } -// } -// } -// @include m(child-selected) { -// @include b(menu-item-content-header) { -// color: map-get($--menu-item-content-text-color, 'child-selected'); -// @include e(extra) { -// color: map-get($--menu-item-content-extra-text-color, 'child-selected'); -// } -// } -// @include e(icon) { -// @include b(icon) { -// fill: map-get($--menu-item-content-icon-color, 'child-selected'); -// stroke: map-get($--menu-item-content-icon-color, 'child-selected'); -// } -// } -// } -// } -// } -// @include b(menu-item-group) { -// @include b(menu-item-group-title) { -// margin-top: 6px; -// color: $--menu-item-group-text-color; -// @include once { -// cursor: default; -// font-size: 13px; -// height: 36px; -// display: flex; -// align-items: center; -// transition: padding-left .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier; -// } -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Message.scss b/src/_styles/Message.scss deleted file mode 100644 index 3c596d3c6..000000000 --- a/src/_styles/Message.scss +++ /dev/null @@ -1,133 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @mixin message-type-mixin ($type) { -// @include m($type + '-type') { -// color: map-get($--message-text-color, $type); -// background-color: map-get($map: $--message-background-color, $key: $type); -// box-shadow: map-get($map: $--message-box-shadow, $key: $type); -// @include e(icon) { -// @include b(icon) { -// fill: $--message-icon-color; -// stroke: $--message-icon-color; -// } -// } -// @if $type == 'loading' { -// @include e(close) { -// @include b(icon) { -// cursor: pointer; -// fill: map-get($--message-loading-close-color, 'default'); -// stroke: map-get($--message-loading-close-color, 'default'); -// &:hover { -// fill: map-get($--message-loading-close-color, 'hover'); -// stroke: map-get($--message-loading-close-color, 'hover'); -// } -// &:active { -// fill: map-get($--message-loading-close-color, 'active'); -// stroke: map-get($--message-loading-close-color, 'active'); -// } -// } -// } -// } -// } -// } - -// @include b(message-container) { -// @include once { -// z-index: 6000; -// position: fixed; -// top: 12px; -// left: 0; -// right: 0; -// height: 0; -// overflow: visible; -// display: flex; -// flex-direction: column; -// align-items: center; -// } -// } - -// @include themes-mixin { -// @include b(message) { -// @include once { -// display: flex; -// transition: -// color .3s $--n-ease-in-out-cubic-bezier, -// box-shadow .3s $--n-ease-in-out-cubic-bezier, -// background-color .3s $--n-ease-in-out-cubic-bezier, -// opacity .3s $--n-ease-in-out-cubic-bezier, -// transform .3s $--n-ease-in-out-cubic-bezier, -// max-height .3s $--n-ease-in-out-cubic-bezier, -// margin-bottom .3s $--n-ease-in-out-cubic-bezier; -// max-height: 40px; -// opacity: 1; -// margin-bottom: 12px; -// padding: 0 40px; -// height: 40px; -// border-radius: 20px; -// flex-shrink: 0; -// font-weight: 400; -// overflow: hidden; -// &#{&}-transition-enter, &#{&}-transition-leave-to { -// opacity: 0; -// transform: translateY(-12px) scale(.5); -// transform-origin: top center; -// max-height: 0; -// margin-bottom: 0; -// } -// } -// @include once { -// @include e(content) { -// display: inline-block; -// height: 40px; -// line-height: 40px; -// font-size: 15px; -// } -// @include e(icon) { -// margin-right: 10px; -// display: inline-flex; -// height: 40px; -// line-height: 40px; -// align-items: center; -// @include b(icon) { -// @include b(base-loading) { -// @include icon-switch-transition(); -// } -// svg { -// @include icon-switch-transition(); -// } -// font-size: 20px; -// } -// } -// @include e(close) { -// height: 40px; -// display: flex; -// align-items: center; -// font-size: 19px; -// margin-left: 12px; -// } -// } -// @include e(close) { -// @include b(icon) { -// cursor: pointer; -// fill: map-get($--message-close-color, 'default'); -// stroke: map-get($--message-close-color, 'default'); -// &:hover { -// fill: map-get($--message-close-color, 'hover'); -// stroke: map-get($--message-close-color, 'hover'); -// } -// &:active { -// fill: map-get($--message-close-color, 'active'); -// stroke: map-get($--message-close-color, 'active'); -// } -// } -// } -// @include m(closable) { -// padding-right: 24px; -// } -// @include message-type-mixin('info'); -// @include message-type-mixin('success'); -// @include message-type-mixin('error'); -// @include message-type-mixin('warning'); -// @include message-type-mixin('loading'); -// } -// } diff --git a/src/_styles/Modal.scss b/src/_styles/Modal.scss deleted file mode 100644 index c6a4bec10..000000000 --- a/src/_styles/Modal.scss +++ /dev/null @@ -1,88 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(modal-content) { -// @include b(card) { -// background-color: $--n-modal-background-color; -// } -// @include once { -// @include b(confirm) { -// width: 446px; -// max-width: calc(100vw - 32px); -// } -// } -// } -// } - -// @include b(modal-container) { -// position: fixed; -// left: 0; -// top: 0; -// height: 0; -// width: 0; -// display: flex; -// } - -// @include b(modal-overlay) { -// position: fixed; -// left: 0; -// right: 0; -// top: 0; -// bottom: 0; -// background-color: rgba(0, 0, 0, .4); -// &#{&}-transition-enter-active { -// transition: background-color .3s cubic-bezier(0.0, 0.0, 0.2, 1); -// } - -// &#{&}-transition-leave-active { -// transition: background-color .3s cubic-bezier(0.0, 0.0, 0.2, 1); -// } - -// &#{&}-transition-enter, &#{&}-transition-leave-to { -// background-color: rgba(0, 0, 0, 0); -// } -// } - -// @include b(modal-content) { -// position: fixed; -// left: 0; -// right: 0; -// top: 0; -// bottom: 0; -// overflow: visible; -// & > { -// @include b(scrollbar) { -// & > { -// @include b(scrollbar-container) { -// & > { -// @include b(scrollbar-content) { -// min-height: 100%; -// display: flex; -// } -// } -// } -// } -// } -// } -// @include not-m(active) { -// visibility: hidden; -// } -// } - -// @include b(modal-content-slot) { -// position: relative; -// &#{&}-transition-enter-active { -// opacity: 1; -// transition: opacity .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(0.0, 0.0, 0.2, 1); -// transform: $--n-transform-debounce-scale; -// } -// &#{&}-transition-leave-active { -// opacity: 1; -// transition: opacity .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(0.4, 0.0, 1, 1); -// transform: $--n-transform-debounce-scale; -// } -// &#{&}-transition-enter, &#{&}-transition-leave-to { -// opacity: 0; -// transform: scale(.5); -// } -// } \ No newline at end of file diff --git a/src/_styles/Notification.scss b/src/_styles/Notification.scss deleted file mode 100644 index effe5127c..000000000 --- a/src/_styles/Notification.scss +++ /dev/null @@ -1,209 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include b(notification-container) { -// z-index: 4000; -// position: fixed; -// top: 12px; -// left: 0; -// right: 0; -// height: 0; -// overflow: visible; -// display: flex; -// flex-direction: column; -// align-items: flex-end; -// & > { -// @include b(scrollbar) { -// height: -moz-fit-content !important; -// height: fit-content !important; -// max-height: 100vh !important; -// & > { -// @include b(scrollbar-container) { -// height: -moz-fit-content !important; -// height: fit-content !important; -// max-height: 100vh !important; -// @include b(scrollbar-content) { -// padding-top: 12px; -// } -// } -// } -// } -// } - - -// @include m(scrollable) { -// top: 0; -// } -// } - -// @mixin notification-type-mixin ($type) { -// @include m($type + '-type') { -// @include e(avatar) { -// @include b(icon) { -// fill: map-get($--notification-avatar-fill, $type); -// stroke: map-get($--notification-avatar-fill, $type); -// } -// } -// } -// } - -// @include themes-mixin { -// @include b(notification) { -// @include notification-type-mixin(success); -// @include notification-type-mixin(info); -// @include notification-type-mixin(warning); -// @include notification-type-mixin(error); -// @include notification-type-mixin(default); -// background-color: $--notification-background-color; -// color: $--notification-text-color; -// @include once { -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// color .3s $--n-ease-in-out-cubic-bezier, -// opacity .3s $--n-ease-in-out-cubic-bezier, -// transform .3s $--n-ease-in-out-cubic-bezier, -// max-height .3s $--n-ease-in-out-cubic-bezier, -// margin-bottom .3s linear, -// box-shadow .3s $--n-ease-in-out-cubic-bezier; -// font-family: inherit; -// font-size: 14px; -// font-weight: 400; -// position: relative; -// display: flex; -// overflow: hidden; -// flex-shrink: 0; -// margin-bottom: 12px; -// margin-left: 12px; -// margin-right: 16px; -// padding-left: 16px; -// padding-right: 16px; -// width: 365px; -// border-radius: $--n-notification-border-radius; -// box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.18); -// box-sizing: border-box; -// opacity: 1; -// &-transition-enter, &-transition-leave-to { -// opacity: 0; -// margin-bottom: 0; -// transform: translateX(calc(100% + 16px)); -// } -// &-transition-leave, &-transition-enter-to { -// opacity: 1; -// transform: translateX(0); -// } -// @include m(no-avatar) { -// @include b(notification-main) { -// margin-left: 8px; -// width: calc(100% - 8px); -// } -// } -// @include m(closable) { -// @include b(notification-main) { -// & > *:first-child { -// padding-right: 20px -// } -// } -// } -// } -// @include e(close) { -// @include once { -// position: absolute; -// top: 16px; -// right: 12px; -// font-size: 20px; -// cursor: pointer; -// } -// @include b(icon) { -// fill: map-get($--notification-close-color, 'default'); -// stroke: map-get($--notification-close-color, 'default'); -// } -// &:hover { -// @include b(icon) { -// fill: map-get($--notification-close-color, 'hover'); -// stroke: map-get($--notification-close-color, 'hover'); -// } -// } -// &:active { -// @include b(icon) { -// fill: map-get($--notification-close-color, 'active'); -// stroke: map-get($--notification-close-color, 'active'); -// } -// } -// } -// @include e(avatar) { -// @include once { -// position: absolute; -// top: 16px; -// left: 16px; -// width: 28px; -// height: 28px; -// font-size: 28px; -// } -// } -// @include b(notification-main) { -// @include once { -// padding-top: 16px; -// padding-bottom: 16px; -// box-sizing: border-box; -// display: flex; -// flex-direction: column; -// margin-left: 40px; -// width: calc(100% - 40px); -// @include b(notification-main-footer) { -// display: flex; -// align-items: center; -// justify-content: space-between; -// margin-top: 8px; -// } -// } -// @include e(header) { -// @include once { -// font-weight: $--n-strong-weight; -// font-size: 16px; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// } -// color: $--notification-header-text-color; -// } -// @include e(description) { -// @include once { -// margin-top: 8px; -// font-size: 12px; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// } -// color: $--notification-description-text-color; -// } -// @include e(content) { -// @include once { -// line-height: 1.75; -// margin: 12px 0 0 0; -// font-family: inherit; -// &:first-child { -// margin: 0; -// } -// white-space: pre-wrap; -// word-wrap: break-word; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// } -// color: $--notification-content-text-color; -// } -// @include b(notification-main-footer) { -// @include once { -// margin-top: 12px; -// } -// @include e(meta) { -// @include once { -// font-size: 12px; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// } -// color: $--notification-description-text-color; -// } -// @include e(action) { -// @include once { -// cursor: pointer; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// } -// color: $--notification-action-text-color; -// } -// } -// } -// } -// } diff --git a/src/_styles/Pagination.scss b/src/_styles/Pagination.scss deleted file mode 100644 index 4905d9bd3..000000000 --- a/src/_styles/Pagination.scss +++ /dev/null @@ -1,128 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(pagination) { -// @include once { -// display: flex; -// vertical-align: middle; -// @include b(select) { -// width: unset; -// } -// @include m(transition-disabled) { -// @include b(pagination-item) { -// transition: none; -// } -// } -// } -// @include b(pagination-quick-jumper) { -// @include once { -// white-space: nowrap; -// display: flex; -// width: 110px; -// line-height: 28px; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// @include b(input) { -// margin: 0 8px; -// input { -// padding-left: 6px; -// padding-right: 10px; -// } -// } -// } -// color: map-get($--pagination-item-text-color, "default"); -// } -// @include b(pagination-item) { -// @include once { -// position: relative; -// cursor: pointer; -// user-select: none; -// min-width:28px; -// height:28px; -// padding-left: 4px; -// padding-right: 4px; -// box-sizing: border-box; -// opacity: 1; -// transition: -// color .3s $--n-ease-in-out-cubic-bezier, -// box-shadow .3s $--n-ease-in-out-cubic-bezier, -// background-color .3s $--n-ease-in-out-cubic-bezier, -// opacity .3s $--n-ease-in-out-cubic-bezier, -// fill .3s $--n-ease-in-out-cubic-bezier; -// display: flex; -// align-items: center; -// justify-content: center; -// border-radius: $--n-border-radius; -// line-height: 28px; -// &:not(:last-child) { -// margin-right: 8px; -// } -// @include e(more-icon, arrow-icon) { -// position: relative; -// z-index: auto; -// width: 16px; -// height: 16px; -// @include b(base-icon) { -// position: absolute; -// left: 0; -// right: 0; -// top: 0; -// bottom: 0; -// } -// } -// @include m(fast-backward, fast-forward) { -// @include e(more-icon) { -// display: block; -// } -// @include e(arrow-icon) { -// display: none; -// } -// } -// } -// color: map-get($--pagination-item-text-color, 'default'); -// fill: map-get($--pagination-item-text-color, 'default'); -// @include m(active) { -// background: map-get($--pagination-item-background-color, 'active'); -// color: map-get($--pagination-item-text-color, 'active'); -// box-shadow: inset 0 0 0 1px map-get($--pagination-item-border-color, 'active'); -// } -// @include m(backward, forward) { -// background-color: map-get($--pagination-item-background-color, 'default'); -// box-shadow: inset 0 0 0 1px map-get($--pagination-item-border-color, 'default'); -// } -// @include not-m(disabled) { -// &:hover { -// color: map-get($--pagination-item-text-color, 'hover'); -// @include once { -// @include m(fast-backward, fast-forward) { -// @include e(more-icon) { -// display: none; -// } -// @include e(arrow-icon) { -// display: block; -// } -// } -// } -// } -// } -// @include m(disabled) { -// fill: map-get($--pagination-item-text-color, 'disabled'); -// color: map-get($--pagination-item-text-color, 'disabled'); -// @include m(active, backward, forward) { -// background-color: map-get($--pagination-item-background-color, 'disabled'); -// box-shadow: inset 0 0 0 1px map-get($--pagination-item-border-color, 'disabled'); -// } -// @include once { -// cursor: not-allowed; -// } -// } -// } -// @include m(disabled) { -// @include once { -// cursor: not-allowed; -// } -// @include b(pagination-quick-jumper) { -// color: map-get($--pagination-text-color, "disabled"); -// } -// } -// } -// } diff --git a/src/_styles/Popconfirm.scss b/src/_styles/Popconfirm.scss deleted file mode 100644 index 3de2e250f..000000000 --- a/src/_styles/Popconfirm.scss +++ /dev/null @@ -1,33 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include b(popconfirm-content) { -// padding: 4px 0; -// @include m(no-icon) { -// @include e(body) { -// padding-left: 0; -// } -// } -// @include e(body) { -// font-size: 13px; -// white-space: nowrap; -// padding-left: 22px; -// position: relative; -// @include b(icon) { -// position: absolute; -// font-size: 18px; -// left: 0; -// top: 0; -// } -// } -// @include e(action) { -// margin-top: 14px; -// display: flex; -// justify-content: flex-end; -// @include b(button) { -// margin-right: 8px; -// &:last-child { -// margin-right: 0; -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Popover.scss b/src/_styles/Popover.scss deleted file mode 100644 index de40b4764..000000000 --- a/src/_styles/Popover.scss +++ /dev/null @@ -1,265 +0,0 @@ -// @import "./mixins/mixins.scss"; - -// @mixin popover-content-transition { -// &#{&}-transition-enter-to, &#{&}-transition-leave { -// transform: $--n-transform-debounce-scale; -// opacity: 1; -// } -// &#{&}-transition-enter, &#{&}-transition-leave-to { -// opacity: 0; -// transform: scale(.85); -// } -// &#{&}-transition-enter-active { -// transition: opacity .15s $--n-ease-out-cubic-bezier, transform .15s $--n-ease-out-cubic-bezier; -// } -// &#{&}-transition-leave-active { -// transition: opacity .15s $--n-ease-in-cubic-bezier, transform .15s $--n-ease-in-cubic-bezier; -// } -// } - -// @include themes-mixin { -// @include b(popover-content) { -// @include once { -// @include popover-content-transition; -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// color .3s $--n-ease-in-out-cubic-bezier; -// transform-origin: inherit; -// transform: $--n-transform-debounce-scale; -// position: relative; -// font-size: 13px; -// @include m(styled) { -// border-radius: $--n-popover-border-radius; -// padding: 8px 14px; -// } -// @include m(fix-width) { -// white-space: normal; -// width: max-content; -// box-sizing: border-box; -// } -// @include b(popover-arrow-wrapper) { -// position: absolute; -// overflow: hidden; -// pointer-events: none; -// @include b(popover-arrow) { -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// position: absolute; -// display: block; -// width: $--n-popover-arrow-width * 2; -// height: $--n-popover-arrow-width * 2; -// box-shadow: $--n-popover-arrow-box-shadow; -// transform: rotate(45deg); -// } -// } -// @include m(no-arrow) { -// &[n-placement$="top-start"] { -// margin-bottom: 6px; -// } -// &[n-placement$="top"] { -// margin-bottom: 6px; -// } -// &[n-placement$="top-end"] { -// margin-bottom: 6px; -// } -// &[n-placement$="bottom-start"] { -// margin-top: 6px; -// } -// &[n-placement$="bottom"] { -// margin-top: 6px; -// } -// &[n-placement$="bottom-end"] { -// margin-top: 6px; -// } -// &[n-placement$="left-start"] { -// margin-right: 6px; -// }&[n-placement$="left"] { -// margin-right: 6px; -// } -// &[n-placement$="left-end"] { -// margin-right: 6px; -// } -// &[n-placement$="right-start"] { -// margin-left: 6px; -// } -// &[n-placement$="right"] { -// margin-left: 6px; -// } -// &[n-placement$="right-end"] { -// margin-left: 6px; -// } -// } -// &[n-placement$="top-start"] { -// margin-bottom: 10px; -// @include b(popover-arrow-wrapper) { -// right: 0; -// left: 0; -// top: 100%; -// height: $--n-popover-arrow-width * 2; -// @include b(popover-arrow) { -// top: -$--n-popover-arrow-width; -// left: 10px; -// } -// } -// } -// &[n-placement$="top"] { -// margin-bottom: 10px; -// @include b(popover-arrow-wrapper) { -// right: 0; -// left: 0; -// top: 100%; -// height: $--n-popover-arrow-width * 2; -// @include b(popover-arrow) { -// top: -$--n-popover-arrow-width; -// transform: translateX(-$--n-popover-arrow-width) rotate(45deg) ; -// left: 50%; -// } -// } -// } -// &[n-placement$="top-end"] { -// margin-bottom: 10px; -// @include b(popover-arrow-wrapper) { -// right: 0; -// left: 0; -// top: 100%; -// height: $--n-popover-arrow-width * 2; -// @include b(popover-arrow) { -// top: -$--n-popover-arrow-width; -// right: 10px; -// } -// } -// } -// &[n-placement$="bottom-start"] { -// margin-top: 10px; -// @include b(popover-arrow-wrapper) { -// right: 0; -// left: 0; -// bottom: 100%; -// height: $--n-popover-arrow-width * 2; -// @include b(popover-arrow) { -// bottom: -$--n-popover-arrow-width; -// left: 10px; -// } -// } -// } -// &[n-placement$="bottom"] { -// margin-top: 10px; -// @include b(popover-arrow-wrapper) { -// right: 0; -// left: 0; -// bottom: 100%; -// height: $--n-popover-arrow-width * 2; -// @include b(popover-arrow) { -// bottom: -$--n-popover-arrow-width; -// transform: translateX(-$--n-popover-arrow-width) rotate(45deg) ; -// left: 50%; -// } -// } -// } -// &[n-placement$="bottom-end"] { -// margin-top: 10px; -// @include b(popover-arrow-wrapper) { -// right: 0; -// left: 0; -// bottom: 100%; -// height: $--n-popover-arrow-width * 2; -// @include b(popover-arrow) { -// bottom: -$--n-popover-arrow-width; -// right: 10px; -// } -// } -// } -// &[n-placement$="left-start"] { -// margin-right: 10px; -// @include b(popover-arrow-wrapper) { -// top: 0; -// bottom: 0; -// left: 100%; -// width: $--n-popover-arrow-width * 2; -// @include b(popover-arrow) { -// left: -$--n-popover-arrow-width; -// top: 10px; -// } -// } -// } -// &[n-placement$="left"] { -// margin-right: 10px; -// @include b(popover-arrow-wrapper) { -// top: 0; -// bottom: 0; -// left: 100%; -// width: $--n-popover-arrow-width * 2; -// @include b(popover-arrow) { -// left: -$--n-popover-arrow-width; -// transform: translateY(-$--n-popover-arrow-width) rotate(45deg) ; -// top: 50%; -// } -// } -// } -// &[n-placement$="left-end"] { -// margin-right: 10px; -// @include b(popover-arrow-wrapper) { -// top: 0; -// bottom: 0; -// left: 100%; -// width: $--n-popover-arrow-width * 2; -// @include b(popover-arrow) { -// left: -$--n-popover-arrow-width; -// bottom: 10px; -// } -// } -// } -// &[n-placement$="right-start"] { -// margin-left: 10px; -// @include b(popover-arrow-wrapper) { -// top: 0; -// bottom: 0; -// right: 100%; -// width: $--n-popover-arrow-width * 2; -// @include b(popover-arrow) { -// right: -$--n-popover-arrow-width; -// top: 10px; -// } -// } -// } -// &[n-placement$="right"] { -// margin-left: 10px; -// @include b(popover-arrow-wrapper) { -// top: 0; -// bottom: 0; -// right: 100%; -// width: $--n-popover-arrow-width * 2; -// @include b(popover-arrow) { -// right: -$--n-popover-arrow-width; -// transform: translateY(-$--n-popover-arrow-width) rotate(45deg) ; -// top: 50%; -// } -// } -// } -// &[n-placement$="right-end"] { -// margin-left: 10px; -// @include b(popover-arrow-wrapper) { -// top: 0; -// bottom: 0; -// right: 100%; -// width: $--n-popover-arrow-width * 2; -// @include b(popover-arrow) { -// right: -$--n-popover-arrow-width; -// bottom: 10px; -// } -// } -// } -// } -// @include m(styled) { -// background-color: $--popover-background-color; -// } -// color: $--popover-text-color; -// @include b(popover-arrow-wrapper) { -// @include b(popover-arrow) { -// background-color: $--popover-background-color; -// } -// } -// @include m(shadow) { -// box-shadow: $--popover-box-shadow; -// } -// } -// } diff --git a/src/_styles/Popselect.scss b/src/_styles/Popselect.scss deleted file mode 100644 index c80ac4fd5..000000000 --- a/src/_styles/Popselect.scss +++ /dev/null @@ -1,7 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include b(popselect) { -// @include b(base-select-menu) { -// box-shadow: none !important; -// } -// } \ No newline at end of file diff --git a/src/_styles/Radio.scss b/src/_styles/Radio.scss deleted file mode 100644 index 52802dcd6..000000000 --- a/src/_styles/Radio.scss +++ /dev/null @@ -1,268 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @mixin radio-group-size-mixin ($size) { -// @include m($size + '-size') { -// @include m(button-group) { -// line-height: map-get($--n-height, $size); -// height: map-get($--n-height, $size); -// } -// @include b(radio-button) { -// line-height: map-get($--n-height, $size); -// height: map-get($--n-height, $size); -// font-size: map-get($--n-font-size, $size); -// } -// @include e(splitor) { -// height: map-get($--n-height, $size); -// } -// } -// } - -// @mixin radio-size-mixin ($size) { -// @include m($size + '-size') { -// font-size: map-get($--n-font-size, $size); -// @include e(control) { -// height: map-get($--n-radio-size, $size); -// width: map-get($--n-radio-size, $size); -// } -// } -// } - -// @include themes-mixin { -// @include b(radio) { -// @include once { -// @include radio-size-mixin('small'); -// @include radio-size-mixin('medium'); -// @include radio-size-mixin('large'); -// line-height: 1.25; -// outline: none; -// position: relative; -// user-select: none; -// display: inline-flex; -// vertical-align: middle; -// align-items: center; -// @include e(radio-input) { -// width: 0; -// height: 0; -// opacity: 0; -// margin: 0; -// } -// } -// @include e(control) { -// @include once { -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// box-shadow .3s $--n-ease-in-out-cubic-bezier; -// margin-right: 9px; -// position: relative; -// border-radius: 50%; -// } -// background-color: map-get($--radio-background-color, 'default'); -// box-shadow: map-get($--radio-box-shadow, 'default'); -// &::before { -// @include once { -// content: ""; -// opacity: 0; -// position: absolute; -// left: 4px; -// top: 4px; -// height: calc(100% - 8px); -// width: calc(100% - 8px); -// border-radius: 50%; -// transform: scale(.8); -// transition: -// opacity .3s $--n-ease-in-out-cubic-bezier, -// background-color .3s $--n-ease-in-out-cubic-bezier, -// transform .3s $--n-ease-in-out-cubic-bezier; -// } -// background-color: map-get($--radio-control-background-color, 'active'); -// } -// @include m(checked) { -// box-shadow: map-get($--radio-box-shadow, 'active'); -// @include once { -// &::before { -// opacity: 1; -// transform: scale(1); -// } -// } -// } -// } -// @include e(label) { -// @include once { -// display: inline-block; -// white-space: nowrap; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// } -// color: map-get($--radio-label-text-color, 'default'); -// } -// @include not-m(disabled) { -// @include once { -// cursor: pointer; -// } -// &:hover { -// @include e(control) { -// box-shadow: map-get($--radio-box-shadow, 'hover'); -// } -// } -// @include m(focus) { -// &:not(:active) { -// @include e(control) { -// box-shadow: map-get($--radio-box-shadow, 'focus'); -// } -// } -// } -// } -// @include m(disabled) { -// @include once { -// cursor: not-allowed; -// } -// @include e(control) { -// box-shadow: map-get($--radio-box-shadow, 'disabled'); -// background-color: map-get($--radio-background-color, 'disabled'); -// &::before { -// background-color: map-get($--radio-control-background-color, 'disabled'); -// } -// @include once { -// @include m(checked) { -// transform: scale(1); -// opacity: 1; -// } -// } -// } -// @include e(label) { -// color: map-get($--radio-label-text-color, 'disabled'); -// } -// } -// } -// } - -// @include themes-mixin { -// @include b(radio-group) { -// @include once { -// @include radio-group-size-mixin('small'); -// @include radio-group-size-mixin('medium'); -// @include radio-group-size-mixin('large'); -// display: inline-block; -// @include b(radio) { -// margin-right: 18px; -// } -// @include m(button-group) { -// white-space: nowrap; -// height: 28px; -// line-height: 28px; -// } -// @include m(transition-disabled) { -// @include b(radio-button) { -// transition: none !important; -// } -// } -// } -// @include b(radio-button) { -// @include once { -// vertical-align: bottom; -// outline: none; -// position: relative; -// user-select: none; -// display: inline-block; -// height: 28px; -// line-height: 28px; -// box-sizing: border-box; -// padding-left: 14px; -// padding-right: 14px; -// white-space: nowrap; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier; -// @include e(radio-input) { -// width: 0; -// height: 0; -// opacity: 0; -// margin: 0; -// } -// @include e(border-mask) { -// pointer-events: none; -// position: absolute; -// box-shadow: inset 0 0 0 $--radio-border-mask-width transparent; -// transition: box-shadow .3s $--n-ease-in-out-cubic-bezier; -// left: -1px; -// bottom: -1px; -// right: -1px; -// top: -1px; -// } -// } -// color: map-get($--radio-button-label-color, 'default'); -// border-top: 1px solid map-get($--radio-button-border-color, 'default'); -// border-bottom: 1px solid map-get($--radio-button-border-color, 'default'); - -// &:first-child { -// @include once { -// border-top-left-radius: $--n-radio-button-border-radius; -// border-bottom-left-radius: $--n-radio-button-border-radius; -// @include e(border-mask) { -// border-top-left-radius: $--n-radio-button-border-radius; -// border-bottom-left-radius: $--n-radio-button-border-radius; -// } -// } -// border-left: 1px solid map-get($--radio-button-border-color, 'default'); -// } -// &:last-child { -// @include once { -// border-top-right-radius: $--n-radio-button-border-radius; -// border-bottom-right-radius: $--n-radio-button-border-radius; -// @include e(border-mask) { -// border-top-right-radius: $--n-radio-button-border-radius; -// border-bottom-right-radius: $--n-radio-button-border-radius; -// } -// } -// border-right: 1px solid map-get($--radio-button-border-color, 'default'); -// } -// @include not-m(disabled) { -// @include once { -// cursor: pointer; -// } -// &:hover { -// @include e(border-mask) { -// box-shadow: map-get($--radio-button-box-shadow, 'hover'); -// @include once { -// transition: box-shadow .3s $--n-ease-in-out-cubic-bezier; -// } -// } -// @include not-m(checked) { -// color: map-get($--radio-button-label-color, 'hover'); -// } -// } -// @include m(focus) { -// &:not(:active) { -// @include e(border-mask) { -// box-shadow: map-get($--radio-button-box-shadow, 'focus') -// } -// } -// } -// } -// @include m(checked) { -// background-color: map-get($--radio-button-background-color, 'active'); -// color: map-get($--radio-button-label-color, 'active'); -// border-color: map-get($--radio-button-border-color, 'active'); -// } -// @include m(disabled) { -// @include once { -// cursor: not-allowed; -// } -// opacity: $--radio-disabled-opacity; -// } -// } -// @include e(splitor) { -// @include once { -// display: inline-block; -// vertical-align: bottom; -// height: 28px; -// width: 1px; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier; -// } -// background-color: map-get($--radio-button-border-color, 'default'); -// @include m(checked) { -// background-color: map-get($--radio-button-border-color, 'active'); -// } -// @include m(disabled) { -// opacity: $--radio-disabled-opacity; -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Result.scss b/src/_styles/Result.scss deleted file mode 100644 index 4c229c0db..000000000 --- a/src/_styles/Result.scss +++ /dev/null @@ -1,79 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @mixin result-status-mixin ($status){ -// @include m($status + '-status') { -// @include b(result-icon) { -// @include b(icon) { -// fill: map-get($--result-icon-color, $status); -// stroke: map-get($--result-icon-color, $status); -// } -// } -// } -// } - -// @mixin result-size-mixin ($size) { -// @include m($size + '-size') { -// @include b(result-icon) { -// display: flex; -// justify-content: center; -// @include e(status-image) { -// width: map-get($--n-result-icon-size, $size); -// } -// } -// @include b(result-header) { -// @include e(title) { -// font-size: map-get($--n-result-header-font-size, $size); -// } -// @include e(description) { -// font-size: map-get($--n-result-description-font-size, $size); -// } -// } -// } -// } - -// @include themes-mixin { -// @include b(result) { -// color: $--result-description-text-color; -// @include result-status-mixin('success'); -// @include result-status-mixin('info'); -// @include result-status-mixin('warning'); -// @include result-status-mixin('error'); -// @include once { -// @include result-size-mixin('small'); -// @include result-size-mixin('medium'); -// @include result-size-mixin('large'); -// @include result-size-mixin('huge'); -// line-height: $--n-line-height; -// font-size: 14px; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// @include b(result-icon) { -// display: flex; -// justify-content: center; -// } -// @include b(result-content) { -// margin-top: 24px; -// } -// @include b(result-footer) { -// margin-top: 24px; -// text-align: center; -// } -// } -// @include b(result-header) { -// @include e(title) { -// @include once { -// margin-top: 16px; -// font-weight: $--n-strong-weight; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// text-align: center; -// } -// color: $--result-header-text-color; -// } -// @include once { -// @include e(description) { -// margin-top: 4px; -// text-align: center; -// } -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Scrollbar.scss b/src/_styles/Scrollbar.scss deleted file mode 100644 index 48970139c..000000000 --- a/src/_styles/Scrollbar.scss +++ /dev/null @@ -1,82 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(scrollbar) { -// @include once { -// position: relative; -// z-index: auto; -// height: 100%; -// } -// & > { -// @include once { -// @include b(scrollbar-container) { -// width: 100%; -// overflow: scroll; -// height: 100%; -// max-height: inherit; -// scrollbar-width: none; -// &::-webkit-scrollbar { -// width: 0; -// height: 0; -// } -// & > { -// @include b(scrollbar-content) { -// width: fit-content; -// overflow: hidden; -// min-width: 100%; -// } -// } -// } -// } -// @include b(scrollbar-rail) { -// @include once { -// position: absolute; -// pointer-events: none; -// user-select: none; -// @include m(horizontal) { -// left: 0; -// right: 0; -// bottom: 2.5px; -// & > { -// @include e(scrollbar) { -// right: 0; -// } -// } -// } -// @include m(vertical) { -// right: 2.5px; -// top: 0; -// bottom: 0; -// & > { -// @include e(scrollbar) { -// bottom: 0; -// } -// } -// } -// @include m(disabled) { -// & > { -// @include e(scrollbar) { -// pointer-events: none; -// } -// } -// } -// } -// & > { -// @include e(scrollbar) { -// @include once { -// @include fade-in-transition(scrollbar); -// position: absolute; -// cursor: pointer; -// pointer-events: all; -// } -// background-color: map-get($--scrollbar-background-color, 'default'); -// transition: background-color .2s $--n-ease-in-out-cubic-bezier; -// &:hover { -// background-color: map-get($--scrollbar-background-color, 'hover'); -// } -// } -// } -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Select.scss b/src/_styles/Select.scss deleted file mode 100644 index 3b0c75ab1..000000000 --- a/src/_styles/Select.scss +++ /dev/null @@ -1,52 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include once { -// @include b(select) { -// display: inline-block; -// border: none; -// outline: none; -// width: 100%; -// z-index: auto; -// text-align: start; -// vertical-align: baseline; -// // transform: translateZ(0); // to avoid blink of activator when animation occurs nearby -// @include not-m(multiple) { -// @include m(small-size) { -// height: 28px; -// } -// @include m(medium-size) { -// height: 34px; -// } -// @include m(large-size) { -// height: 40px; -// } -// } -// @include m(small-size) { -// line-height: 28px; -// } -// @include m(medium-size) { -// line-height: 34px; -// } -// @include m(large-size) { -// line-height: 40px; -// } -// @include m(small-size) { -// font-size: 14px; -// } -// @include m(medium-size) { -// font-size: 14px; -// } -// @include m(large-size) { -// font-size: 15px; -// } -// } -// @include b(select-menu) { -// transform: $--n-transform-debounce-scale; -// @include fade-in-scale-up-transition( -// select-menu, -// $original-transition: (background-color .3s $--n-ease-in-out-cubic-bezier) -// ); -// } -// } -// } diff --git a/src/_styles/Slider.scss b/src/_styles/Slider.scss deleted file mode 100644 index 489f4f3be..000000000 --- a/src/_styles/Slider.scss +++ /dev/null @@ -1,140 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(slider) { -// @include once { -// display: block; -// padding: 5px 0; -// position: relative; -// z-index: 0; -// width: calc(100% - 14px); -// margin-left: 7px; -// margin-right: 7px; -// cursor: pointer; -// @include b(slider-marks) { -// position: absolute; -// top: 14px; -// left: 0; -// right: 0; -// @include b(slider-mark) { -// position: absolute; -// transform: translateX(-50%); -// } -// } -// @include m(with-mark) { -// width: calc(100% - 24px); -// margin: 8px 12px 32px 12px; -// } -// } -// &:hover { -// @include b(slider-rail) { -// background-color: map-get($--slider-rail-background-color, 'hover'); -// @include e(fill) { -// background-color: map-get($--slider-rail-fill-background-color, 'hover'); -// } -// @include b(slider-dots) { -// @include b(slider-dot) { -// box-shadow: map-get($--slider-dot-box-shadow, 'active'); -// } -// } -// } -// @include b(slider-handle) { -// box-shadow: map-get($--slider-handle-box-shadow, 'hover'); -// } -// } -// @include m(active) { -// @include b(slider-rail) { -// background-color: map-get($--slider-rail-background-color, 'hover'); -// @include e(fill) { -// background-color: map-get($--slider-rail-fill-background-color, 'hover'); -// } -// @include b(slider-dots) { -// @include b(slider-dot) { -// box-shadow: map-get($--slider-dot-box-shadow, 'active'); -// } -// } -// } -// @include b(slider-handle) { -// box-shadow: map-get($--slider-handle-box-shadow, 'hover'); -// } -// } -// @include b(slider-rail) { -// @include once { -// width: 100%; -// position: relative; -// } -// height: $--n-slider-rail-height; -// background-color: map-get($--slider-rail-background-color, 'default'); -// transition: background-color .2s $--n-ease-in-out-cubic-bezier; -// border-radius: $--n-slider-rail-height / 2; -// @include e(fill) { -// @include once { -// position: absolute; -// top: 0; -// bottom: 0; -// border-radius: $--n-slider-rail-height / 2; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// } -// background-color: map-get($--slider-rail-fill-background-color, 'default'); -// } -// } -// @include b(slider-handle) { -// @include once { -// outline: none; -// height: $--n-slider-handle-size; -// width: $--n-slider-handle-size; -// border-radius: $--n-slider-handle-size / 2; -// transition: box-shadow .2s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier; -// position: absolute; -// top: 0; -// transform: translateX(-50%); -// overflow: hidden; -// cursor: pointer; -// } -// background-color: $--slider-handle-background-color; -// box-shadow: map-get($--slider-handle-box-shadow, 'default'); -// &:hover { -// box-shadow: map-get($--slider-handle-box-shadow, 'hover'); -// } -// &:hover:focus { -// box-shadow: map-get($--slider-handle-box-shadow, 'active'); -// } -// &:focus { -// box-shadow: map-get($--slider-handle-box-shadow, 'focus'); -// } -// } -// @include b(slider-dots) { -// @include once { -// position: absolute; -// left: 0; -// top: 50%; -// right: 0; -// } -// @include b(slider-dot) { -// @include once { -// transition: box-shadow .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier; -// position: absolute; -// transform: translateX(-50%) translateY(-50%); -// height: $--n-slider-dot-size; -// width: $--n-slider-dot-size; -// border-radius: $--n-slider-dot-size / 2; -// overflow: hidden; -// } -// box-shadow: map-get($--slider-dot-box-shadow, 'default'); -// } -// } -// } -// @include b(slider-handle-indicator) { -// @include once { -// @include fade-in-scale-up-transition(slider-indicator); -// transform: $--n-transform-debounce-scale; -// font-size: 14px; -// padding: 8px 12px; -// margin-bottom: 12px; -// border-radius: 4px; -// } -// color: $--slider-indicator-text-color; -// background-color: $--slider-indicator-background-color; -// box-shadow: $--slider-indicator-box-shadow; -// } -// } \ No newline at end of file diff --git a/src/_styles/Spin.scss b/src/_styles/Spin.scss deleted file mode 100644 index ccdfcde4a..000000000 --- a/src/_styles/Spin.scss +++ /dev/null @@ -1,58 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include once { -// @include b(spin) { -// display: inline-block; -// @include m(in-small-size) { -// width: 14px; -// height: 14px; -// } -// @include m(in-medium-size) { -// width: 16px; -// height: 16px; -// } -// @include m(in-large-size) { -// width: 18px; -// height: 18px; -// } -// @include m(small-size) { -// width: 28px; -// height: 28px; -// } -// @include m(medium-size) { -// width: 34px; -// height: 34px; -// } -// @include m(large-size) { -// width: 40px; -// height: 40px; -// } -// } -// } -// @include b(spin-container) { -// @include once { -// position: relative; -// @include b(spin) { -// @include fade-in-transition(spin); -// position: absolute; -// top: 50%; -// left: 50%; -// transform: translateX(-50%) translateY(-50%); -// } -// @include b(spin-content) { -// opacity: 1; -// transition: opacity .3s $--n-ease-in-out-cubic-bezier; -// pointer-events: all; -// @include m(spinning) { -// pointer-events: none; -// } -// } -// } -// @include b(spin-content) { -// @include m(spinning) { -// opacity: $--spin-spinning-opacity; -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Statistic.scss b/src/_styles/Statistic.scss deleted file mode 100644 index 6e5dd3bee..000000000 --- a/src/_styles/Statistic.scss +++ /dev/null @@ -1,55 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(statistic) { -// @include b(statistic-value) { -// @include once { -// margin-top: 4px; -// font-weight: $--n-strong-weight; -// } -// @include e(prefix) { -// @include once { -// font-size: 18px; -// transition: .3s color $--n-ease-in-out-cubic-bezier; -// } -// color: $--statistic-value-prefix-text-color; -// @include b(icon) { -// @include once { -// vertical-align: -0.125em; -// } -// fill: $--statistic-value-prefix-text-color; -// stroke: $--statistic-value-prefix-text-color; -// } -// } -// @include e(content) { -// @include once { -// font-size: 24px; -// transition: .3s color $--n-ease-in-out-cubic-bezier; -// } -// color: $--statistic-value-content-text-color; -// } -// @include e(suffix) { -// @include once { -// font-size: 18px; -// transition: .3s color $--n-ease-in-out-cubic-bezier; -// } -// color: $--statistic-value-suffix-text-color; -// @include b(icon) { -// @include once { -// vertical-align: -0.125em; -// } -// fill: $--statistic-value-prefix-text-color; -// stroke: $--statistic-value-prefix-text-color; -// } -// } -// } -// @include e(label) { -// @include once { -// font-weight: $--n-strong-weight; -// transition: .3s color $--n-ease-in-out-cubic-bezier; -// font-size: 14px; -// } -// color: $--statistic-value-label-text-color; -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Steps.scss b/src/_styles/Steps.scss deleted file mode 100644 index 4d4190372..000000000 --- a/src/_styles/Steps.scss +++ /dev/null @@ -1,185 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @mixin steps-size-mixin ($size) { -// @include m($size + '-size') { -// $title-font-size: map-get($--n-steps-header-font-size, $size); -// $indicator-size: map-get($--n-steps-indicator-size, $size); -// $indicator-icon-size: map-get($--n-steps-indicator-icon-size, $size); -// $indicator-index-font-size: map-get($--n-steps-indicator-index-font-size, $size); -// $indicator-title-margin-top: ($indicator-size - $title-font-size) / 2; -// @include b(step-splitor) { -// margin-top: $indicator-size / 2 - $indicator-title-margin-top; -// } -// @include m(vertical) { -// @include b(step-splitor) { -// left: $indicator-size / 2; -// height: calc(100% - #{$indicator-size}); -// } -// } -// @include b(step-content) { -// @include b(step-content-header) { -// margin-top: $indicator-title-margin-top; -// line-height: $title-font-size; -// font-size: $title-font-size; -// } -// } -// @include b(step-indicator) { -// height: $indicator-size; -// width: $indicator-size; -// border-radius: $indicator-size / 2; -// @include b(step-indicator-slot) { -// width: $indicator-icon-size; -// height: $indicator-icon-size; -// font-size: $indicator-icon-size; -// line-height: $indicator-icon-size; -// @include e(index) { -// font-size: $indicator-index-font-size; -// width: $indicator-icon-size; -// height: $indicator-icon-size; -// line-height: $indicator-icon-size; -// } -// } -// } -// } -// } - -// @mixin steps-status-mixin ($status) { -// @include m($status) { -// @include b(step-splitor) { -// background-color: map-get($--steps-step-splitor-background-color, $status); -// } -// @include b(step-content) { -// @include b(step-content-header) { -// color: map-get($--steps-step-title-text-color, $status); -// } -// @include e(description) { -// color: map-get($--steps-step-content-text-color, $status); -// } -// } -// @include b(step-indicator) { -// background-color: map-get($--steps-step-background-color, $status); -// box-shadow: 0 0 0 1px map-get($--steps-step-border-color, $status); -// @include b(step-indicator-slot) { -// @include e(index) { -// color: map-get($--steps-step-indicator-text-color, $status); -// } -// @include b(icon) { -// fill: map-get($--steps-step-indicator-text-color, $status); -// stroke: map-get($--steps-step-indicator-text-color, $status); -// } -// } -// } -// } -// } - -// @include themes-mixin { -// @include b(steps) { -// @include once { -// @include steps-size-mixin('small'); -// @include steps-size-mixin('medium'); -// width: 100%; -// display: flex; -// @include b(step-splitor) { -// transition: -// color .3s $--n-ease-in-out-cubic-bezier, -// background-color .3s $--n-ease-in-out-cubic-bezier; -// height: 1px; -// flex: 1; -// align-self: flex-start; -// margin-left: 12px; -// margin-right: 12px; -// } -// @include b(step-content) { -// flex: 1; -// @include b(step-content-header) { -// transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier; -// position: relative; -// display: flex; -// font-weight: $--n-strong-weight; -// margin-left: 9px; -// @include e(title) { -// white-space: nowrap; -// flex: 0; -// } -// } -// @include e(description) { -// transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier; -// margin-top: 12px; -// margin-left: 9px; -// } -// } -// @include b(step-indicator) { -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// box-shadow .3s $--n-ease-in-out-cubic-bezier; -// display: flex; -// align-items: center; -// justify-content: center; -// @include b(step-indicator-slot) { -// position: relative; -// @include e(index) { -// @include icon-switch-transition(); -// display: inline-block; -// text-align: center; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// position: absolute; -// left: 0; -// top: 0; -// transform: $--n-transform-debounce-scale; -// } -// @include b(icon) { -// @include icon-switch-transition(); -// } -// } -// } -// @include m(transition-disabled) { -// @include b(step-indicator) { -// @include b(step-indicator-slot) { -// @include e(index) { -// transition: none !important; -// } -// } -// } -// } -// @include m(vertical) { -// flex-direction: column; -// $step-margin-bottom: 16px; -// @include b(step) { -// margin-bottom: $step-margin-bottom; -// &:last-child { -// margin-bottom: 0; -// } -// } -// @include b(step-indicator) { -// @include b(step-splitor) { -// position: absolute; -// bottom: -$step-margin-bottom / 2; -// width: 1px; -// margin: 0 !important; -// } -// } -// @include b(step-content) { -// @include e(description) { -// margin-top: 8px; -// } -// } -// } -// } -// @include b(step) { -// @include steps-status-mixin('finish'); -// @include steps-status-mixin('error'); -// @include steps-status-mixin('wait'); -// @include steps-status-mixin('process'); -// @include once { -// position: relative; -// display: flex; -// flex: 1; -// &:last-child { -// @include b(step-splitor) { -// display: none; -// } -// } -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Switch.scss b/src/_styles/Switch.scss deleted file mode 100644 index a615788c4..000000000 --- a/src/_styles/Switch.scss +++ /dev/null @@ -1,85 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin{ -// @include b(switch) { -// @include once { -// vertical-align: middle; -// user-select: none; -// display: inline-block; -// outline: none; -// } -// @include e(rail) { -// @include once { -// cursor: pointer; -// position: relative; -// height: 14px; -// width: 30px; -// border-radius: 7px; -// margin: 3px; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// &::before, &::after { -// box-sizing: border-box; -// cursor: inherit; -// content: ""; -// position: absolute; -// height: 20px; -// width: 24px; -// max-width: 20px; -// border-radius: 10px; -// top: -3px; -// left: -3px; -// background-size: 800% 800%; -// transition: -// left .3s $--n-ease-in-out-cubic-bezier, -// opacity .3s $--n-ease-in-out-cubic-bezier, -// max-width .3s $--n-ease-in-out-cubic-bezier, -// background-position .3s $--n-ease-in-out-cubic-bezier, -// box-shadow .3s $--n-ease-in-out-cubic-bezier; -// } -// &::before { -// opacity: 1; -// } -// &::after { -// opacity: 0; -// } -// @include not-m(disabled) { -// &:active::before, &:active::after { -// max-width: 24px; -// } -// @include m(active) { -// &:active::before, &:active::after { -// left: 9px; -// } -// } -// } -// @include m(active) { -// &::before { -// left: 13px; -// opacity: 1; -// } -// &::after { -// left: 13px; -// opacity: 1; -// } -// } -// } -// &::before { -// box-shadow: $--switch-switcher-box-shadow; -// background-position: $--switch-background-position; -// background-image: map-get($--switch-switcher-background-image, 'inactive'); -// } -// &::after { -// background-position: $--switch-background-position; -// background-image: map-get($--switch-switcher-background-image, 'active'); -// } -// background-color: map-get($--switch-rail-background-color, 'inactive'); -// @include m(active) { -// background-color: map-get($--switch-rail-background-color, 'active'); -// } -// @include m(disabled) { -// cursor: not-allowed; -// opacity: .5; -// } -// } -// } -// } diff --git a/src/_styles/Table.scss b/src/_styles/Table.scss deleted file mode 100644 index 620193450..000000000 --- a/src/_styles/Table.scss +++ /dev/null @@ -1,125 +0,0 @@ -// @import "./mixins/mixins.scss"; - -// @mixin table-size-mixin () { -// @include m(small-size) { -// font-size: map-get($--n-font-size, 'medium'); -// @include e(th) { -// padding: 5px 5px 5px 11px; -// } -// @include e(td) { -// padding: 5px 5px 5px 11px; -// } -// } -// @include m(medium-size) { -// font-size: map-get($--n-font-size, 'medium'); -// @include e(th) { -// padding: 10px 10px 10px 16px; -// } -// @include e(td) { -// padding: 10px 10px 10px 16px; -// } -// } -// @include m(large-size) { -// font-size: map-get($--n-font-size, 'large'); -// @include e(th) { -// padding: 15px 15px 15px 20px; -// } -// @include e(td) { -// padding: 15px 15px 15px 20px; -// } -// } -// } - -// @include themes-mixin { -// @include b(table) { -// @include once { -// @include table-size-mixin; -// font-variant-numeric: tabular-nums; -// line-height: 1.75; -// font-size: 14px; -// width: 100%; -// border-radius: $--n-popover-border-radius $--n-popover-border-radius 0 0; -// text-align: left; -// border-collapse: separate; -// border-spacing: 0; -// overflow: hidden; -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// border-color .3s $--n-ease-in-out-cubic-bezier, -// color .3s $--n-ease-in-out-cubic-bezier; -// } -// background-color: map-get($--table-body-background-color, 'default'); -// @include e(th) { -// @include once { -// background-clip: padding-box; -// white-space: nowrap; -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// border-color .3s $--n-ease-in-out-cubic-bezier, -// color .3s $--n-ease-in-out-cubic-bezier; -// text-align: inherit; -// padding: 14px 12px; -// vertical-align: inherit; -// text-transform: none; -// border: none; -// font-weight: $--n-strong-weight; -// } -// color: $--table-header-text-color; -// background-color: $--table-header-background-color; -// border-color: $--table-border-color; -// border-bottom: 1px solid $--table-border-color; -// border-right: 1px solid $--table-border-color; -// &:last-child { -// border-right: none; -// } -// } -// @include e(td) { -// @include once { -// transition: -// background-color .3s $--n-ease-in-out-cubic-bezier, -// border-color .3s $--n-ease-in-out-cubic-bezier, -// color .3s $--n-ease-in-out-cubic-bezier; -// padding: 12px; -// } -// color: $--table-body-text-color; -// background-color: map-get($--table-body-background-color, 'default'); -// border-right: 1px solid $--table-border-color; -// border-bottom: 1px solid $--table-border-color; -// &:last-child { -// border-right: none; -// } -// } -// @include m(bordered) { -// border: 1px solid $--table-border-color; -// border-radius: $--n-popover-border-radius; -// @include e(tr) { -// &:last-child { -// @include e(td) { -// border-bottom: none; -// } -// } -// } -// } -// @include m(single-line) { -// @include e(th) { -// border-right: none; -// } -// @include e(td) { -// border-right: none; -// } -// } -// @include m(single-column) { -// @include e(td) { -// border-bottom: none; -// } -// } -// } -// @include as-modal-content { -// @include b(table) { -// background-color: map-get($--table-body-background-color, 'modal'); -// @include e(td) { -// background-color: map-get($--table-body-background-color, 'modal'); -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Tabs.scss b/src/_styles/Tabs.scss deleted file mode 100644 index e0633eb2f..000000000 --- a/src/_styles/Tabs.scss +++ /dev/null @@ -1,237 +0,0 @@ -// @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); -// } -// } -// } -// } -// } - -// @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'); -// } -// } -// } -// } -// } -// } diff --git a/src/_styles/Tag.scss b/src/_styles/Tag.scss deleted file mode 100644 index cc4d078bf..000000000 --- a/src/_styles/Tag.scss +++ /dev/null @@ -1,151 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @mixin tag-size-mixin($size) { -// $height: map-get($--n-height, $size) - 6px; -// $font-size: ( -// "small": 13px, -// "medium": 14px, -// "large": 14px -// ); -// @include m($size + "-size") { -// line-height: $height; -// height: $height; -// font-size: map-get($font-size, $size); -// @include m(round) { -// padding-left: $height / 2; -// padding-right: $height / 2; -// border-radius: $height / 2; -// @include m(closable) { -// padding-right: 10px + $height / 2; -// @include e(close) { -// right: $height / 2 - 6px; -// } -// } -// } -// } -// } - -// @mixin tag-type-mixin($type) { -// @include m($type + '-type') { -// @include not-m(checkable) { -// box-shadow: inset 0 0 0 1px map-get($--tag-border-color, $type); -// color: map-get($--tag-text-color, $type); -// background-color: map-get($--tag-background-color, $type); -// @include e(close) { -// fill: map-get($--tag-close-color, $type); -// } -// @include not-m(disabled) { -// @include e(close) { -// &:hover { -// fill: map-get($--tag-close-color, $type + '-hover'); -// } -// &:active { -// fill: map-get($--tag-close-color, $type + '-active'); -// } -// } -// &:hover { -// background-color: map-get($--tag-background-color, $type + '-hover'); -// } -// &:active { -// background-color: map-get($--tag-background-color, $type + '-active'); -// } -// } -// @include m(disabled) { -// box-shadow: inset 0 0 0 1px map-get($--tag-border-color, $type + '-disabled'); -// color: map-get($--tag-text-color, $type + '-disabled'); -// background-color: map-get($--tag-background-color, $type + '-disabled'); -// @include e(close) { -// fill: map-get($--tag-close-color, $type + '-disabled'); -// } -// } -// } -// } -// } - -// @include themes-mixin { -// @include b(tag) { -// @include once { -// @include tag-size-mixin("small"); -// @include tag-size-mixin("medium"); -// @include tag-size-mixin("large"); -// white-space: nowrap; -// position: relative; -// padding: 0 7px; -// border-radius: $--n-tag-border-radius; -// box-sizing: border-box; -// cursor: default; -// display: inline-block; -// transition: background-color .2s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier; -// @include e(close) { -// cursor: pointer; -// } -// @include m(checkable) { -// cursor: pointer; -// } -// @include m(disabled) { -// cursor: not-allowed !important; -// @include e(close) { -// cursor: not-allowed !important; -// } -// @include m(checkable) { -// opacity: .4; -// } -// } -// @include m(closable) { -// padding-right: 18px; -// @include e(close) { -// transition: fill .2s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier; -// right: 3px; -// top: 50%; -// transform: translateY(-50%); -// height: 14px; -// width: 14px; -// line-height: 14px; -// position: absolute; -// } -// } -// } -// @include tag-type-mixin('default'); -// @include tag-type-mixin('info'); -// @include tag-type-mixin('success'); -// @include tag-type-mixin('warning'); -// @include tag-type-mixin('error'); -// @include m(checkable) { -// @include once { -// box-shadow: none; -// } -// color: map-get($--tag-text-color, 'checkable-default'); -// background-color: map-get($--tag-background-color, 'checkable-default'); -// @include not-m(disabled) { -// &:hover { -// @include not-m(checked) { -// color: map-get($--tag-text-color, 'checkable-hover'); -// } -// background-color: map-get($--tag-background-color, 'checkable-hover'); -// } -// &:active { -// @include not-m(checked) { -// color: map-get($--tag-text-color, 'checkable-active'); -// } -// background-color: map-get($--tag-background-color, 'checkable-active'); -// } -// } -// @include m(checked) { -// color: map-get($--tag-text-color, 'checkable-active'); -// background-color: map-get($--tag-background-color, 'checkable-active'); -// @include not-m(disabled) { -// &:hover { -// background-color: map-get($--tag-background-color, 'checkable-checked-hover'); -// } -// &:active { -// background-color: map-get($--tag-background-color, 'checkable-checked-active'); -// } -// } -// } -// } -// } -// } - -// @include b(dynamic-tags) { -// display: inline-flex; -// } \ No newline at end of file diff --git a/src/_styles/Thing.scss b/src/_styles/Thing.scss deleted file mode 100644 index c702b26ab..000000000 --- a/src/_styles/Thing.scss +++ /dev/null @@ -1,64 +0,0 @@ -// @import "./mixins/mixins.scss"; - -// @include themes-mixin { -// @include b(thing) { -// @include once { -// display: flex; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// font-size: 14px; -// @include b(thing-avatar) { -// margin-right: 12px; -// margin-top: 2px; -// } -// @include b(thing-avatar-header-wrapper) { -// display: flex; -// flex-wrap: nowrap; -// @include b(thing-header-wrapper) { -// flex: 1; -// } -// } -// @include b(thing-main) { -// flex-grow: 1; -// @include b(thing-header) { -// display: flex; -// margin-bottom: 4px; -// @include e(title) { -// font-size: 16px; -// font-weight: $--n-strong-weight; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// } -// justify-content: space-between; -// align-items: center; -// } -// @include e(description) { -// &:not(:last-child) { -// margin-bottom: 4px; -// } -// } -// @include e(content) { -// &:not(:first-child) { -// margin-top: 12px; -// } -// } -// @include e(footer) { -// &:not(:first-child) { -// margin-top: 12px; -// } -// } -// @include e(action) { -// &:not(:first-child) { -// margin-top: 12px; -// } -// } -// } -// } -// color: $--thing-text-color; -// @include b(thing-main) { -// @include b(thing-header) { -// @include e(title) { -// color: $--thing-header-text-color; -// } -// } -// } -// } -// } diff --git a/src/_styles/Time.scss b/src/_styles/Time.scss deleted file mode 100644 index 1b84c097f..000000000 --- a/src/_styles/Time.scss +++ /dev/null @@ -1 +0,0 @@ -// @import './mixins/mixins.scss'; diff --git a/src/_styles/TimePicker.scss b/src/_styles/TimePicker.scss deleted file mode 100644 index 9b06f3383..000000000 --- a/src/_styles/TimePicker.scss +++ /dev/null @@ -1,120 +0,0 @@ -// @import "./mixins/mixins.scss"; - -// @include themes-mixin { -// @include once { -// @include b(time-picker) { -// position: relative; -// display: inline-block; -// } -// } -// @include b(time-picker) { -// @include m(invalid) { -// & > { -// @include b(input) { -// @include e(input) { -// @include once { -// text-decoration: line-through; -// } -// text-decoration-color: map-get($--time-picker-text-decoration-color, 'default'); -// } -// } -// } -// } -// @include m(transition-disabled) { -// & > { -// @include b(input) { -// input { -// transition: none; -// } -// } -// } -// } -// } -// @include b(time-picker-selector) { -// @include once { -// outline: none; -// font-size: 12px; -// border-radius: $--n-time-picker-border-radius; -// margin: 4px 0; -// min-width: 104px; -// overflow: hidden; -// transform: $--n-transform-debounce-scale; -// @include fade-in-scale-up-transition(time-picker); -// @include b(time-picker-selector-actions) { -// height: 38px; -// align-items: center; -// display: flex; -// justify-content: space-evenly; -// @include e(confirm) { -// @include m(disabled) { -// cursor: not-allowed; -// opacity: 0.5; -// } -// } -// } -// } -// background-color: $--time-picker-background-color; -// box-shadow: $--time-picker-box-shadow; -// @include b(time-picker-selector-time) { -// @include once { -// height: 224px; -// display: flex; -// position: relative; -// } -// border-bottom: 1px solid $--time-picker-divider-color; -// } -// @include b(time-picker-selector-time-row) { -// @include once { -// flex-grow: 1; -// min-width: 52px; -// height: 224px; -// flex-direction: column; -// transition: box-shadow .3s $--n-ease-in-out-cubic-bezier; -// @include m(transition-disabled) { -// @include e(item) { -// transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier; -// } -// } -// } -// @include e(item) { -// @include once { -// cursor: pointer; -// height: 32px; -// display: flex; -// align-items: center; -// justify-content: center; -// transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, text-decoration-color .3s $--n-ease-in-out-cubic-bezier; -// background: transparent; -// } -// text-decoration-color: transparent; -// color: map-get($--time-picker-text-color, 'default'); -// @include not-m(disabled) { -// &:hover { -// background-color: map-get($--time-picker-item-background-color, 'hover'); -// } -// } -// @include m(active) { -// background-color: map-get($--time-picker-item-background-color, 'hover'); -// color: map-get($--time-picker-text-color, 'active'); -// } -// @include m(disabled) { -// opacity: $--time-picker-item-disabled-opacity; -// @include once { -// cursor: not-allowed; -// } -// } -// } -// @include m(invalid) { -// @include e(item) { -// @include m(active) { -// @include once { -// text-decoration: line-through; -// } -// background-color: map-get($--time-picker-item-background-color, 'invalid'); -// text-decoration-color: map-get($--time-picker-text-decoration-color, 'active'); -// } -// } -// } -// } -// } -// } diff --git a/src/_styles/Timeline.scss b/src/_styles/Timeline.scss deleted file mode 100644 index 9b8efdce4..000000000 --- a/src/_styles/Timeline.scss +++ /dev/null @@ -1,136 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @mixin timeline-type-mixin ($type) { -// @include m($type + '-type') { -// @include b(timeline-item-timeline) { -// @include e(circle) { -// border-color: map-get($--timeline-item-circle-border-color, $type); -// } -// } -// } -// } - -// @mixin timeline-size-mixin ($size) { -// @include m($size + '-size') { -// @include b(timeline-item) { -// @include b(timeline-item-content) { -// @include e(title) { -// margin-top: map-get($--n-timeline-header-margin-top, $size) -// } -// @include e(title) { -// font-size: map-get($--n-timeline-header-font-size, $size); -// } -// } -// } -// } -// } - -// @include themes-mixin { -// @include b(timeline) { -// @include once { -// @include timeline-size-mixin ("medium"); -// @include timeline-size-mixin ("large"); -// position: relative; -// width: 100%; -// display: flex; -// flex-direction: column; -// @include m(right-placement) { -// @include b(timeline-item) { -// @include b(timeline-item-content) { -// text-align: right; -// margin-right: 26px; -// } -// @include b(timeline-item-timeline) { -// width: 14px; -// right: 0; -// } -// } -// } -// @include m(left-placement) { -// @include b(timeline-item) { -// @include b(timeline-item-content) { -// margin-left: 26px; -// } -// @include b(timeline-item-timeline) { -// left: 0; -// } -// } -// } -// } -// @include b(timeline-item) { -// @include timeline-type-mixin('default'); -// @include timeline-type-mixin('success'); -// @include timeline-type-mixin('info'); -// @include timeline-type-mixin('warning'); -// @include timeline-type-mixin('error'); -// @include once { -// position: relative; -// &:last-child { -// @include b(timeline-item-timeline) { -// @include e(line) { -// display: none; -// } -// } -// } -// } -// @include b(timeline-item-content) { -// @include e(title) { -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// font-size: 14px; -// font-weight: $--n-strong-weight; -// margin-bottom: 6px; -// } -// color: $--timeline-item-title-color; -// } -// @include e(content) { -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// font-size: 14px; -// } -// color: $--timeline-item-content-color; -// } -// @include e(meta) { -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// font-size: 12px; -// margin-top: 6px; -// margin-bottom: 20px; -// } -// color: $--timeline-item-meta-color; -// } -// } -// @include b(timeline-item-timeline) { -// @include once { -// width: 26px; -// position: absolute; -// top: 2px; -// bottom: 0; -// height: 100%; -// } -// @include once { -// @include e(circle) { -// transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier; -// width: 14px; -// height: 14px; -// border-radius: 7px; -// box-sizing: border-box; -// border-style: solid; -// border-width: 2px; -// } -// } -// @include e(line) { -// @include once { -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// position: absolute; -// top: 14px; -// left: 6px; -// bottom: 0px; -// width: 2px; -// } -// background-color: $--timeline-line-background-color; -// } -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Tooltip.scss b/src/_styles/Tooltip.scss deleted file mode 100644 index 9c5cfa890..000000000 --- a/src/_styles/Tooltip.scss +++ /dev/null @@ -1,25 +0,0 @@ -// @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; -// } -// } -// } -// } -// } -// } diff --git a/src/_styles/Transfer.scss b/src/_styles/Transfer.scss deleted file mode 100644 index 8f2d2a8a0..000000000 --- a/src/_styles/Transfer.scss +++ /dev/null @@ -1,353 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @keyframes transfer-slide-in-from-left { -// 0% { -// transform: translateX(-150%); -// } -// 100% { -// transform: translateX(0); -// } -// } - -// @keyframes transfer-slide-out-to-right { -// 0% { -// transform: translateX(0); -// } -// 100% { -// transform: translateX(150%); -// } -// } - -// @keyframes transfer-slide-in-from-right { -// 0% { -// transform: translateX(150%); -// } -// 100% { -// transform: translateX(0); -// } -// } - -// @keyframes transfer-slide-out-to-left { -// 0% { -// transform: translateX(0); -// } -// 100% { -// transform: translateX(-150%); -// } -// } - -// @mixin transfer-animation-mixin($size) { -// @keyframes transfer-height-collapse--#{$size} { -// 0% { -// max-height: map-get($--n-height, $size); -// } -// 100% { -// max-height: 0; -// } -// } - -// @keyframes transfer-height-expand--#{$size} { -// 0% { -// max-height: 0; -// } -// 100% { -// max-height: map-get($--n-height, $size); -// } -// } -// } - -// @mixin transfer-size-mixin($size) { -// @include m($size + '-size') { -// @include m(filterable) { -// @include b(transfer-list) { -// @include b(transfer-list-body) { -// height: map-get($--n-height, $size) * 5.6 + 45px; -// } -// } -// } -// @include b(transfer-list) { -// @include b(transfer-list-header) { -// font-size: map-get($--n-font-size, $size); -// height: map-get($--n-height, $size) + 6px; -// } -// @include b(empty) { -// font-size: map-get($--n-font-size, $size); -// } -// @include b(transfer-list-body) { -// height: map-get($--n-height, $size) * 5.6; -// @include b(transfer-list-item) { -// font-size: map-get($--n-font-size, $size); -// height: map-get($--n-height, $size); -// max-height: map-get($--n-height, $size); -// @include m(source) { -// @include m(enter) { -// animation-name: transfer-height-expand--#{$size}, transfer-slide-in-from-right; -// } -// @include m(leave) { -// animation-name: transfer-height-collapse--#{$size}, transfer-slide-out-to-right; -// } -// } -// @include m(target) { -// @include m(enter) { -// animation-name: transfer-height-expand--#{$size}, transfer-slide-in-from-left; -// } -// @include m(leave) { -// animation-name: transfer-height-collapse--#{$size}, transfer-slide-out-to-left; -// } -// } -// } -// } -// } -// } -// } - -// @include transfer-animation-mixin('small'); -// @include transfer-animation-mixin('medium'); -// @include transfer-animation-mixin('large'); - -// @include themes-mixin { -// @include b(transfer) { -// @include once { -// display: flex; -// width: 444px; -// // @include transfer-size-mixin('small'); -// // @include transfer-size-mixin('medium'); -// // @include transfer-size-mixin('large'); -// } -// @include b(transfer-list) { -// @include once { -// background-clip: padding-box; -// width: calc(50% - 36px); -// position: relative; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// border-radius: $--n-transfer-border-radius; -// @include b(virtual-scroller) { -// height: 100%; -// scrollbar-width: none; -// -moz-scrollbar-width: none; -// &::-webkit-scrollbar { -// width: 0; -// height: 0; -// } -// } -// @include e(border-mask) { -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// position: absolute; -// left: 0; -// right: 0; -// top: 0; -// bottom: 0; -// border-radius: $--n-transfer-border-radius; -// } -// } -// @include e(border-mask) { -// border: 1px solid $--transfer-border-color; -// pointer-events: $--transfer-list-border-mask-pointer-events; -// } -// background-color: map-get($--transfer-list-background-color, 'default'); -// @include b(transfer-list-header) { -// @include once { -// box-sizing: border-box; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier; -// display: flex; -// border-radius: $--n-transfer-border-radius $--n-transfer-border-radius 0 0; -// align-items: center; -// background-clip: padding-box; -// @include e(checkbox) { -// position: relative; -// padding: 0 9px 0 14px; -// @include b(checkbox) { -// display: block; -// } -// } -// } -// background-color: map-get($--transfer-list-header-background-color, 'default'); -// @include e(header) { -// @include once { -// flex: 1; -// line-height: 1; -// font-weight: $--n-strong-weight; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// } -// color: map-get($--transfer-list-header-text-color, 'default'); -// @include m(disabled) { -// color: map-get($--transfer-list-header-text-color, 'disabled'); -// } -// } -// @include e(extra) { -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// font-size: 12px; -// justify-self: flex-end; -// margin-right: 14px; -// white-space: nowrap; -// } -// color: map-get($--transfer-list-header-extra-text-color, 'default'); -// } -// } -// @include b(transfer-list-body) { -// @include b(transfer-filter) { -// border-bottom: 1px solid $--transfer-filter-border-color; -// } -// @include once { -// box-sizing: border-box; -// overflow: hidden; -// position: relative; -// height: 272px; -// display: flex; -// flex-direction: column; -// border-bottom-right-radius: $--n-transfer-border-radius; -// border-bottom-left-radius: $--n-transfer-border-radius; -// @include b(transfer-list-flex-container) { -// flex: 1; -// position: relative; -// @include b(scrollbar) { -// position: absolute; -// left: 0; -// right: 0; -// top: 0; -// bottom: 0; -// height: unset; -// @include b(scrollbar-content) { -// width: 100%; -// } -// } -// @include b(empty) { -// @include fade-in-transition; -// position: absolute; -// left: 50%; -// top: 50%; -// transform: translateY(-50%) translateX(-50%); -// } -// } -// @include b(transfer-filter) { -// padding: 8px 8px; -// box-sizing: border-box; -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// } -// } -// @include b(transfer-list-content) { -// @include once { -// padding: 0; -// margin: 0; -// position: relative; -// @include m(animation-disabled) { -// @include b(transfer-list-item) { -// animation: none !important; -// } -// } -// } -// @include b(transfer-list-item) { -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// position: relative; -// cursor: pointer; -// display: flex; -// align-items: center; -// @include e(extra) { -// text-overflow: ellipsis; -// overflow: hidden; -// white-space: nowrap; -// padding-right: 4px; -// } -// @include m(source) { -// animation-fill-mode: forwards; -// @include m(enter) { -// transform: translateX(150%); -// animation-duration: .25s, .25s; -// animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-out-cubic-bezier; -// animation-delay: 0s, .25s; -// } -// @include m(leave) { -// transform: translateX(-150%); -// animation-duration: .25s, .25s; -// animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-in-cubic-bezier; -// animation-delay: .25s, 0s; -// } -// } -// @include m(target) { -// animation-fill-mode: forwards; -// @include m(enter) { -// transform: translateX(-150%); -// animation-duration: .25s, .25s; -// animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-out-cubic-bezier; -// animation-delay: 0s, .25s; -// } -// @include m(leave) { -// transform: translateX(150%); -// animation-duration: .25s, .25s; -// animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-in-cubic-bezier; -// animation-delay: .25s, 0s; -// } -// } -// } -// color: map-get($--transfer-item-text-color, 'default'); -// @include e(checkbox) { -// @include once { -// position: relative; -// padding: 0 9px 0 14px; -// @include b(checkbox) { -// display: block; -// } -// } -// } -// @include m(disabled) { -// @include once { -// cursor: not-allowed; -// } -// color: map-get($--transfer-item-text-color, 'disabled'); -// } -// } -// } -// } -// } -// @include b(transfer-gap) { -// @include once { -// width: 72px; -// display: flex; -// align-items: center; -// justify-content: center; -// flex-direction: column; -// } -// @include b(transfer-button) { -// @include once { -// width: 36px; -// height: 36px; -// border-radius: 18px; -// cursor: pointer; -// &:first-child { -// margin-bottom: 12px; -// } -// @include m(to) { -// transform: rotate(180deg); -// } -// } -// @include e(icon) { -// @include once { -// pointer-events: none; -// transition: fill .3s $--n-ease-in-out-cubic-bezier; -// } -// fill: map-get($--transfer-gap-button-background-color, 'default'); -// } -// &:hover { -// @include e(icon) { -// fill: map-get($--transfer-gap-button-background-color, 'hover'); -// } -// } -// &:active { -// @include e(icon) { -// fill: map-get($--transfer-gap-button-background-color, 'active'); -// } -// } -// @include m(disabled) { -// @include once { -// cursor: not-allowed; -// } -// @include e(icon) { -// fill: map-get($--transfer-gap-button-background-color, 'disabled') !important; -// } -// } -// } -// } -// } -// } diff --git a/src/_styles/Tree.scss b/src/_styles/Tree.scss deleted file mode 100644 index 8be607590..000000000 --- a/src/_styles/Tree.scss +++ /dev/null @@ -1,160 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(tree) { -// @include once { -// font-size: 14px; -// ul, li { -// margin: 0; -// padding: 0; -// list-style: none; -// } -// @include b(tree-children-wrapper) { -// @include fade-in-height-expand-transition(fade-in-height-expand, .15s); -// margin-left: 16px; -// } -// @include b(tree-node) { -// padding: 3px 0 3px 0; -// &:first-child { -// padding-top: 6px; -// } -// &:last-child { -// padding-bottom: 0; -// } -// } -// } -// @include b(tree-node-switcher) { -// @include once { -// cursor: pointer; -// display: inline-flex; -// height: 24px; -// width: 24px; -// align-items: center; -// justify-content: center; -// transition: transform .15s $--n-ease-in-out-cubic-bezier; -// vertical-align: bottom; -// } -// @include e(icon) { -// @include once { -// position: relative; -// height: 14px; -// width: 14px; -// display: flex; -// } -// @include b(icon) { -// @include once { -// height: 14px; -// width: 14px; -// font-size: 14px; -// @include icon-switch-transition; -// } -// fill: $--tree-node-switcher-color; -// stroke: $--tree-node-switcher-color; -// } -// @include once { -// @include b(base-loading) { -// position: absolute; -// left: 1px; -// top: 1px; -// height: 12px; -// width: 12px; -// @include icon-switch-transition($left: 1px, $top: 1px); -// } -// } -// } -// @include once { -// @include m(hide) { -// visibility: hidden -// } -// @include m(expanded) { -// transform: rotate(90deg); -// } -// } -// } -// @include b(tree-node-checkbox) { -// display: inline-flex; -// height: 24px; -// width: 16px; -// vertical-align: bottom; -// align-items: center; -// justify-content: center; -// margin-right: 4px; -// } -// @include b(tree-node-content) { -// @include once { -// position: relative; -// display: inline-flex; -// height: 24px; -// box-sizing: border-box; -// border-bottom: 3px solid transparent; -// border-top: 3px solid transparent; -// line-height: 24px; -// align-items: center; -// vertical-align: bottom; -// padding: 0 6px; -// cursor: pointer; -// border-radius: $--n-tree-node-border-radius; -// text-decoration-color: transparent; -// text-decoration-line: underline; -// transition: -// color .3s $--n-ease-in-out-cubic-bezier, -// text-decoration-color .3s $--n-ease-in-out-cubic-bezier, -// background-color .3s $--n-ease-in-out-cubic-bezier, -// border-color .3s $--n-ease-in-out-cubic-bezier; -// &:last-child { -// margin-bottom: 0; -// } -// @include e(padding-box) { -// position: absolute; -// top: 0; -// bottom: 0; -// left: 0; -// right: 0; -// background-color: transparent; -// } -// @include e(text) { -// line-height: 1.25; -// border-bottom: 1px solid transparent; -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// } -// @include m(block) { -// width: calc(100% - 24px); -// @include m(checkable) { -// width: calc(100% - 48px); -// } -// } -// } -// color: map-get($--tree-node-content-text-color, 'default'); -// &:hover { -// background-color: map-get($--tree-node-background-color, 'hover'); -// } -// &:active { -// background-color: map-get($--tree-node-background-color, 'active'); -// } -// @include m(hightlight) { -// @include e(text) { -// border-bottom-color: map-get($--tree-node-content-text-color, 'default'); -// } -// } -// @include m(pending) { -// @include once { -// &:hover { -// background-color: transparent; -// } -// } -// @include m(pending-bottom) { -// border-bottom: 3px solid map-get($--tree-node-background-color, 'hover'); -// } -// @include m(pending-top) { -// border-top: 3px solid map-get($--tree-node-background-color, 'hover'); -// } -// @include m(pending-body) { -// background-color: map-get($--tree-node-background-color, 'hover'); -// } -// } -// @include m(selected) { -// background-color: map-get($--tree-node-background-color, 'selected'); -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/Typography.scss b/src/_styles/Typography.scss deleted file mode 100644 index b97d0fa7a..000000000 --- a/src/_styles/Typography.scss +++ /dev/null @@ -1,253 +0,0 @@ -// @import './mixins/mixins.scss'; - -// @mixin header-mixin($level) { -// @include b('h' + $level) { -// @include once { -// font-size: map-get($--n-typography-header-font-size, $level); -// font-weight: $--n-strong-weight; -// margin: map-get($--n-typography-header-margin, $level); -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// &:first-child { -// margin-top: 0 -// } -// } -// color: map-get($--typography-header-text-color, 'default'); -// @include m(prefix-bar) { -// @include once { -// position: relative; -// padding-left: map-get($--n-typography-header-prefix-width, $level); -// @include m(align-text) { -// padding-left: 0; -// &::before { -// left: -(map-get($--n-typography-header-prefix-width, $level)); -// } -// } -// } -// &::before { -// @include once { -// content: ''; -// width: map-get($--n-typography-header-bar-width, $level); -// border-radius: map-get($--n-typography-header-bar-width, $level) / 2; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// left: 0; -// top: 0; -// bottom: 0; -// position: absolute; -// } -// background-color: map-get($--typography-header-prefix-color, 'default'); -// } -// @include m(default-type) { -// &::before { -// background-color: map-get($--typography-header-prefix-color, 'default'); -// } -// } -// @include m(primary-type) { -// &::before { -// background-color: map-get($--typography-header-prefix-color, 'primary'); -// } -// } -// @include m(info-type) { -// &::before { -// background-color: map-get($--typography-header-prefix-color, 'info'); -// } -// } -// @include m(success-type) { -// &::before { -// background-color: map-get($--typography-header-prefix-color, 'success'); -// } -// } -// @include m(warning-type) { -// &::before { -// background-color: map-get($--typography-header-prefix-color, 'warning'); -// } -// } -// @include m(error-type) { -// &::before { -// background-color: map-get($--typography-header-prefix-color, 'error'); -// } -// } -// } -// } -// } - -// @include themes-mixin { -// @include header-mixin('1'); -// @include header-mixin('2'); -// @include header-mixin('3'); -// @include header-mixin('4'); -// @include header-mixin('5'); -// @include header-mixin('6'); -// @include b(p) { -// @include once { -// box-sizing: border-box; -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// margin: 12px 0 16px 0; -// font-size: 14px; -// line-height: 1.75; -// &:first-child { -// margin-top: 0; -// } -// } -// color: map-get($--typography-p-text-color, 'default'); -// @include m(primary-depth) { -// color: map-get($--typography-p-text-color, 'primary-depth'); -// } -// @include m(secondary-depth) { -// color: map-get($--typography-p-text-color, 'secondary-depth'); -// } -// @include m(tertiary-depth) { -// color: map-get($--typography-p-text-color, 'tertiary-depth'); -// } -// } -// @include once { -// @include b(ul) { -// margin: 12px 0; -// &:first-child { -// margin-top: 0; -// } -// &:last-child { -// margin-bottom: 0; -// } -// padding-left: 1.75em; -// @include m(align-text) { -// padding-left: 0; -// } -// } -// @include b(ol) { -// margin: 12px 0; -// &:first-child { -// margin-top: 0; -// } -// &:last-child { -// margin-bottom: 0; -// } -// padding-left: 1.75em; -// @include m(align-text) { -// padding-left: 0; -// } -// } -// } -// @include b(li) { -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// line-height: 1.75em; -// margin-bottom: 0px; -// font-size: 14px; -// } -// color: map-get($--typography-li-text-color, 'default'); -// } -// @include b(a) { -// @include once { -// transition: -// color .3s $--n-ease-in-out-cubic-bezier, -// text-decoration-color .3s $--n-ease-in-out-cubic-bezier; -// cursor: pointer; -// } -// text-decoration-color: map-get($--typography-a-text-color, 'default'); -// color: map-get($--typography-a-text-color, 'default'); -// } -// @include b(text) { -// @include once { -// transition: color .3s $--n-ease-in-out-cubic-bezier; -// @include m(strong) { -// font-weight: $--n-strong-weight; -// color: map-get($--typography-text-text-color, 'strong'); -// } -// @include m(italic) { -// font-style: italic; -// } -// @include m(underline) { -// text-decoration: underline; -// } -// } -// color: map-get($--typography-text-text-color, 'default'); -// @include m(code) { -// @include once { -// line-height: 1.4; -// font-family: $--n-mono-font-family; -// transition: -// color .3s $--n-ease-in-out-cubic-bezier, -// background-color .3s $--n-ease-in-out-cubic-bezier, -// border-color .3s $--n-ease-in-out-cubic-bezier; -// box-sizing: border-box; -// padding: .15em .45em 0 .45em; -// border-radius: $--n-typography-code-border-radius; -// font-size: .9em; -// } -// color: map-get($--typography-code-text-color, 'default'); -// background-color: $--typography-code-background-color; -// border: 1px solid $--typography-code-border-color; -// } -// @include m(default-type) { -// @include m(primary-depth) { -// color: map-get($--typography-text-text-color, 'primary-depth'); -// } -// @include m(secondary-depth) { -// color: map-get($--typography-text-text-color, 'secondary-depth'); -// } -// @include m(tertiary-depth) { -// color: map-get($--typography-text-text-color, 'tertiary-depth'); -// } -// } -// @include not-m(default-type) { -// @include m(primary-depth) { -// opacity: map-get($--typography-text-opacity, 'primary-depth'); -// } -// @include m(secondary-depth) { -// opacity: map-get($--typography-text-opacity, 'secondary-depth'); -// } -// @include m(tertiary-depth) { -// opacity: map-get($--typography-text-opacity, 'tertiary-depth'); -// } -// } -// @include m(primary-type) { -// color: map-get($--typography-text-text-color, 'primary'); -// } -// @include m(info-type) { -// color: map-get($--typography-text-text-color, 'info'); -// } -// @include m(success-type) { -// color: map-get($--typography-text-text-color, 'success'); -// } -// @include m(warning-type) { -// color: map-get($--typography-text-text-color, 'warning'); -// } -// @include m(error-type) { -// color: map-get($--typography-text-text-color, 'error'); -// } -// } -// @include b(hr) { -// @include once { -// margin: 12px 0; -// transition: border-color .3s $--n-ease-in-out-cubic-bezier; -// border-left: none; -// border-right: none; -// border-bottom: none; -// } -// border-top: 1px solid map-get($--typography-hr-border-color, 'default'); -// } -// @include b(blockquote) { -// @include once { -// line-height: 1.75; -// margin: 0; -// margin-top: 12px; -// margin-bottom: 12px; -// box-sizing: border-box; -// transition: -// color .3s $--n-ease-in-out-cubic-bezier, -// border-color .3s $--n-ease-in-out-cubic-bezier; -// &:first-child { -// margin-top: 0; -// } -// &:last-child { -// margin-bottom: 0; -// } -// padding-left: 12px; -// @include m(align-text) { -// margin-left: -16px; -// } -// } -// border-left: 4px solid map-get($--typography-blockquote-prefix-color, 'default'); -// color: map-get($--typography-blockquote-text-color, 'default'); -// } -// } \ No newline at end of file diff --git a/src/_styles/Upload.scss b/src/_styles/Upload.scss deleted file mode 100644 index 66cf44148..000000000 --- a/src/_styles/Upload.scss +++ /dev/null @@ -1,181 +0,0 @@ -// @import 'mixins/mixins.scss'; - -// @include themes-mixin { -// @include b(upload) { -// @include once { -// @include e(file-input) { -// display: block; -// width: 0; -// height: 0; -// opacity: 0; -// } -// @include e(activator) { -// display: inline-block; -// } -// @include m(dragger-inside) { -// @include e(activator) { -// display: block; -// } -// } -// } -// @include b(upload-dragger) { -// @include once { -// cursor: pointer; -// box-sizing: border-box; -// width: 100%; -// text-align: center; -// border-radius: $--n-upload-border-radius; -// padding: 24px; -// transition: -// border-color .3s $--n-ease-in-out-cubic-bezier, -// background-color .3s $--n-ease-in-out-cubic-bezier; -// } -// // ? -// background-color: map-get($--upload-dragger-background-color, 'default'); -// border: 1px dashed map-get($--upload-dragger-border-color, 'default'); -// &:hover { -// border-color: map-get($--upload-dragger-border-color, 'hover'); -// } -// // ? -// } -// @include b(upload-file-list) { -// @include once { -// margin-top: 8px; -// line-height: 1.75; -// } -// @include b(upload-file) { -// @include once { -// // ? -// @include fade-in-height-expand-transition; -// display: block; -// box-sizing: border-box; -// cursor: default; -// padding: 0px 12px 0 6px; -// transition: background-color .3s $--n-ease-in-out-cubic-bezier; -// border-radius: $--n-upload-border-radius; -// @include b(progress) { -// // ? -// @include fade-in-height-expand-transition($fold-padding: true); -// box-sizing: border-box; -// padding-bottom: 6px; -// margin-bottom: 6px; -// } -// } -// &:hover { -// // ? -// background-color: map-get($--upload-file-item-background-color, 'hover'); -// @include once { -// @include b(upload-file-info) { -// @include e(action) { -// opacity: 1; -// } -// } -// } -// } -// // ? -// @include m(error-status) { -// &:hover { -// background-color: map-get($--upload-file-item-background-color, 'error-hover'); -// } -// @include b(upload-file-info) { -// @include e(name) { -// color: map-get($--upload-info-text-color, 'error'); -// } -// } -// } -// @include m(success-status) { -// @include b(upload-file-info) { -// @include e(name) { -// color: map-get($--upload-info-text-color, 'success'); -// } -// } -// } -// // ? -// @include m(with-url) { -// @include once { -// cursor: pointer; -// } -// @include b(upload-file-info) { -// @include e(name) { -// @include once { -// text-decoration: underline; -// } -// color: map-get($--upload-info-text-color, 'success'); -// text-decoration-color: map-get($--upload-info-text-color, 'success'); -// } -// } -// } -// @include b(upload-file-info) { -// @include once { -// position: relative; -// padding-top: 6px; -// padding-bottom: 6px; -// @include e(action) { -// padding-top: inherit; -// padding-bottom: inherit; -// position: absolute; -// right: 0; -// top: 0; -// bottom: 0; -// width: 80px; -// display: flex; -// align-items: center; -// transition: opacity .2s $--n-ease-in-out-cubic-bezier; -// flex-direction: row-reverse; -// opacity: 0; -// @include b(button) { -// // ? -// &:not(:first-child) { -// margin-right: 8px; -// } -// @include b(icon) { -// svg { -// @include icon-switch-transition; -// } -// } -// } -// } -// } -// @include e(name) { -// @include once { -// text-overflow: ellipsis; -// overflow: hidden; -// text-decoration: underline; -// text-decoration-color: transparent; -// font-size: 14px; -// transition: -// color .3s $--n-ease-in-out-cubic-bezier, -// text-decoration-color .3s $--n-ease-in-out-cubic-bezier; -// } -// @include b(icon) { -// @include once { -// font-size: 18px; -// margin-right: 2px; -// vertical-align: middle; -// } -// fill: map-get($--upload-info-icon-color, 'default'); -// stroke: map-get($--upload-info-icon-color, 'default'); -// } -// color: map-get($--upload-info-text-color, 'default'); -// } -// } -// } -// } -// @include m(disabled) { -// opacity: $--upload-disabled-opacity; -// @include once { -// @include e(activator) { -// cursor: not-allowed; -// } -// @include b(upload-file-list) { -// cursor: not-allowed; -// } -// } -// } -// @include m(drag-over) { -// @include b(upload-dragger) { -// border-color: map-get($--upload-dragger-border-color, 'hover'); -// } -// } -// } -// } \ No newline at end of file diff --git a/src/_styles/base.scss b/src/_styles/base.scss deleted file mode 100644 index 86ad117b4..000000000 --- a/src/_styles/base.scss +++ /dev/null @@ -1,33 +0,0 @@ -// @import './themes/common.scss'; -// @import './themes/light/index.scss'; -// @import './mixins/mixins.scss'; - -// body { -// margin: 0; -// font-size: 14px; -// font-family: $--n-font-family; -// } - -// input { -// font-family: $--n-font-family; -// font-size: inherit; -// } - -// 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; -// } -// } \ No newline at end of file diff --git a/src/_styles/index.scss b/src/_styles/index.scss deleted file mode 100644 index ce5fdf136..000000000 --- a/src/_styles/index.scss +++ /dev/null @@ -1 +0,0 @@ -@import './Upload.scss'; \ No newline at end of file diff --git a/src/_styles/mixins/config.scss b/src/_styles/mixins/config.scss deleted file mode 100644 index bc8f205e9..000000000 --- a/src/_styles/mixins/config.scss +++ /dev/null @@ -1,3 +0,0 @@ -$namespace: 'n'; -$element-separator: '__'; -$modifier-separator: '--'; \ No newline at end of file diff --git a/src/_styles/mixins/mixins.scss b/src/_styles/mixins/mixins.scss deleted file mode 100644 index e247132b4..000000000 --- a/src/_styles/mixins/mixins.scss +++ /dev/null @@ -1,122 +0,0 @@ -@import 'config.scss'; -@import '../themes/dark/index.scss'; -@import '../themes/light/index.scss'; -@import '../themes/common.scss'; -@import '../themes/transition.scss'; - -/** - * BEM related mixins - */ -$B: null; -$BE: null; -$block-depth: 0; - -@function block ($block: null) { - @if $block { - @return $namespace + '-' + $block; - } @else if $B { - @return $B; - } -} - -@mixin b($block) { - $block-depth: $block-depth + 1 !global; - $temp-block: $B; - $temp-block-element: $BE; - $B: $namespace + '-' + $block !global; - $BE: $B!global; - @if (not $common-css-attrs-generated) or $block-depth != 1 { - .#{$B} { - @content; - } - } @else { - .#{$namespace}-#{$theme}-theme.#{$B} { - @content - } - } - $B: $temp-block !global; - $BE: $temp-block-element !global; - $block-depth: $block-depth - 1 !global; -} - -@mixin e($elements...) { - $temp-block-element: $BE; - $BEs: ''; - @each $element in $elements { - $BE: $B + $element-separator + $element !global; - .#{$BE} { - @content; - } - } - $BE: $temp-block-element !global; -} - -@mixin m($modifiers...) { - $BEMs: ''; - @for $i from 0 to length($modifiers) { - $modifier: nth($modifiers, $i + 1); - @if $i == 0 { - $BEMs: '&.' + $BE + $modifier-separator + $modifier; - } @else { - $BEMs: $BEMs + ', &.' + $BE + $modifier-separator + $modifier; - } - } - #{$BEMs} { - @content; - } -} - -@mixin not-m($modifier) { - $BEM: ''; - $BEM: '.' + $BE + $modifier-separator + $modifier; - &:not(#{$BEM}) { - @content; - } -} - -/** - * Theme related mixins - */ -$common-css-attrs-generated: false; -$theme: null; -$in-themes-mixin: false; -$theme-names: 'dark'; -/** wait for sass to support dynamic @include mixins, although it may be impossible */ -$fallback-theme: 'light'; - -@mixin themes-mixin() { - $in-themes-mixin: true !global; - $theme: 'light' !global; - // fallback theme is light - @include setup-light-theme(); - @content; - $common-css-attrs-generated: true !global; - @each $theme-name in $theme-names { - @if $theme-name == 'light' { - $theme: $theme-name !global; - @include setup-light-theme(); - @content; - $theme: null !global; - } @else if $theme-name == 'dark' { - $theme: $theme-name !global; - @include setup-dark-theme(); - @content; - $theme: null !global; - } - } - $common-css-attrs-generated: false !global; - $in-themes-mixin: false !global; - $theme: null !global; -} - -@mixin as-modal-content { - &.#{$namespace}-modal-content, &.#{$namespace}-drawer { - @content; - } -} - -@mixin once() { - @if not $common-css-attrs-generated { - @content; - } -} \ No newline at end of file diff --git a/src/_styles/themes/common.scss b/src/_styles/themes/common.scss deleted file mode 100644 index 5ba9f369e..000000000 --- a/src/_styles/themes/common.scss +++ /dev/null @@ -1,315 +0,0 @@ -$--n-font-family: naive-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; -$--n-mono-font-family: naive-ui-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace; - -$--n-strong-weight: 500; - -$--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1); -$--n-ease-out-cubic-bezier: cubic-bezier(0, 0, .2, 1); -$--n-ease-in-cubic-bezier: cubic-bezier(.4, 0, 1, 1); - -$--n-border-radius: 3px; -$--n-light-border-radius: 2px; - -$--n-line-height: 1.75; - -$--n-height: ( - "tiny": 22px, - "small": 28px, - "medium": 34px, - "large": 40px, - "huge": 48px -); - -$--n-font-size: ( - "tiny": 13px, - "small": 14px, - "medium": 14px, - "large": 15px, - "huge": 16px -); - -$--n-icon-transition: (fill .3s $--n-ease-in-out-cubic-bezier, stroke .3s $--n-ease-in-out-cubic-bezier); - -$--n-transform-debounce-scale: scale(0.99999); - -$--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1); -$--n-ease-out-cubic-bezier: cubic-bezier(0, 0, .2, 1); -$--n-ease-in-cubic-bezier: cubic-bezier(.4, 0, 1, 1); - -$--n-popmenu-box-shadow: ( - 0 3px 6px -4px rgba(0, 0, 0, .16), - 0 6px 12px 0 rgba(0, 0, 0, .08), - 0 9px 18px 8px rgba(0, 0, 0, .04) -) !global; - -/** alert */ -$--n-alert-border-radius: $--n-border-radius; - -/** avatar */ -$--n-avatar-border-radius: $--n-border-radius; - -/** button */ -$--n-button-border-radius: $--n-border-radius; -$--n-button-font-size: ( - "tiny": 12px, - "small": 14px, - "medium": 14px, - "large": 15px -) !global; -$--n-button-padding: ( - "tiny": 0 6px, - "small": 0 10px, - "medium": 0 14px, - "large": 0 18px -) !global; -$--n-button-round-padding: ( - "tiny": 0 10px, - "small": 0 14px, - "medium": 0 18px, - "large": 0 22px -) !global; -$--n-button-icon-size: ( - "tiny": 15px, - "small": 18px, - "medium": 18px, - "large": 20px -) !global; - -/** base loading */ -$--n-base-loading-stroke-dashoffset: 500; - -/** base selection */ -$--n-base-selection-border-radius: $--n-border-radius; - -/** base select menu */ -$--n-base-select-menu-border-radius: $--n-border-radius; - -/** card */ -$--n-card-border-radius: $--n-border-radius; -$--n-card-font-size: ( - 'small': 16px, - 'medium': 18px, - 'large': 18px, - 'huge': 18px -); - -$--n-card-margin-left: ( - 'small': 16px, - 'medium': 24px, - 'large': 32px, - 'huge': 40px -); - -$--n-card-margin-top: ( - 'small': 12px, - 'medium': 19px, - 'large': 23px, - 'huge': 27px -); - -$--n-card-margin-bottom: ( - 'small': 12px, - 'medium': 20px, - 'large': 24px, - 'huge': 28px -); - -/** cascader */ -$--n-cascader-border-radius: $--n-border-radius; - -/** checkbox */ -$--n-checkbox-size: ( - 'small': 14px, - 'medium': 14px, - 'large': 16px -); - -/** data table */ -$--n-data-table-border-radius: $--n-border-radius; - -/** date pcicker */ -$--n-date-picker-border-radius: $--n-border-radius; - -/** descriptions */ -$--n-descriptions-border-radius: $--n-border-radius; -$--n-descriptions-bordered-padding: ( - 'small': (8px 12px), - 'medium': (12px 16px), - 'large': (16px 24px), -); -$--n-descriptions-padding: ( - 'small': 8px, - 'medium': 12px, - 'large': 16px, -); - -/** empty */ -$--n-empty-icon-size: ( - 'small': 28px, - 'medium': 34px, - 'large': 40px, - 'huge': 46px -); - -$--n-empty-font-size: ( - 'small': 14px, - 'medium': 14px, - 'large': 15px, - 'huge': 16px -); - -/** input number */ -$--n-input-number-border-radius: $--n-border-radius; -$--n-input-number-button-width: ( - 'small': 24px, - 'medium': 28px, - 'large': 28px -); - -/** input */ -$--n-input-icon-size: 16px; -$--n-input-border-radius: $--n-border-radius; - -/** list */ -$--n-list-border-radius: $--n-border-radius; - -/** notification */ -$--n-notification-border-radius: $--n-border-radius; - -/** popover */ -$--n-popover-border-radius: $--n-border-radius; -$--n-popover-arrow-width: 4px; -$--n-popover-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12); -$--n-popover-arrow-box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.12); - -/** radio */ -$--n-radio-button-border-radius: $--n-border-radius; -$--n-radio-size: ( - 'small': 14px, - 'medium': 14px, - 'large': 16px -); - -/** result */ -$--n-result-icon-size: ( - 'small': 64px, - 'medium': 80px, - 'large': 100px, - 'huge': 125px -); - -$--n-result-header-font-size: ( - 'small': 26px, - 'medium': 32px, - 'large': 40px, - 'huge': 48px -); - -$--n-result-description-font-size: ( - 'small': 14px, - 'medium': 14px, - 'large': 15px, - 'huge': 16px -); - -/** slider */ -$--n-slider-rail-height: 4px; -$--n-slider-dot-size: 8px; -$--n-slider-handle-size: 14px; - -/** steps */ -$--n-steps-header-font-size: ( - 'small': 14px, - 'medium': 16px -); - -$--n-steps-indicator-index-font-size: ( - 'small': 14px, - 'medium': 16px -); - -$--n-steps-indicator-size: ( - 'small': 22px, - 'medium': 28px -); - -$--n-steps-indicator-icon-size: ( - 'small': 16px, - 'medium': 22px -); - -/** tab */ -$--n-tabs-border-radius: $--n-border-radius; -$--n-tabs-tab-font-size: ( - 'small': 13px, - 'medium': 14px, - 'large': 16px, - 'huge': 18px -); - -/** tag */ -$--n-tag-border-radius: $--n-light-border-radius; - -/** timeline */ -$--n-timeline-header-font-size: ( - 'medium': 14px, - 'large': 16px -); - -$--n-timeline-header-margin-top: ( - 'medium': 0, - 'large': -1px -); - -/** time picker */ -$--n-time-picker-border-radius: $--n-border-radius; - -/** tooltip */ -$--n-tooltip-border-radius: $--n-border-radius; - -/** transfer */ -$--n-transfer-border-radius: $--n-border-radius; - -/** tree */ -$--n-tree-node-border-radius: $--n-light-border-radius; - -/** typography */ -$--n-typography-code-border-radius: $--n-light-border-radius; -$--n-typography-header-font-size: ( - '1': 30px, - '2': 26px, - '3': 18px, - '4': 16px, - '5': 14px, - '6': 14px -); - -$--n-typography-header-margin: ( - '1': 1.6em 0 .8em 0, - '2': 1.6em 0 .8em 0, - '3': 1.6em 0 1.2em 0, - '4': 1.4em 0 1.2em 0, - '5': 1.4em 0 1.2em 0, - '6': 1.4em 0 1.2em 0 -); - -$--n-typography-header-prefix-width: ( - '1': 16px, - '2': 16px, - '3': 12px, - '4': 12px, - '5': 12px, - '6': 12px -); - -$--n-typography-header-bar-width: ( - '1': 4px, - '2': 4px, - '3': 3px, - '4': 3px, - '5': 3px, - '6': 3px -); - -/** upload */ -$--n-upload-border-radius: $--n-border-radius; \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Affix.scss b/src/_styles/themes/dark/components/Affix.scss deleted file mode 100644 index a89fe4f98..000000000 --- a/src/_styles/themes/dark/components/Affix.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-dark-affix { - // -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Alert.scss b/src/_styles/themes/dark/components/Alert.scss deleted file mode 100644 index 569bb56fb..000000000 --- a/src/_styles/themes/dark/components/Alert.scss +++ /dev/null @@ -1,42 +0,0 @@ -@mixin setup-dark-alert { - $--alert-border-color: ( - 'default': $--n-divider-overlay-color, - 'success': change-color($--n-success-hs-color, $alpha: .35), - 'info': change-color($--n-info-hs-color, $alpha: .35), - 'warning': change-color($--n-warning-hs-color, $alpha: .35), - 'error': change-color($--n-error-hs-color, $alpha: .35) - ) !global; - $--alert-background-color: ( - 'default': $--n-input-overlay-background-color, - 'success': change-color($--n-success-hs-color, $alpha: .25), - 'info': change-color($--n-info-hs-color, $alpha: .25), - 'warning': change-color($--n-warning-hs-color, $alpha: .25), - 'error': change-color($--n-error-hs-color, $alpha: .25) - ) !global; - $--alert-title-text-color: ( - 'default': $--n-primary-text-overlay-color, - 'success': $--n-primary-text-overlay-color, - 'info': $--n-primary-text-overlay-color, - 'warning': $--n-primary-text-overlay-color, - 'error': $--n-primary-text-overlay-color - ) !global; - $--alert-icon-color: ( - 'default': $--n-secondary-text-overlay-color, - 'success': $--n-success-hs-color, - 'info': $--n-info-hs-color, - 'warning': $--n-warning-hs-color, - 'error': $--n-error-hs-color - ) !global; - $--alert-content-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'success': $--n-secondary-text-overlay-color, - 'info': $--n-secondary-text-overlay-color, - 'warning': $--n-secondary-text-overlay-color, - 'error': $--n-secondary-text-overlay-color - ) !global; - $--alert-close-color: ( - 'default': $--n-close-overlay-color, - 'hover': $--n-close-hover-overlay-color, - 'active': $--n-close-overlay-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Anchor.scss b/src/_styles/themes/dark/components/Anchor.scss deleted file mode 100644 index 78fdd5491..000000000 --- a/src/_styles/themes/dark/components/Anchor.scss +++ /dev/null @@ -1,9 +0,0 @@ -@mixin setup-dark-anchor { - $--anchor-rail-background-color: $--n-rail-overlay-color !global; - $--anchor-link-title-text-color: ( - 'default': $--n-primary-text-overlay-color, - 'hover': $--n-primary-color, - 'active': $--n-primary-color - ) !global; - $--anchor-link-background-color: change-color($color: $--n-primary-color, $alpha: .15) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/AutoComplete.scss b/src/_styles/themes/dark/components/AutoComplete.scss deleted file mode 100644 index f5db35e6e..000000000 --- a/src/_styles/themes/dark/components/AutoComplete.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-dark-auto-complete { - // -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Avatar.scss b/src/_styles/themes/dark/components/Avatar.scss deleted file mode 100644 index 20581c9d5..000000000 --- a/src/_styles/themes/dark/components/Avatar.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-dark-avatar { - $--avatar-background-color: $--n-avatar-overlay-background-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/BackTop.scss b/src/_styles/themes/dark/components/BackTop.scss deleted file mode 100644 index b01ad7b96..000000000 --- a/src/_styles/themes/dark/components/BackTop.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin setup-dark-back-top { - $--back-top-button-fill: ( - 'default': rgba(255, 255, 255, 0.3), - 'hover': $--n-primary-color, - 'active': $--n-primary-active-color - ) !global; - $--back-top-box-shadow: ( - 'default': 0 2px 8px 0px rgba(0, 0, 0, .12), - 'hover': 0 2px 12px 0px change-color($--n-primary-color, $alpha: .5), - 'active': 0 2px 12px 0px change-color($--n-primary-color, $alpha: .5) - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Badge.scss b/src/_styles/themes/dark/components/Badge.scss deleted file mode 100644 index ef4ede357..000000000 --- a/src/_styles/themes/dark/components/Badge.scss +++ /dev/null @@ -1,17 +0,0 @@ -@mixin setup-dark-badge { - $--badge-background-color: ( - "default": $--n-error-hs-color, - "info": $--n-info-hs-color, - "success": $--n-success-hs-color, - "error": $--n-error-hs-color, - "warning": $--n-warning-hs-color - ) !global; - $--badge-rippling-color: ( - "default": mix($--n-error-hs-color, white, 75%), - "info": mix($--n-info-hs-color, white, 75%), - "success": mix($--n-success-hs-color, white, 75%), - "error": mix($--n-error-hs-color, white, 75%), - "warning": mix($--n-warning-hs-color, white, 75%) - ) !global; - $--badge-rippling-start-opacity: .6 !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/BaseLoading.scss b/src/_styles/themes/dark/components/BaseLoading.scss deleted file mode 100644 index e544c725c..000000000 --- a/src/_styles/themes/dark/components/BaseLoading.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-dark-base-loading { - $--base-loading-stroke: $--n-primary-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/BaseMenuMask.scss b/src/_styles/themes/dark/components/BaseMenuMask.scss deleted file mode 100644 index b530c17ae..000000000 --- a/src/_styles/themes/dark/components/BaseMenuMask.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin setup-dark-base-menu-mask { - $--base-menu-mask-background-color: change-color($--n-popover-background-color, $alpha: .75) !global; - $--base-menu-mask-text-color: $--n-secondary-text-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/BaseSelectMenu.scss b/src/_styles/themes/dark/components/BaseSelectMenu.scss deleted file mode 100644 index fc55ce8bb..000000000 --- a/src/_styles/themes/dark/components/BaseSelectMenu.scss +++ /dev/null @@ -1,20 +0,0 @@ -@mixin setup-dark-base-select-menu { - $--base-select-menu-option-color: ( - "default": $--n-secondary-text-overlay-color, - "selected": $--n-primary-color, - "active": $--n-primary-color, - "disabled": $--n-disabled-text-overlay-color, - "disabled-selected": change-color($--n-primary-color, $alpha: $--n-disabled-opacity) - ) !global; - $--base-select-menu-option-background-color: ( - 'selected': $--n-pending-overlay-color - ) !global; - $--base-select-menu-group-header-text-color: ( - 'default': $--n-tertiary-text-overlay-color - ) !global; - $--base-select-menu-option-check-mark-color: $--n-primary-color !global; - $--base-select-menu-background-color: $--n-popover-background-color !global; - $--base-select-menu-box-shadow: $--n-popmenu-box-shadow !global; - $--base-select-menu-action-divider-color: $--n-divider-overlay-color !global; - $--base-select-menu-action-text-color: $--n-secondary-text-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/BaseSelection.scss b/src/_styles/themes/dark/components/BaseSelection.scss deleted file mode 100644 index e304e4508..000000000 --- a/src/_styles/themes/dark/components/BaseSelection.scss +++ /dev/null @@ -1,29 +0,0 @@ -@mixin setup-dark-base-selection { - $--base-selection-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'disabled': $--n-disabled-text-overlay-color - ) !global; - $--base-selection-background-color: ( - 'default': $--n-input-overlay-background-color, - 'disabled': $--n-disabled-background-color, - 'active': change-color($--n-primary-color, $alpha: 0.1) - ) !global; - $--base-selection-placeholder-color: ( - 'default': $--n-disabled-text-overlay-color, - 'disabled': change-color($--n-disabled-text-overlay-color, $alpha: alpha($--n-disabled-text-overlay-color) * $--n-disabled-opacity) - ) !global; - $--base-selection-border-mask-box-shadow: ( - 'default': inset 0 0 0 1px transparent, - 'hover': inset 0 0 0 1px $--n-primary-hover-color, - 'active': (inset 0 0 0 1px $--n-primary-hover-color, 0 0 8px 0px change-color($--n-primary-color, $alpha: .3)), - 'focus': inset 0 0 0 1px $--n-primary-hover-color, - 'disabled': inset 0 0 0 1px transparent - ) !global; - $--base-selection-box-shadow: ( - 'default': none, - 'disabled': none - ) !global; - $--base-selection-caret-color: ( - 'default': $--n-primary-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/BaseSuffix.scss b/src/_styles/themes/dark/components/BaseSuffix.scss deleted file mode 100644 index 0e8511539..000000000 --- a/src/_styles/themes/dark/components/BaseSuffix.scss +++ /dev/null @@ -1,14 +0,0 @@ -@mixin setup-dark-base-suffix { - $--base-suffix-cross-color: ( - "default": $--n-icon-overlay-color, - "hover": $--n-primary-color, - "active": $--n-primary-active-color, - "error-hover": $--n-error-hover-color, - "error-active": $--n-error-active-color - ) !global; - $--base-suffix-arrow-color: ( - "default": $--n-icon-overlay-color, - "active": $--n-primary-color, - "error-active": $--n-error-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/BaseTrackingRect.scss b/src/_styles/themes/dark/components/BaseTrackingRect.scss deleted file mode 100644 index f49f23f8b..000000000 --- a/src/_styles/themes/dark/components/BaseTrackingRect.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-dark-base-tracking-rect { - $--base-tracking-rect-background-color: $--n-pending-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Breadcrumb.scss b/src/_styles/themes/dark/components/Breadcrumb.scss deleted file mode 100644 index 5f7b961e1..000000000 --- a/src/_styles/themes/dark/components/Breadcrumb.scss +++ /dev/null @@ -1,10 +0,0 @@ -@mixin setup-dark-breadcrumb { - $--breadcrumb-link-text-color: ( - 'default': $--n-tertiary-text-overlay-color, - 'active': $--n-primary-text-overlay-color, - 'hover': $--n-primary-color - ) !global; - $--breadcrumb-separator-text-color: ( - 'default': $--n-tertiary-text-overlay-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Button.scss b/src/_styles/themes/dark/components/Button.scss deleted file mode 100644 index 2046a74d6..000000000 --- a/src/_styles/themes/dark/components/Button.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-dark-button { - $--button-disabled-opacity: $--n-disabled-opacity !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Card.scss b/src/_styles/themes/dark/components/Card.scss deleted file mode 100644 index ef24f3eac..000000000 --- a/src/_styles/themes/dark/components/Card.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin setup-dark-card { - $--card-background-color: $--n-card-background-color !global; - $--card-text-color: $--n-secondary-text-overlay-color !global; - $--card-title-text-color: $--n-primary-text-overlay-color !global; - $--card-border-color: $--n-divider-overlay-color !global; - $--card-action-background-color: $--n-action-overlay-background-color !global; - $--card-close-color: ( - 'default': $--n-close-overlay-color, - 'hover': $--n-close-hover-overlay-color, - 'active': $--n-close-overlay-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Cascader.scss b/src/_styles/themes/dark/components/Cascader.scss deleted file mode 100644 index bd6d260e4..000000000 --- a/src/_styles/themes/dark/components/Cascader.scss +++ /dev/null @@ -1,17 +0,0 @@ -@mixin setup-dark-cascader { - $--cascader-menu-background-color: $--n-popover-background-color !global; - $--cascader-option-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'active': $--n-primary-color, - 'disabled': $--n-disabled-text-overlay-color, - 'disabled-active': change-color($--n-primary-color, $alpha: $--n-disabled-opacity) - ) !global; - $--cascader-menu-box-shadow: $--n-popmenu-box-shadow !global; - $--cascader-menu-border-color: $--n-divider-overlay-color !global; - $--cascader-menu-tracking-rect-background-color: composite-color( - $--n-popover-background-color, - $--n-pending-overlay-color - ) !global; - $--cascader-option-arrow-background-color: $--n-icon-overlay-color !global; - $--cascader-item-check-mark-color: $--n-primary-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/CheckBox.scss b/src/_styles/themes/dark/components/CheckBox.scss deleted file mode 100644 index 5359e2758..000000000 --- a/src/_styles/themes/dark/components/CheckBox.scss +++ /dev/null @@ -1,21 +0,0 @@ -@mixin setup-dark-checkbox { - $--checkbox-background-color: ( - 'default': transparent, - 'disabled': $--n-disabled-background-color, - 'table': $--n-card-background-color, - 'modal-table': $--n-modal-background-color - ) !global; - $--checkbox-icon-color: ( - 'default': $--n-card-background-color, - 'disabled': $--n-disabled-text-overlay-color - ) !global; - $--checkbox-border-color: ( - 'default': $--n-border-overlay-color, - 'disabled': $--n-border-overlay-color, - 'active': $--n-primary-color - ) !global; - $--checkbox-label-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'disabled': $--n-disabled-text-overlay-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Code.scss b/src/_styles/themes/dark/components/Code.scss deleted file mode 100644 index f25b0475b..000000000 --- a/src/_styles/themes/dark/components/Code.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-dark-code { - $--code-text-color: $--n-secondary-text-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Collapse.scss b/src/_styles/themes/dark/components/Collapse.scss deleted file mode 100644 index 9e95a1b93..000000000 --- a/src/_styles/themes/dark/components/Collapse.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin setup-dark-collapse { - $--collapse-border-color: $--n-divider-overlay-color !global; - $--collapse-header-text-color: $--n-primary-text-overlay-color !global; - $--collapse-content-text-color: $--n-secondary-text-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Confirm.scss b/src/_styles/themes/dark/components/Confirm.scss deleted file mode 100644 index f91f74a4f..000000000 --- a/src/_styles/themes/dark/components/Confirm.scss +++ /dev/null @@ -1,16 +0,0 @@ -@mixin setup-dark-confirm { - $--confirm-title-text-color: $--n-primary-text-overlay-color !global; - $--confirm-text-color: $--n-secondary-text-overlay-color !global; - $--confirm-background-color: $--n-modal-background-color !global; - $--confirm-close-color: ( - 'default': $--n-close-overlay-color, - 'hover': $--n-close-hover-overlay-color, - 'active': $--n-close-overlay-color - ) !global; - $--confirm-icon-color: ( - 'info': $--n-info-color, - 'success': $--n-success-color, - 'warning': $--n-warning-color, - 'error': $--n-error-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/DataTable.scss b/src/_styles/themes/dark/components/DataTable.scss deleted file mode 100644 index 92f24054c..000000000 --- a/src/_styles/themes/dark/components/DataTable.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import '../../../utils/color.scss'; - -@mixin setup-dark-data-table { - $--data-table-border-color: ( - 'default': composite-color($--n-card-background-color, $--n-divider-overlay-color), - 'modal': composite-color($--n-modal-background-color, $--n-divider-overlay-color), - ) !global; - $--data-table-header-text-color: $--n-primary-text-overlay-color !global; - $--data-table-fixed-column-box-shadow-color: rgba(0, 0, 0, .36) !global; - $--data-table-body-background-color: ( - 'default': $--n-card-background-color, - 'modal': $--n-modal-background-color - ) !global; - $--data-table-header-background-color: ( - 'default': composite-color($--n-card-background-color, $--n-table-header-overlay-background-color), - 'hover': composite-color( - composite-color($--n-card-background-color, $--n-table-header-overlay-background-color), - $--n-table-pending-overlay-color - ), - 'modal': composite-color($--n-modal-background-color, $--n-table-header-overlay-background-color), - 'modal-hover': composite-color( - composite-color($--n-modal-background-color, $--n-table-header-overlay-background-color), - $--n-table-pending-overlay-color - ) - ) !global; - $--data-table-icon-button-background-color: ( - 'hover': $--n-table-pending-overlay-color - ) !global; - $--data-table-row-background-color: ( - 'hover': composite-color($--n-card-background-color, $--n-table-pending-overlay-color), - 'modal-hover': composite-color($--n-modal-background-color, $--n-table-pending-overlay-color), - ) !global; - $--data-table-body-text-color: $--n-secondary-text-overlay-color !global; - $--data-table-button-color: ( - 'default': $--n-icon-overlay-color, - 'active': $--n-primary-color - ) !global; -} diff --git a/src/_styles/themes/dark/components/DatePicker.scss b/src/_styles/themes/dark/components/DatePicker.scss deleted file mode 100644 index 1d1744214..000000000 --- a/src/_styles/themes/dark/components/DatePicker.scss +++ /dev/null @@ -1,23 +0,0 @@ -@mixin setup-dark-date-picker { - $--date-picker-background-color: $--n-popover-background-color !global; - $--date-picker-text-color: $--n-secondary-text-overlay-color !global; - $--date-picker-icon-color: $--n-icon-overlay-color !global; - $--date-picker-item-text-color: ( - 'inactive': $--n-disabled-text-overlay-color, - 'default': $--n-secondary-text-overlay-color, - 'active': $--n-popover-background-color, - 'current': $--n-primary-color - ) !global; - $--date-picker-item-sup-color: ( - 'default': $--n-primary-color, - 'active': $--n-popover-background-color - ) !global; - $--date-picker-month-text-color: $--n-primary-text-overlay-color !global; - $--date-picker-item-background-color: ( - 'hover': change-color($--n-primary-color, $alpha: .15), - 'active': $--n-primary-color - ) !global; - $--date-picker-divider-color: $--n-divider-overlay-color !global; - $--date-picker-box-shadow: $--n-popmenu-box-shadow !global; - $--date-picker-text-decoration-color: $--n-secondary-text-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Descriptions.scss b/src/_styles/themes/dark/components/Descriptions.scss deleted file mode 100644 index 1bd4638af..000000000 --- a/src/_styles/themes/dark/components/Descriptions.scss +++ /dev/null @@ -1,10 +0,0 @@ -@mixin setup-dark-descriptions { - $--descriptions-header-background-color: $--n-table-header-overlay-background-color !global; - $--descriptions-header-text-color: $--n-primary-text-overlay-color !global; - $--descriptions-content-text-color: $--n-secondary-text-overlay-color !global; - $--descriptions-content-background-color: ( - 'default': $--n-card-background-color, - 'modal': $--n-modal-background-color - ) !global; - $--descriptions-border-color: $--n-divider-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Divider.scss b/src/_styles/themes/dark/components/Divider.scss deleted file mode 100644 index 0b73efa96..000000000 --- a/src/_styles/themes/dark/components/Divider.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin setup-dark-divider { - $--divider-text-color: $--n-primary-text-overlay-color !global; - $--divider-border-color: $--n-divider-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Drawer.scss b/src/_styles/themes/dark/components/Drawer.scss deleted file mode 100644 index 04d3c682b..000000000 --- a/src/_styles/themes/dark/components/Drawer.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin setup-dark-drawer { - $--drawer-background-color: $--n-modal-background-color !global; - $--drawer-text-color: $--n-secondary-text-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Dropdown.scss b/src/_styles/themes/dark/components/Dropdown.scss deleted file mode 100644 index afcf1966a..000000000 --- a/src/_styles/themes/dark/components/Dropdown.scss +++ /dev/null @@ -1,10 +0,0 @@ -@mixin setup-dark-dropdown { - $--dropdown-item-suffix-fill: $--n-secondary-text-overlay-color !global; - $--dropdown-item-text-color: ( - 'hover': $--n-primary-color, - 'selected': $--n-primary-color - ) !global; - $--dropdown-item-background-color: ( - 'selected': change-color($--n-primary-color, $alpha: .15) - ) !global -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Empty.scss b/src/_styles/themes/dark/components/Empty.scss deleted file mode 100644 index 511ff9920..000000000 --- a/src/_styles/themes/dark/components/Empty.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin setup-dark-empty { - $--empty-text-color: $--n-disabled-text-overlay-color !global; - $--empty-icon-color: $--n-icon-overlay-color !global; - $--empty-extra-text-color: $--n-secondary-text-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Form.scss b/src/_styles/themes/dark/components/Form.scss deleted file mode 100644 index 31529a27a..000000000 --- a/src/_styles/themes/dark/components/Form.scss +++ /dev/null @@ -1,8 +0,0 @@ -@mixin setup-dark-form { - $--form-item-label-text-color: $--n-primary-text-overlay-color !global; - $--form-item-required-asterisk: $--n-error-color !global; - $--form-item-feedback-text-color: ( - 'error': $--n-error-color, - 'warning': $--n-warning-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/GradientText.scss b/src/_styles/themes/dark/components/GradientText.scss deleted file mode 100644 index 5130cefeb..000000000 --- a/src/_styles/themes/dark/components/GradientText.scss +++ /dev/null @@ -1,9 +0,0 @@ -@mixin setup-dark-gradient-text { - $--gradient-text-background-image: ( - "primary": linear-gradient(252deg, $--n-primary-color 0%, $--n-primary-hs-color 100%), - "success": linear-gradient(252deg, $--n-success-color 0%, $--n-success-hs-color 100%), - "warning": linear-gradient(252deg, $--n-warning-color 0%, $--n-warning-hs-color 100%), - "error": linear-gradient(252deg, $--n-error-color 0%, $--n-error-hs-color 100%), - "info": linear-gradient(252deg, $--n-info-color 0%, $--n-info-hs-color 100%) - ) !global; -} diff --git a/src/_styles/themes/dark/components/Input.scss b/src/_styles/themes/dark/components/Input.scss deleted file mode 100644 index b1f2e02b9..000000000 --- a/src/_styles/themes/dark/components/Input.scss +++ /dev/null @@ -1,46 +0,0 @@ -@mixin setup-dark-input { - $--input-color: ( - 'default': $--n-secondary-text-overlay-color, - 'disabled': $--n-disabled-text-overlay-color - ) !global; - $--input-caret-color: ( - 'default': $--n-primary-color, - 'error': $--n-error-color - ) !global; - $--input-placeholder-color: ( - 'default': $--n-placeholder-text-overlay-color, - 'disabled': change-color($--n-placeholder-text-overlay-color, $alpha: alpha($--n-placeholder-text-overlay-color) * $--n-disabled-opacity), - ) !global; - $--input-background-color: ( - 'default': $--n-input-overlay-background-color, - 'disabled': change-color($--n-input-overlay-background-color, $alpha: alpha($--n-input-overlay-background-color) * $--n-disabled-opacity), - 'focus': change-color($--n-primary-color, $alpha: 0.1), - 'error-focus': change-color($--n-error-color, $alpha: 0.1), - ) !global; - $--input-icon-color: ( - 'default': composite-color($--n-base-background-color, $--n-icon-overlay-color), - 'disabled': composite-color( - $--n-base-background-color, - change-color($--n-icon-overlay-color, $alpha: alpha($--n-icon-overlay-color) * $--n-disabled-opacity) - ) - )!global; - $--input-border-mask-border-color: ( - 'default': transparent, - 'hover': $--n-primary-color, - 'focus': $--n-primary-color, - 'disabled': transparent, - 'error-default': transparent, - 'error-hover': $--n-error-color, - 'error-focus': $--n-error-color - ) !global; - $--input-border-mask-box-shadow: ( - 'focus': (0 0 8px 0 change-color($--n-primary-color, $alpha: .3)), - 'error-focus': (0 0 8px 0 change-color($--n-error-color, $alpha: .3)), - ) !global; - $--input-box-shadow: ( - 'default': inset 0 0 0 0 transparent, - 'disabled': inset 0 0 0 1px transparent, - 'error-default': inset 0 0 0 1px $--n-error-color - ) !global; - $--input-group-label-background-color: $--n-input-overlay-background-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/InputNumber.scss b/src/_styles/themes/dark/components/InputNumber.scss deleted file mode 100644 index e64a22719..000000000 --- a/src/_styles/themes/dark/components/InputNumber.scss +++ /dev/null @@ -1,46 +0,0 @@ -@mixin setup-dark-input-number { - $--input-number-border-color: ( - 'default': transparent, - 'hover': $--n-primary-color, - 'focus': $--n-primary-color, - 'error': $--n-error-color - )!global; - $--input-number-text-decoration-color: $--n-secondary-text-overlay-color !global; - $--input-number-placeholder-color: ( - 'default': $--n-placeholder-text-overlay-color, - 'disabled': change-color($--n-placeholder-text-overlay-color, $alpha: alpha($--n-placeholder-text-overlay-color) * 0.6), - ) !global; - $--input-number-background-color: ( - 'default': $--n-input-overlay-background-color, - 'disabled': change-color($--n-input-overlay-background-color, $alpha: alpha($--n-input-overlay-background-color) * 0.6), - 'focus': change-color($--n-primary-color, $alpha: 0.1), - 'error-focus': change-color($--n-error-color, $alpha: 0.1), - ) !global; - $--input-number-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'disabled': $--n-disabled-text-overlay-color - ) !global; - $--input-number-button-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'disabled': $--n-disabled-text-overlay-color, - 'hover': $--n-primary-color, - 'active': $--n-primary-active-color - ) !global; - $--input-number-button-background-color: ( - 'default': $--n-action-overlay-background-color, - 'hover': $--n-action-overlay-background-color, - 'active': $--n-action-overlay-background-color, - 'disabled': $--n-action-overlay-background-color, - ) !global; - $--input-number-caret-color: $--n-primary-color !global; - $--input-number-disabled-opacity: 1 !global; - $--input-number-box-shadow: ( - 'default': inset 0 0 0 0 transparent, - 'hover': inset 0 0 0px 1px $--n-primary-color, - 'focus': (inset 0 0 0px 1px $--n-primary-color, 0 0 8px 0 change-color($--n-primary-color, $alpha: .3)), - 'error-default': inset 0 0 0 1px $--n-error-color, - 'error-hover': inset 0 0 0px 1px $--n-error-color, - 'error-focus': (inset 0 0 0px 1px $--n-error-color, 0 0 8px 0 change-color($--n-primary-color, $alpha: .3)), - "disabled": inset 0 0 0 1px transparent - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Layout.scss b/src/_styles/themes/dark/components/Layout.scss deleted file mode 100644 index edea82f87..000000000 --- a/src/_styles/themes/dark/components/Layout.scss +++ /dev/null @@ -1,20 +0,0 @@ -@mixin setup-dark-layout { - $--layout-text-color: $--n-secondary-text-overlay-color !global; - $--layout-background-color: $--n-body-background-color !global; - $--layout-header-background-color: $--n-card-background-color !global; - $--layout-header-border-color: $--n-divider-overlay-color !global; - $--layout-footer-border-color: $--n-divider-overlay-color !global; - $--layout-sider-border-color: $--n-divider-overlay-color !global; - $--layout-sider-background-color: $--n-card-background-color !global; - $--layout-sider-toggle-button-fill: rgba(255, 255, 255, .3)!global; - $--layout-sider-toggle-bar-background-color: ( - 'default': composite-color( - $--n-body-background-color, - $--n-scrollbar-overlay-background-color - ), - 'hover': composite-color( - $--n-body-background-color, - $--n-scrollbar-hover-overlay-background-color - ), - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/List.scss b/src/_styles/themes/dark/components/List.scss deleted file mode 100644 index a6d0e5c91..000000000 --- a/src/_styles/themes/dark/components/List.scss +++ /dev/null @@ -1,8 +0,0 @@ -@mixin setup-dark-list { - $--list-text-color: $--n-secondary-text-overlay-color !global; - $--list-background-color: ( - 'default': $--n-card-background-color, - 'modal': $--n-modal-background-color - ) !global; - $--list-border-color: $--n-divider-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/LoadingBar.scss b/src/_styles/themes/dark/components/LoadingBar.scss deleted file mode 100644 index 77ee5f654..000000000 --- a/src/_styles/themes/dark/components/LoadingBar.scss +++ /dev/null @@ -1,7 +0,0 @@ -@mixin setup-dark-loading-bar { - $--loading-bar-background-color: ( - "error": red, - "loading": $--n-success-color - ) !global; - $--loading-bar-height: 2px !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Log.scss b/src/_styles/themes/dark/components/Log.scss deleted file mode 100644 index d310298f7..000000000 --- a/src/_styles/themes/dark/components/Log.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin setup-dark-log { - $--log-text-color: $--n-secondary-text-overlay-color !global; - $--log-loader-text-color: $--n-secondary-text-overlay-color !global; - $--log-loader-background-color: $--n-input-overlay-background-color !global; - $--log-loader-border-color: transparent !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Menu.scss b/src/_styles/themes/dark/components/Menu.scss deleted file mode 100644 index e279552d6..000000000 --- a/src/_styles/themes/dark/components/Menu.scss +++ /dev/null @@ -1,26 +0,0 @@ -@mixin setup-dark-menu { - $--menu-item-group-text-color: $--n-tertiary-text-overlay-color !global; - $--menu-item-text-color: $--n-secondary-text-overlay-color !global; - $--menu-horizontal-border-color: $--n-primary-color !global; - $--menu-item-content-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'hover': $--n-primary-color, - 'child-selected': $--n-primary-color, - 'selected': $--n-primary-color, - ) !global; - $--menu-item-content-extra-text-color: ( - 'default': $--n-tertiary-text-overlay-color, - 'hover': $--n-primary-color, - 'child-selected': $--n-primary-color, - 'selected': $--n-primary-color, - ) !global; - $--menu-item-content-icon-color: ( - 'default': $--n-primary-text-overlay-color, - 'hover': $--n-primary-color, - 'child-selected': $--n-primary-color, - 'selected': $--n-primary-color, - 'collapsed': $--n-primary-text-overlay-color, - ) !global; - $--menu-submenu-arrow-color: $--n-primary-color !global; - $--menu-item-background-color: change-color($--n-primary-color, $alpha: .15) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Message.scss b/src/_styles/themes/dark/components/Message.scss deleted file mode 100644 index c6bbae0fa..000000000 --- a/src/_styles/themes/dark/components/Message.scss +++ /dev/null @@ -1,34 +0,0 @@ -@mixin setup-dark-message { - $--message-text-color: ( - "info": $--n-base-text-color, - "success": $--n-base-text-color, - "error": $--n-base-text-color, - "warning": $--n-base-text-color, - "loading": $--n-secondary-text-overlay-color - ) !global; - $--message-icon-color: rgba(255, 255, 255, .5) !global; - $--message-close-color: ( - "default": rgba(255, 255, 255, .5), - "hover": rgba(255, 255, 255, .6), - "active": rgba(255, 255, 255, .4) - ) !global; - $--message-loading-close-color: ( - "default": rgba(255, 255, 255, .5), - "hover": rgba(255, 255, 255, .6), - "active": rgba(255, 255, 255, .4) - ) !global; - $--message-background-color: ( - "info": $--n-info-hs-color, - "success": $--n-success-hs-color, - "error": $--n-error-hs-color, - "warning": $--n-warning-hs-color, - "loading": $--n-popover-background-color - ) !global; - $--message-box-shadow: ( - "info": 0 2px 12px 0 change-color($--n-info-hs-color, $alpha: .4), - "success": 0 2px 12px 0 change-color($--n-success-hs-color, $alpha: .4), - "error": 0 2px 12px 0 change-color($--n-error-hs-color, $alpha: .4), - "warning": 0 2px 12px 0 change-color($--n-warning-hs-color, $alpha: .4), - "loading": $--n-popmenu-box-shadow - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Modal.scss b/src/_styles/themes/dark/components/Modal.scss deleted file mode 100644 index 0981fff00..000000000 --- a/src/_styles/themes/dark/components/Modal.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin setup-dark-modal { - $--modal-background-color: $--n-modal-background-color !global; - $--modal-text-color: $--n-secondary-text-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Notification.scss b/src/_styles/themes/dark/components/Notification.scss deleted file mode 100644 index e8b06c522..000000000 --- a/src/_styles/themes/dark/components/Notification.scss +++ /dev/null @@ -1,20 +0,0 @@ -@mixin setup-dark-notification { - $--notification-avatar-fill: ( - 'default': $--n-secondary-text-overlay-color, - 'success': $--n-success-color, - 'info': $--n-info-color, - 'warning': $--n-warning-color, - 'error': $--n-error-color - ) !global; - $--notification-background-color: $--n-popover-background-color !global; - $--notification-text-color: $--n-secondary-text-overlay-color !global; - $--notification-close-color: ( - 'default': $--n-close-overlay-color, - 'hover': $--n-close-hover-overlay-color, - 'active': $--n-close-overlay-color - ) !global; - $--notification-header-text-color: $--n-primary-text-overlay-color !global; - $--notification-content-text-color: $--n-secondary-text-overlay-color !global; - $--notification-description-text-color: $--n-tertiary-text-overlay-color !global; - $--notification-action-text-color: $--n-secondary-text-overlay-color !global; -} diff --git a/src/_styles/themes/dark/components/Pagination.scss b/src/_styles/themes/dark/components/Pagination.scss deleted file mode 100644 index 4feed4e3b..000000000 --- a/src/_styles/themes/dark/components/Pagination.scss +++ /dev/null @@ -1,22 +0,0 @@ -@mixin setup-dark-pagination { - $--pagination-item-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'hover': $--n-primary-color, - 'active': $--n-primary-color, - 'disabled': $--n-disabled-text-overlay-color - ) !global; - $--pagination-item-background-color: ( - 'default': transparent, - 'active': transparent, - 'disabled': $--n-disabled-background-color - ) !global; - $--pagination-item-border-color: ( - 'default': $--n-border-overlay-color, - 'active': change-color($--n-primary-color, $alpha: $--n-tertiary-opacity), - 'disabled': transparent - ) !global; - $--pagination-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'disabled': $--n-disabled-text-overlay-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Popover.scss b/src/_styles/themes/dark/components/Popover.scss deleted file mode 100644 index 389ee8705..000000000 --- a/src/_styles/themes/dark/components/Popover.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin setup-dark-popover { - $--popover-background-color: $--n-popover-background-color !global; - $--popover-text-color: $--n-secondary-text-overlay-color !global; - $--popover-box-shadow: $--n-popover-box-shadow !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Progress.scss b/src/_styles/themes/dark/components/Progress.scss deleted file mode 100644 index accbc76f1..000000000 --- a/src/_styles/themes/dark/components/Progress.scss +++ /dev/null @@ -1,15 +0,0 @@ -@mixin setup-dark-progress { - $--progress-rail-color: change-color($--n-rail-overlay-color, $alpha: alpha($--n-rail-overlay-color) * 0.6) !global; - $--progress-fill-color: ( - 'default': $--n-info-color, - 'info': $--n-info-color, - 'error': $--n-error-color, - 'warning': $--n-warning-color, - 'success': $--n-success-color - ) !global; - $--progress-indicator-text-color: ( - 'outside': $--n-secondary-text-overlay-color, - 'inside': black - ) !global; - $--progress-line-processing-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .5) 100%) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Radio.scss b/src/_styles/themes/dark/components/Radio.scss deleted file mode 100644 index f926475b5..000000000 --- a/src/_styles/themes/dark/components/Radio.scss +++ /dev/null @@ -1,41 +0,0 @@ -@mixin setup-dark-radio { - $--radio-box-shadow: ( - 'default': inset 0 0 0 1px $--n-border-overlay-color, - 'active': inset 0 0 0 1px $--n-primary-color, - 'focus': (inset 0 0 0 1px $--n-primary-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)), - 'hover': inset 0 0 0 1px $--n-primary-color, - 'disabled': inset 0 0 0 1px $--n-border-overlay-color - ) !global; - $--radio-label-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'disabled': $--n-disabled-text-overlay-color - ) !global; - $--radio-background-color: ( - 'default': transparent, - 'disabled': $--n-disabled-background-color - ) !global; - $--radio-control-background-color: ( - 'active': $--n-primary-color, - 'disabled': $--n-border-overlay-color - ) !global; - $--radio-button-border-color: ( - 'default': $--n-border-overlay-color, - 'active': $--n-primary-color, - 'hover': $--n-primary-color - ) !global; - $--radio-button-background-color: ( - 'default': transparent, - 'active': $--n-primary-color, - ) !global; - $--radio-button-label-color: ( - 'default': $--n-secondary-text-overlay-color, - 'active':$--n-base-background-color, - 'hover': $--n-primary-color - ) !global; - $--radio-disabled-opacity: $--n-disabled-opacity !global; - $--radio-border-mask-width: 1px !global; - $--radio-button-box-shadow: ( - 'focus': (inset 0 0 0 1px $--n-primary-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)), - 'hover': inset 0 0 0 $--radio-border-mask-width $--n-primary-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Result.scss b/src/_styles/themes/dark/components/Result.scss deleted file mode 100644 index db0ccd568..000000000 --- a/src/_styles/themes/dark/components/Result.scss +++ /dev/null @@ -1,10 +0,0 @@ -@mixin setup-dark-result { - $--result-icon-color: ( - 'error': $--n-error-color, - 'success': $--n-success-color, - 'warning': $--n-warning-color, - 'info': $--n-info-color - ) !global; - $--result-header-text-color: $--n-primary-text-overlay-color !global; - $--result-description-text-color: $--n-secondary-text-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Scrollbar.scss b/src/_styles/themes/dark/components/Scrollbar.scss deleted file mode 100644 index 1d23ec1d3..000000000 --- a/src/_styles/themes/dark/components/Scrollbar.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin setup-dark-scrollbar { - $--scrollbar-background-color: ( - "default": $--n-scrollbar-overlay-background-color, - "hover": $--n-scrollbar-hover-overlay-background-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Slider.scss b/src/_styles/themes/dark/components/Slider.scss deleted file mode 100644 index de389568b..000000000 --- a/src/_styles/themes/dark/components/Slider.scss +++ /dev/null @@ -1,25 +0,0 @@ -@mixin setup-dark-slider { - $slider-default-fill-color: mix($--n-primary-color, $--n-card-background-color, 70%); - $--slider-rail-background-color: ( - 'default': $--n-rail-overlay-color, - 'hover': change-color($--n-rail-overlay-color, $alpha: alpha($--n-rail-overlay-color) * 1.5) - ) !global; - $--slider-rail-fill-background-color: ( - 'default': $slider-default-fill-color, - 'hover': $--n-primary-color - ) !global; - $--slider-handle-background-color: $--n-card-background-color !global; - $--slider-handle-box-shadow: ( - 'default': inset 0 0 0 2px $slider-default-fill-color, - 'hover': inset 0 0 0 2px $--n-primary-color, - 'active': (inset 0 0 0 2px $--n-primary-color, 0 0 0 3px change-color($--n-primary-color, $alpha: .2)), - 'focus': (inset 0 0 0 2px $--n-primary-color, 0 0 0 3px change-color($--n-primary-color, $alpha: .2)) - ) !global; - $--slider-indicator-background-color: $--n-popover-background-color !global; - $--slider-indicator-box-shadow: $--n-popover-box-shadow !global; - $--slider-indicator-text-color: $--n-secondary-text-overlay-color !global; - $--slider-dot-box-shadow: ( - 'default': inset 0 0 0 2px $slider-default-fill-color, - 'active': inset 0 0 0 2px $--n-primary-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Spin.scss b/src/_styles/themes/dark/components/Spin.scss deleted file mode 100644 index 49b4f02bb..000000000 --- a/src/_styles/themes/dark/components/Spin.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-dark-spin { - $--spin-spinning-opacity: $--n-disabled-opacity !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Statistic.scss b/src/_styles/themes/dark/components/Statistic.scss deleted file mode 100644 index f0c2b5ec9..000000000 --- a/src/_styles/themes/dark/components/Statistic.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin setup-dark-statistic { - $--statistic-value-label-text-color: $--n-secondary-text-overlay-color !global; - $--statistic-value-prefix-text-color: $--n-primary-text-overlay-color !global; - $--statistic-value-suffix-text-color: $--n-primary-text-overlay-color !global; - $--statistic-value-content-text-color: $--n-primary-text-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Steps.scss b/src/_styles/themes/dark/components/Steps.scss deleted file mode 100644 index 31d9229c4..000000000 --- a/src/_styles/themes/dark/components/Steps.scss +++ /dev/null @@ -1,38 +0,0 @@ -@mixin setup-dark-step { - $--steps-step-border-color: ( - 'process': $--n-primary-color, - 'wait': $--n-disabled-text-overlay-color, - 'finish': $--n-primary-color, - 'error': $--n-error-color - ) !global; - $--steps-step-background-color: ( - 'process': $--n-primary-color, - 'wait': transparent, - 'finish': transparent, - 'error': transparent - ) !global; - $--steps-step-indicator-text-color: ( - 'process': black, - 'wait': $--n-disabled-text-overlay-color, - 'finish': $--n-primary-color, - 'error': $--n-error-color - ) !global; - $--steps-step-splitor-background-color: ( - 'process': $--n-disabled-text-overlay-color, - 'wait': $--n-disabled-text-overlay-color, - 'finish': $--n-primary-color, - 'error': $--n-disabled-text-overlay-color - ) !global; - $--steps-step-content-text-color: ( - 'process': $--n-secondary-text-overlay-color, - 'wait': $--n-disabled-text-overlay-color, - 'finish': $--n-disabled-text-overlay-color, - 'error': $--n-error-color - ) !global; - $--steps-step-title-text-color: ( - 'process': $--n-primary-text-overlay-color, - 'wait': $--n-disabled-text-overlay-color, - 'finish': $--n-tertiary-text-overlay-color, - 'error': $--n-error-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Switch.scss b/src/_styles/themes/dark/components/Switch.scss deleted file mode 100644 index 488baa023..000000000 --- a/src/_styles/themes/dark/components/Switch.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin setup-dark-switch { - $--switch-rail-background-color: ( - "inactive": $--n-rail-overlay-color, - "active": change-color($--n-primary-color, $alpha: .25) - )!global; - $--switch-switcher-background-image: ( - "inactive": linear-gradient(52deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(148,151,155,1) 75%,rgba(148,151,155,1) 100%), - "active": linear-gradient(52deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(120,205,104,1) 75%,rgba(20,166,165,1) 100%) - ) !global; - $--switch-background-position: 100%, 0% !global; - $--switch-switcher-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Table.scss b/src/_styles/themes/dark/components/Table.scss deleted file mode 100644 index 42226e47b..000000000 --- a/src/_styles/themes/dark/components/Table.scss +++ /dev/null @@ -1,10 +0,0 @@ -@mixin setup-dark-table { - $--table-border-color: $--n-divider-overlay-color !global; - $--table-body-background-color: ( - 'default': $--n-card-background-color, - 'modal': $--n-modal-background-color - ) !global; - $--table-header-background-color: $--n-table-header-overlay-background-color !global; - $--table-header-text-color: $--n-primary-text-overlay-color !global; - $--table-body-text-color: $--n-secondary-text-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Tabs.scss b/src/_styles/themes/dark/components/Tabs.scss deleted file mode 100644 index 578b84705..000000000 --- a/src/_styles/themes/dark/components/Tabs.scss +++ /dev/null @@ -1,25 +0,0 @@ -@mixin setup-dark-tabs { - $--tabs-tab-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'active': $--n-primary-color, - 'hover': $--n-primary-color, - 'disabled': $--n-disabled-text-overlay-color, - ) !global; - $--tabs-tab-bar-background-color: $--n-primary-color !global; - $--tabs-tab-scroll-button-color: ( - 'default': $--n-icon-overlay-color, - 'disabled': change-color($--n-icon-overlay-color, $alpha: alpha($--n-icon-overlay-color) * $--n-disabled-opacity) - ) !global; - $--tabs-tab-close-button-color: ( - 'default': $--n-close-overlay-color - ) !global; - $--tabs-card-tab-border-color: transparent !global; - $--tabs-card-tab-background-color: $--n-tab-overlay-background-color !global; - $--tabs-card-tab-border-color: transparent !global; - $--tabs-card-tab-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'active': $--n-primary-text-overlay-color - ) !global; - $--tabs-nav-border-color: $--n-divider-overlay-color !global; - $--tabs-panel-text-color: $--n-secondary-text-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Tag.scss b/src/_styles/themes/dark/components/Tag.scss deleted file mode 100644 index 6fc0f1aac..000000000 --- a/src/_styles/themes/dark/components/Tag.scss +++ /dev/null @@ -1,88 +0,0 @@ -@mixin setup-dark-tag { - $--tag-text-color: ( - 'checkable-default': $--n-secondary-text-overlay-color, - 'checkable-hover': $--n-primary-color, - 'checkable-active': $--n-base-background-color, - 'default': $--n-secondary-text-overlay-color, - 'default-disabled': $--n-disabled-text-overlay-color, - 'success': $--n-success-color, - 'success-disabled': change-color($--n-success-color, $alpha: .3), - 'warning': $--n-warning-color, - 'warning-disabled': change-color($--n-warning-color, $alpha: .3), - 'info': $--n-info-color, - 'info-disabled': change-color($--n-info-color, $alpha: .3), - 'error': $--n-error-color, - 'error-disabled': change-color($--n-error-color, $alpha: .3), - ) !global; - $--tag-background-color: ( - 'checkable-default': transparent, - 'checkable-hover': transparent, - 'checkable-active': $--n-primary-color, - 'checkable-checked-hover': $--n-primary-hover-color, - 'checkable-checked-active': $--n-primary-active-color, - 'default': transparent, - 'default-hover': $--n-pending-overlay-color, - 'default-active': $--n-pending-overlay-color, - 'default-disabled': $--n-disabled-background-color, - 'success': transparent, - 'success-hover': change-color($--n-success-color, $alpha: $--n-pending-opacity), - 'success-active': change-color($--n-success-color, $alpha: $--n-pending-opacity), - 'success-disabled': change-color($--n-success-color, $alpha: $--n-disabled-fill-opacity), - 'warning': transparent, - 'warning-hover': change-color($--n-warning-color, $alpha: $--n-pending-opacity), - 'warning-active': change-color($--n-warning-color, $alpha: $--n-pending-opacity), - 'warning-disabled': change-color($--n-warning-color, $alpha: $--n-disabled-fill-opacity), - 'info': transparent, - 'info-hover': change-color($--n-info-color, $alpha: $--n-pending-opacity), - 'info-active': change-color($--n-info-color, $alpha: $--n-pending-opacity), - 'info-disabled': change-color($--n-info-color, $alpha: $--n-disabled-fill-opacity), - 'error': transparent, - 'error-hover': change-color($--n-error-color, $alpha: $--n-pending-opacity), - 'error-active': change-color($--n-error-color, $alpha: $--n-pending-opacity), - 'error-disabled': change-color($--n-error-color, $alpha: $--n-disabled-fill-opacity) - ) !global; - $--tag-border-color: ( - 'default': $--n-border-overlay-color, - 'default-hover': $--n-border-overlay-color, - 'default-active': $--n-border-overlay-color, - 'default-disabled': $--n-border-overlay-color, - 'success': change-color($--n-success-color, $alpha: $--n-tertiary-opacity), - 'success-hover': change-color($--n-success-color, $alpha: $--n-tertiary-opacity), - 'success-active': change-color($--n-success-color, $alpha: $--n-tertiary-opacity), - 'success-disabled': change-color($--n-success-color, $alpha: $--n-disabled-opacity * $--n-tertiary-opacity), - 'warning': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity), - 'warning-hover': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity), - 'warning-active': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity), - 'warning-disabled': change-color($--n-warning-color, $alpha: $--n-disabled-opacity * $--n-tertiary-opacity), - 'info': change-color($--n-info-color, $alpha: $--n-tertiary-opacity), - 'info-hover': change-color($--n-info-color, $alpha: $--n-tertiary-opacity), - 'info-active': change-color($--n-info-color, $alpha: $--n-tertiary-opacity), - 'info-disabled': change-color($--n-info-color, $alpha: $--n-disabled-opacity * $--n-tertiary-opacity), - 'error': change-color($--n-error-color, $alpha: $--n-tertiary-opacity), - 'error-hover': change-color($--n-error-color, $alpha: $--n-tertiary-opacity), - 'error-active': change-color($--n-error-color, $alpha: $--n-tertiary-opacity), - 'error-disabled': change-color($--n-error-color, $alpha: $--n-disabled-opacity * $--n-tertiary-opacity) - ) !global; - $--tag-close-color: ( - 'default': $--n-close-overlay-color, - 'default-hover': $--n-close-overlay-color, - 'default-active': $--n-close-overlay-color, - 'default-disabled': change-color($--n-close-overlay-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-opacity), - 'success': change-color($--n-success-color, $alpha: $--n-tertiary-opacity), - 'success-hover': change-color($--n-success-color, $alpha: .8), - 'success-active': change-color($--n-success-color, $alpha: .6), - 'success-disabled': change-color($--n-success-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-opacity), - 'warning': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity), - 'warning-hover': change-color($--n-warning-color, $alpha: .8), - 'warning-active': change-color($--n-warning-color, $alpha: .6), - 'warning-disabled': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-opacity), - 'info': change-color($--n-info-color, $alpha: $--n-tertiary-opacity), - 'info-hover': change-color($--n-info-color, $alpha: .8), - 'info-active': change-color($--n-info-color, $alpha: .6), - 'info-disabled': change-color($--n-info-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-opacity), - 'error': change-color($--n-error-color, $alpha: $--n-tertiary-opacity), - 'error-hover': change-color($--n-error-color, $alpha: .8), - 'error-active': change-color($--n-error-color, $alpha: .6), - 'error-disabled': change-color($--n-error-color, $alpha: $--n-tertiary-opacity * $--n-tertiary-opacity) - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Thing.scss b/src/_styles/themes/dark/components/Thing.scss deleted file mode 100644 index c9e73a364..000000000 --- a/src/_styles/themes/dark/components/Thing.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin setup-dark-thing { - $--thing-header-text-color: $--n-primary-text-overlay-color !global; - $--thing-text-color: $--n-secondary-text-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/TimePicker.scss b/src/_styles/themes/dark/components/TimePicker.scss deleted file mode 100644 index 2c5ba85fc..000000000 --- a/src/_styles/themes/dark/components/TimePicker.scss +++ /dev/null @@ -1,17 +0,0 @@ -@mixin setup-dark-time-picker { - $--time-picker-background-color: $--n-popover-background-color !global; - $--time-picker-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'active': $--n-primary-color - ) !global; - $--time-picker-text-decoration-color: ( - 'default': $--n-secondary-text-overlay-color, - 'active': $--n-primary-color - ) !global; - $--time-picker-item-background-color: ( - 'hover': $--n-pending-overlay-color - ) !global; - $--time-picker-divider-color: $--n-divider-overlay-color !global; - $--time-picker-box-shadow: $--n-popmenu-box-shadow !global; - $--time-picker-item-disabled-opacity: $--n-disabled-opacity !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Timeline.scss b/src/_styles/themes/dark/components/Timeline.scss deleted file mode 100644 index 5bbc50986..000000000 --- a/src/_styles/themes/dark/components/Timeline.scss +++ /dev/null @@ -1,13 +0,0 @@ -@mixin setup-dark-timeline { - $--timeline-item-circle-border-color: ( - 'default': $--n-tertiary-text-overlay-color, - 'info': $--n-info-hs-color, - 'error': $--n-error-hs-color, - 'success': $--n-success-hs-color, - 'warning': $--n-warning-hs-color - ) !global; - $--timeline-item-title-color: $--n-primary-text-overlay-color !global; - $--timeline-item-content-color: $--n-secondary-text-overlay-color !global; - $--timeline-item-meta-color: $--n-tertiary-text-overlay-color !global; - $--timeline-line-background-color: $--n-rail-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Tooltip.scss b/src/_styles/themes/dark/components/Tooltip.scss deleted file mode 100644 index 8726146f7..000000000 --- a/src/_styles/themes/dark/components/Tooltip.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin setup-dark-tooltip { - $--tooltip-background-color: $--n-popover-background-color !global; - $--tooltip-text-color: $--n-secondary-text-overlay-color !global; - $--tooltip-box-shadow: $--n-popover-box-shadow !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Transfer.scss b/src/_styles/themes/dark/components/Transfer.scss deleted file mode 100644 index 0f6a06f54..000000000 --- a/src/_styles/themes/dark/components/Transfer.scss +++ /dev/null @@ -1,28 +0,0 @@ -@mixin setup-dark-transfer { - $--transfer-list-background-color: ( - 'default': $--n-input-overlay-background-color - ) !global; - $--transfer-list-header-background-color: ( - 'default': $--n-table-header-overlay-background-color - ) !global; - $--transfer-list-header-text-color: ( - 'default': $--n-primary-text-overlay-color - ) !global; - $--transfer-list-header-extra-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'disabled': $--n-disabled-text-overlay-color - ) !global; - $--transfer-gap-button-background-color: ( - 'default': rgba(255, 255, 255, 0.3), - 'disabled': rgba(255, 255, 255, .15), - 'hover': $--n-primary-color, - 'active': $--n-primary-active-color - ) !global; - $--transfer-item-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'disabled': $--n-disabled-text-overlay-color - ) !global; - $--transfer-filter-border-color: $--n-divider-overlay-color !global; - $--transfer-border-color: transparent !global; - $--transfer-list-border-mask-pointer-events: none !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Tree.scss b/src/_styles/themes/dark/components/Tree.scss deleted file mode 100644 index 6fe1fb7e5..000000000 --- a/src/_styles/themes/dark/components/Tree.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin setup-dark-tree { - $--tree-node-background-color: ( - 'hover': $--n-pending-overlay-color, - 'active': $--n-active-overlay-color, - 'selected': change-color($--n-primary-color, $alpha: .15) - ) !global; - $--tree-node-switcher-color: $--n-tertiary-text-overlay-color !global; - $--tree-node-content-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'disabled': $--n-disabled-text-overlay-color - )!global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Typography.scss b/src/_styles/themes/dark/components/Typography.scss deleted file mode 100644 index 1d3a0900b..000000000 --- a/src/_styles/themes/dark/components/Typography.scss +++ /dev/null @@ -1,55 +0,0 @@ -@mixin setup-dark-typography { - $--typography-header-text-color: ( - 'default': $--n-primary-text-overlay-color - ) !global; - $--typography-header-prefix-color: ( - 'default': $--n-primary-color, - 'primary': $--n-primary-color, - 'error': $--n-error-color, - 'warning': $--n-warning-color, - 'success': $--n-success-color - ) !global; - $--typography-p-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'primary-depth': $--n-primary-text-overlay-color, - 'secondary-depth': $--n-secondary-text-overlay-color, - 'tertiary-depth': $--n-tertiary-text-overlay-color - ) !global; - $--typography-li-text-color: ( - 'default': $--n-secondary-text-overlay-color - ) !global; - $--typography-a-text-color: ( - 'default': $--n-primary-color - ) !global; - $--typography-hr-border-color: ( - 'default': $--n-divider-overlay-color - ) !global; - $--typography-blockquote-text-color: ( - 'default': $--n-secondary-text-overlay-color - ) !global; - $--typography-blockquote-prefix-color: ( - 'default': $--n-border-overlay-color - ) !global; - $--typography-text-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'strong': $--n-primary-text-overlay-color, - 'primary-depth': $--n-primary-text-overlay-color, - 'secondary-depth': $--n-secondary-text-overlay-color, - 'tertiary-depth': $--n-tertiary-text-overlay-color, - 'primary': $--n-primary-color, - 'success': $--n-success-color, - 'warning': $--n-warning-color, - 'error': $--n-error-color, - 'info': $--n-info-color - ) !global; - $--typography-text-opacity: ( - 'primary-depth': $--n-primary-opacity, - 'secondary-depth': $--n-secondary-opacity, - 'tertiary-depth': $--n-tertiary-opacity, - ) !global; - $--typography-code-text-color: ( - 'default': $--n-secondary-text-overlay-color - ) !global; - $--typography-code-background-color: $--n-code-overlay-background-color !global; - $--typography-code-border-color: transparent !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/components/Upload.scss b/src/_styles/themes/dark/components/Upload.scss deleted file mode 100644 index 193015ae4..000000000 --- a/src/_styles/themes/dark/components/Upload.scss +++ /dev/null @@ -1,22 +0,0 @@ -@mixin setup-dark-upload { - $--upload-file-item-background-color: ( - 'hover': change-color($--n-primary-color, $alpha: .15), - 'error-hover': change-color($--n-error-color, $alpha: .15) - ) !global; - $--upload-dragger-border-color: ( - 'default': $--n-border-overlay-color, - 'hover': $--n-primary-color - ) !global; - $--upload-dragger-background-color: ( - 'default': $--n-action-overlay-background-color - ) !global; - $--upload-info-text-color: ( - 'default': $--n-secondary-text-overlay-color, - 'error': $--n-error-color, - 'success': $--n-success-color - ) !global; - $--upload-info-icon-color: ( - 'default': $--n-icon-overlay-color - ) !global; - $--upload-disabled-opacity: $--n-disabled-opacity !global; -} \ No newline at end of file diff --git a/src/_styles/themes/dark/darkColors.scss b/src/_styles/themes/dark/darkColors.scss deleted file mode 100644 index 6de3fe216..000000000 --- a/src/_styles/themes/dark/darkColors.scss +++ /dev/null @@ -1,98 +0,0 @@ -// Caveat: not all the colors will be used in the current theme! Be Careful to -// choose the color you need. - -// Neutral colors are derived from base background color and overlay colors. -// They have different usage. - -@mixin setup-dark-colors { - $--base-text: rgb(255, 255, 255) !global; - - $--alpha-1: .9 !global; - $--alpha-2: .82 !global; - $--alpha-3: .52 !global; - $--alpha-4: .38 !global; - - $--alpha-disabled: .6 !global; - $--alpha-pending: .09 !global; - $--alpha-table-pending: .06 !global; - - // overlay-text - $--overlay-text-1: rgba(255, 255, 255, $--alpha-1) !global; - $--overlay-text-2: rgba(255, 255, 255, $--alpha-2) !global; - $--overlay-text-3: rgba(255, 255, 255, $--alpha-3) !global; - $--overlay-text-4: rgba(255, 255, 255, $--alpha-4) !global; - $--neutral-text-1: create-dark-neutral-color($--overlay-text-1) !global; - $--neutral-text-2: create-dark-neutral-color($--overlay-text-2) !global; - $--neutral-text-3: create-dark-neutral-color($--overlay-text-3) !global; - $--neutral-text-4: create-dark-neutral-color($--overlay-text-4) !global; - - // overlay - $--overlay-avatar: rgba(255, 255, 255, .18) !global; - $--overlay-rail: rgba(255, 255, 255, .20) !global; - $--overlay-border: rgba(255, 255, 255, .24) !global; - $--overlay-divider: rgba(255, 255, 255, .09) !global; - $--overlay-input: rgba(255, 255, 255, .1) !global; - $--overlay-action: rgba(255, 255, 255, .06) !global; - $--overlay-tab: rgba(255, 255, 255, .1) !global; - $--overlay-scrollbar: rgba(255, 255, 255, .2) !global; - $--overlay-scrollbar-hover: rgba(255, 255, 255, .3) !global; - - $--alpha-disabled-fill: alpha($--overlay-input) * $--alpha-disabled !global; - - $--overlay-disabled: rgba(255, 255, 255, $--alpha-disabled-fill) !global; - $--overlay-pending: rgba(255, 255, 255, $--alpha-pending) !global; - $--overlay-table-pending: rgba(255, 255, 255, $--alpha-table-pending) !global; - $--overlay-active: rgba(255, 255, 255, .03) !global; - $--overlay-code: rgba(255, 255, 255, .12) !global; - $--overlay-tag: rgba(255, 255, 255, 0) !global; - - // neutral - $--neutral-base: #000 !global; - $--neutral-popover: rgb(72, 72, 78) !global; - $--neutral-modal: rgb(44, 44, 50) !global; - $--neutral-card: rgb(24, 24, 28) !global; - $--neutral-body: rgb(16, 16, 20) !global; - $--neutral-disabled: create-dark-neutral-color($--overlay-disabled) !global; - $--neutral-border: create-dark-neutral-color($--overlay-border) !global; - $--neutral-divider: create-dark-neutral-color($--overlay-divider) !global; - $--neutral-input: create-dark-neutral-color($--overlay-input) !global; - $--neutral-action: create-dark-neutral-color($--overlay-action) !global; - $--neutral-tag: create-dark-neutral-color($--overlay-tag) !global; - $--neutral-code: create-dark-neutral-color($--overlay-code) !global; - $--neutral-rail: create-dark-neutral-color($--overlay-rail) !global; - - // primary - $--primary-hover: #7fe7c4 !global; - $--primary-default: #63e2b7 !global; - $--primary-active: #5acea7 !global; - $--primary-hs: rgb(42, 148, 125) !global; - - // info - $--info-hover: #8acbec !global; - $--info-default:#70C0E8 !global; - $--info-active: #66afd3 !global; - $--info-hs: rgb(56, 137, 197) !global; - - // error - $--error-hover: #e98b8b !global; - $--error-default:#e88080 !global; - $--error-active: #e57272 !global; - $--error-hs: rgb(208, 58, 82) !global; - - // warning - $--warning-hover: #f5d599 !global; - $--warning-default:#f2c97d !global; - $--warning-active: #e6c260 !global; - $--warning-hs: rgb(240, 138, 0) !global; - - // success - $--success-hover: #7ee7c4 !global; - $--success-default:#64e3b8 !global; - $--success-active: #5acea7 !global; - $--success-hs: rgb(42, 148, 125) !global; -} - -@function create-dark-neutral-color($overlay) { - $neutral-r: 255 * alpha($overlay); - @return rgb($neutral-r, $neutral-r, $neutral-r) -} diff --git a/src/_styles/themes/dark/index.scss b/src/_styles/themes/dark/index.scss deleted file mode 100644 index 44a803658..000000000 --- a/src/_styles/themes/dark/index.scss +++ /dev/null @@ -1,243 +0,0 @@ -@import 'darkColors.scss'; -@import 'components/Button.scss'; -@import 'components/Divider.scss'; -@import 'components/Scrollbar.scss'; -@import 'components/BaseLoading.scss'; -@import 'components/BaseSelectMenu.scss'; -@import 'components/BaseSelection.scss'; -@import 'components/BaseSuffix.scss'; -@import 'components/Tag.scss'; -@import 'components/Table.scss'; -@import 'components/DataTable.scss'; -@import 'components/Popover.scss'; -@import 'components/Tooltip.scss'; -@import 'components/Confirm.scss'; -@import 'components/CheckBox.scss'; -@import 'components/Switch.scss'; -@import 'components/Message.scss'; -@import 'components/LoadingBar.scss'; -@import 'components/Badge.scss'; -@import 'components/Dropdown.scss'; -@import 'components/Input.scss'; -@import 'components/Alert.scss'; -@import 'components/Anchor.scss'; -@import 'components/Pagination.scss'; -@import 'components/GradientText.scss'; -@import 'components/DatePicker.scss'; -@import 'components/TimePicker.scss'; -@import 'components/Progress.scss'; -@import 'components/Timeline.scss'; -@import 'components/BackTop.scss'; -@import 'components/Notification.scss'; -@import 'components/Radio.scss'; -@import 'components/Steps.scss'; -@import 'components/InputNumber.scss'; -@import 'components/Slider.scss'; -@import 'components/Cascader.scss'; -@import 'components/Tabs.scss'; -@import 'components/Statistic.scss'; -@import 'components/Breadcrumb.scss'; -@import 'components/Modal.scss'; -@import 'components/Transfer.scss'; -@import 'components/Menu.scss'; -@import 'components/Thing.scss'; -@import 'components/List.scss'; -@import 'components/Layout.scss'; -@import 'components/Form.scss'; -@import 'components/Empty.scss'; -@import 'components/Drawer.scss'; -@import 'components/Descriptions.scss'; -@import 'components/Card.scss'; -@import 'components/AutoComplete.scss'; -@import 'components/Affix.scss'; -@import 'components/Avatar.scss'; -@import 'components/Collapse.scss'; -@import 'components/Result.scss'; -@import 'components/Tree.scss'; -@import 'components/Typography.scss'; -@import 'components/Upload.scss'; -@import 'components/BaseMenuMask.scss'; -@import 'components/Spin.scss'; -@import 'components/Log.scss'; -@import 'components/Code.scss'; -@import 'components/BaseTrackingRect.scss'; - -@mixin setup-dark-theme($in-js-env: false) { - @include setup-dark-colors(); - $--n-base-background-color: $--neutral-base !global; - - $--n-primary-color: $--primary-default !global; - $--n-primary-hover-color: $--primary-hover !global; - $--n-primary-active-color: $--primary-active !global; - $--n-primary-hs-color: $--primary-hs !global; - - $--n-info-color: $--info-default !global; - $--n-info-hover-color: $--info-hover !global; - $--n-info-active-color: $--info-active !global; - $--n-info-hs-color: $--info-hs !global; - - $--n-success-color: $--success-default !global; - $--n-success-hover-color: $--success-hover !global; - $--n-success-active-color: $--success-active !global; - $--n-success-hs-color: $--success-hs !global; - - $--n-error-color: $--error-default !global; - $--n-error-hover-color: $--error-hover !global; - $--n-error-active-color: $--error-active !global; - $--n-error-hs-color: $--error-hs !global; - - $--n-warning-color: $--warning-default !global; - $--n-warning-hover-color: $--warning-hover !global; - $--n-warning-active-color: $--warning-active !global; - $--n-warning-hs-color: $--warning-hs !global; - - $--n-primary-text-color: $--neutral-text-1 !global; - $--n-secondary-text-color: $--neutral-text-2 !global; - $--n-tertiary-text-color: $--neutral-text-3 !global; - $--n-disabled-text-color: $--neutral-text-4 !global; - $--n-placeholder-text-color: $--neutral-text-4 !global; - $--n-primary-text-overlay-color: $--overlay-text-1 !global; - $--n-secondary-text-overlay-color: $--overlay-text-2 !global; - $--n-tertiary-text-overlay-color: $--overlay-text-3 !global; - $--n-disabled-text-overlay-color: $--overlay-text-4 !global; - $--n-placeholder-text-overlay-color: $--overlay-text-4 !global; - $--n-base-text-color: $--base-text !global; - - $--n-primary-opacity: $--alpha-1 !global; - $--n-secondary-opacity: $--alpha-2 !global; - $--n-tertiary-opacity: $--alpha-3 !global; - $--n-pending-opacity: $--alpha-pending !global; - $--n-disabled-fill-opacity: $--alpha-disabled-fill !global; - - $--n-icon-color: $--neutral-text-4 !global; - $--n-icon-overlay-color: $--overlay-text-4 !global; - - $--n-rail-color: $--neutral-rail !global; - $--n-rail-overlay-color: $--overlay-rail !global; - $--n-divider-color: $--neutral-divider !global; - $--n-divider-overlay-color: $--overlay-divider !global; - $--n-border-color: $--neutral-divider !global; - $--n-border-overlay-color: $--overlay-border !global; - - $--n-scrollbar-overlay-background-color: $--overlay-scrollbar !global; - $--n-scrollbar-hover-overlay-background-color: $--overlay-scrollbar-hover !global; - - $--n-close-hover-color: $--neutral-text-2 !global; - $--n-close-hover-overlay-color: $--overlay-text-2 !global; - $--n-close-color: $--neutral-text-3 !global; - $--n-close-overlay-color: $--overlay-text-3 !global; - $--n-disabled-close-color: $--neutral-text-4 !global; - $--n-disabled-close-overlay-color: $--overlay-text-4 !global; - - $--n-popover-background-color: $--neutral-popover !global; - $--n-table-body-background-color: $--neutral-card !global; - $--n-card-background-color: $--neutral-card !global; - $--n-modal-background-color: $--neutral-modal !global; - $--n-body-background-color: $--neutral-body !global; - $--n-base-background-color: $--neutral-base !global; - $--n-tag-background-color: null !global; - - $--n-input-overlay-background-color: $--overlay-input !global; - $--n-code-overlay-background-color: $--overlay-code !global; - $--n-tab-overlay-background-color: $--overlay-tab !global; - $--n-avatar-overlay-background-color: $--overlay-avatar !global; - $--n-action-overlay-background-color: $--overlay-action !global; - $--n-table-header-overlay-background-color: $--overlay-action !global; - - $--n-pending-overlay-color: $--overlay-pending !global; - $--n-table-pending-overlay-color: $--overlay-table-pending !global; - $--n-active-overlay-color: $--overlay-active !global; - - $--n-disabled-opacity: $--alpha-disabled !global; - $--n-disabled-background-color: $--overlay-disabled !global; - - $--n-message-colored-box-shadow: null !global; - - @include setup-dark-custom-variables(); - - @if ($in-js-env != true) { - @include setup-dark-divider; - @include setup-dark-scrollbar; - @include setup-dark-base-loading; - @include setup-dark-button; - @include setup-dark-base-select-menu; - @include setup-dark-base-selection; - @include setup-dark-base-suffix; - @include setup-dark-tag; - @include setup-dark-table; - @include setup-dark-data-table; - @include setup-dark-popover; - @include setup-dark-tooltip; - @include setup-dark-confirm; - @include setup-dark-checkbox; - @include setup-dark-switch; - @include setup-dark-message; - @include setup-dark-loading-bar; - @include setup-dark-badge; - @include setup-dark-dropdown; - @include setup-dark-input; - @include setup-dark-anchor; - @include setup-dark-alert; - @include setup-dark-pagination; - @include setup-dark-gradient-text; - @include setup-dark-date-picker; - @include setup-dark-time-picker; - @include setup-dark-progress; - @include setup-dark-timeline; - @include setup-dark-back-top; - @include setup-dark-notification; - @include setup-dark-radio; - @include setup-dark-step; - @include setup-dark-input-number; - @include setup-dark-slider; - @include setup-dark-cascader; - @include setup-dark-tabs; - @include setup-dark-statistic; - @include setup-dark-breadcrumb; - @include setup-dark-modal; - @include setup-dark-transfer; - @include setup-dark-menu; - @include setup-dark-thing; - @include setup-dark-list; - @include setup-dark-layout; - @include setup-dark-form; - @include setup-dark-empty; - @include setup-dark-drawer; - @include setup-dark-descriptions; - @include setup-dark-card; - @include setup-dark-auto-complete; - @include setup-dark-affix; - @include setup-dark-avatar; - @include setup-dark-collapse; - @include setup-dark-result; - @include setup-dark-tree; - @include setup-dark-typography; - @include setup-dark-upload; - @include setup-dark-base-menu-mask; - @include setup-dark-spin; - @include setup-dark-log; - @include setup-dark-code; - @include setup-dark-base-tracking-rect; - } -} - -@mixin setup-dark-custom-variables { - @if function-exists('get-primary-color') { - $color: get-primary-color('dark'); - @if $color != null { - $--n-primary-color: $color !global; - } - } - @if function-exists('get-primary-hover-color') { - $color: get-primary-hover-color('dark'); - @if $color != null { - $--n-primary-hover-color: $color !global; - } - } - @if function-exists('get-primary-active-color') { - $color: get-primary-active-color('dark'); - @if $color != null { - $--n-primary-active-color: $color !global; - } - } -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Affix.scss b/src/_styles/themes/light/components/Affix.scss deleted file mode 100644 index 5064cdd02..000000000 --- a/src/_styles/themes/light/components/Affix.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-light-affix { - // -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Alert.scss b/src/_styles/themes/light/components/Alert.scss deleted file mode 100644 index 0d6655227..000000000 --- a/src/_styles/themes/light/components/Alert.scss +++ /dev/null @@ -1,42 +0,0 @@ -@mixin setup-light-alert { - $--alert-border-color: ( - 'default': $--n-divider-overlay-color, - 'success': mix($--n-success-color, $--n-base-background-color, 25%), - 'info': mix($--n-info-color, $--n-base-background-color, 25%), - 'warning': mix($--n-warning-color, $--n-base-background-color, 33%), - 'error': mix($--n-error-color, $--n-base-background-color, 25%) - ) !global; - $--alert-background-color: ( - 'default': $--n-action-overlay-background-color, - 'success': mix($--n-success-color, $--n-base-background-color, 8%), - 'info': mix($--n-info-color, $--n-base-background-color, 8%), - 'warning': mix($--n-warning-color, $--n-base-background-color, 8%), - 'error': mix($--n-error-color, $--n-base-background-color, 8%) - ) !global; - $--alert-title-text-color: ( - 'default': $--n-primary-text-color, - 'success': $--n-primary-text-color, - 'info': $--n-primary-text-color, - 'warning': $--n-primary-text-color, - 'error': $--n-primary-text-color - ) !global; - $--alert-icon-color: ( - 'default': $--n-secondary-text-color, - 'success': $--n-success-color, - 'info': $--n-info-color, - 'warning': $--n-warning-color, - 'error': $--n-error-color - ) !global; - $--alert-content-text-color: ( - 'default': $--n-secondary-text-color, - 'success': $--n-secondary-text-color, - 'info': $--n-secondary-text-color, - 'warning': $--n-secondary-text-color, - 'error': $--n-secondary-text-color, - ) !global; - $--alert-close-color: ( - 'default': $--n-close-color, - 'hover': $--n-close-hover-color, - 'active': $--n-close-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Anchor.scss b/src/_styles/themes/light/components/Anchor.scss deleted file mode 100644 index 887447a6e..000000000 --- a/src/_styles/themes/light/components/Anchor.scss +++ /dev/null @@ -1,9 +0,0 @@ -@mixin setup-light-anchor { - $--anchor-rail-background-color: $--n-rail-overlay-color !global; - $--anchor-link-title-text-color: ( - 'default': $--n-primary-text-color, - 'hover': $--n-primary-color, - 'active': $--n-primary-color - ) !global; - $--anchor-link-background-color: change-color($color: $--n-primary-color, $alpha: .1) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/AutoComplete.scss b/src/_styles/themes/light/components/AutoComplete.scss deleted file mode 100644 index e162bce4c..000000000 --- a/src/_styles/themes/light/components/AutoComplete.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-light-auto-complete { - // -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Avatar.scss b/src/_styles/themes/light/components/Avatar.scss deleted file mode 100644 index 99b93d2ea..000000000 --- a/src/_styles/themes/light/components/Avatar.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin setup-light-avatar { - $--avatar-background-color: composite-color( - $--n-base-background-color, - $--n-avatar-overlay-background-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/BackTop.scss b/src/_styles/themes/light/components/BackTop.scss deleted file mode 100644 index e332c165d..000000000 --- a/src/_styles/themes/light/components/BackTop.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin setup-light-back-top { - $--back-top-button-fill: ( - 'default': rgba(0, 0, 0, .6), - 'hover': rgba(0, 0, 0, .5), - 'active': rgba(0, 0, 0, .7) - ) !global; - $--back-top-box-shadow: ( - 'default': 0 2px 8px 0px rgba(0, 0, 0, .12), - 'hover': 0 2px 12px 0px rgba(0, 0, 0, .18), - 'active': 0 2px 12px 0px rgba(0, 0, 0, .18) - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Badge.scss b/src/_styles/themes/light/components/Badge.scss deleted file mode 100644 index 2b0a09c3a..000000000 --- a/src/_styles/themes/light/components/Badge.scss +++ /dev/null @@ -1,17 +0,0 @@ -@mixin setup-light-badge { - $--badge-background-color: ( - "default": $--n-error-color, - "info": $--n-info-color, - "success": $--n-success-color, - "warning": $--n-warning-color, - "error": $--n-error-color - ) !global; - $--badge-rippling-color: ( - "default": $--n-error-color, - "info": $--n-info-color, - "success": $--n-success-color, - "warning": $--n-warning-color, - "error": $--n-error-color - ) !global; - $--badge-rippling-start-opacity: .4 !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/BaseLoading.scss b/src/_styles/themes/light/components/BaseLoading.scss deleted file mode 100644 index 116914fb4..000000000 --- a/src/_styles/themes/light/components/BaseLoading.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-light-base-loading { - $--base-loading-stroke: $--n-primary-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/BaseMenuMask.scss b/src/_styles/themes/light/components/BaseMenuMask.scss deleted file mode 100644 index 99d7f349b..000000000 --- a/src/_styles/themes/light/components/BaseMenuMask.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin setup-light-base-menu-mask { - $--base-menu-mask-background-color: change-color($--n-popover-background-color, $alpha: .75) !global; - $--base-menu-mask-text-color: $--n-secondary-text-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/BaseSelectMenu.scss b/src/_styles/themes/light/components/BaseSelectMenu.scss deleted file mode 100644 index 3c7c5acc0..000000000 --- a/src/_styles/themes/light/components/BaseSelectMenu.scss +++ /dev/null @@ -1,20 +0,0 @@ -@mixin setup-light-base-select-menu { - $--base-select-menu-option-color: ( - "default": $--n-secondary-text-color, - "selected": $--n-primary-color, - "active": $--n-primary-color, - "disabled": $--n-disabled-text-color, - "disabled-selected": change-color($--n-primary-color, $alpha: $--n-disabled-opacity) - ) !global; - $--base-select-menu-option-background-color: ( - 'selected': $--n-pending-overlay-color - ) !global; - $--base-select-menu-group-header-text-color: ( - 'default': $--n-tertiary-text-color - ) !global; - $--base-select-menu-option-check-mark-color: $--n-primary-color !global; - $--base-select-menu-background-color: $--n-popover-background-color !global; - $--base-select-menu-box-shadow: $--n-popmenu-box-shadow !global; - $--base-select-menu-action-divider-color: $--n-divider-overlay-color !global; - $--base-select-menu-action-text-color: $--n-secondary-text-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/BaseSelection.scss b/src/_styles/themes/light/components/BaseSelection.scss deleted file mode 100644 index 0ea4d9b35..000000000 --- a/src/_styles/themes/light/components/BaseSelection.scss +++ /dev/null @@ -1,33 +0,0 @@ -@mixin setup-light-base-selection { - $--base-selection-text-color: ( - 'default': $--n-secondary-text-color, - 'disabled': $--n-disabled-text-color - ) !global; - $--base-selection-background-color: ( - 'default': $--n-base-background-color, - 'disabled': $--n-disabled-background-color, - 'active': $--n-base-background-color - ) !global; - $--base-selection-placeholder-color: ( - 'default': $--n-placeholder-text-color, - 'disabled': change-color($--n-placeholder-text-color, $alpha: alpha($--n-placeholder-text-color) * $--n-disabled-opacity) - ) !global; - $--base-selection-border-mask-border-color: ( - 'focus': $--n-primary-hover-color, - 'disabled': transparent - ) !global; - $--base-selection-border-mask-box-shadow: ( - 'default': inset 0 0 0 1px transparent, - 'hover': inset 0 0 0 1px $--n-primary-hover-color, - 'active': (inset 0 0 0 1px $--n-primary-hover-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)), - 'focus': inset 0 0 0 1px $--n-primary-hover-color, - 'disabled': inset 0 0 0 1px transparent - ) !global; - $--base-selection-box-shadow: ( - 'default': inset 0 0 0 1px $--n-border-color, - 'disabled': inset 0 0 0 1px $--n-border-color - ) !global; - $--base-selection-caret-color: ( - 'default': $--n-primary-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/BaseSuffix.scss b/src/_styles/themes/light/components/BaseSuffix.scss deleted file mode 100644 index 9f78a66a9..000000000 --- a/src/_styles/themes/light/components/BaseSuffix.scss +++ /dev/null @@ -1,14 +0,0 @@ -@mixin setup-light-base-suffix { - $--base-suffix-cross-color: ( - "default": $--n-icon-overlay-color, - "hover": $--n-primary-hover-color, - "active": $--n-primary-active-color, - "error-hover": $--n-error-hover-color, - "error-active": $--n-error-active-color - ) !global; - $--base-suffix-arrow-color: ( - "default": $--n-icon-overlay-color, - "active": $--n-primary-color, - "error-active": $--n-error-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/BaseTrackingRect.scss b/src/_styles/themes/light/components/BaseTrackingRect.scss deleted file mode 100644 index 42c7f5763..000000000 --- a/src/_styles/themes/light/components/BaseTrackingRect.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin setup-light-base-tracking-rect { - $--base-tracking-rect-background-color: composite-color( - $--n-base-background-color, - $--n-pending-overlay-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Breadcrumb.scss b/src/_styles/themes/light/components/Breadcrumb.scss deleted file mode 100644 index e8591d074..000000000 --- a/src/_styles/themes/light/components/Breadcrumb.scss +++ /dev/null @@ -1,10 +0,0 @@ -@mixin setup-light-breadcrumb { - $--breadcrumb-link-text-color: ( - 'default': $--n-tertiary-text-color, - 'active': $--n-primary-text-color, - 'hover': $--n-primary-color - ) !global; - $--breadcrumb-separator-text-color: ( - 'default': $--n-tertiary-text-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Button.scss b/src/_styles/themes/light/components/Button.scss deleted file mode 100644 index 91b51f6fc..000000000 --- a/src/_styles/themes/light/components/Button.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-light-button { - $--button-disabled-opacity: $--n-disabled-opacity !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Card.scss b/src/_styles/themes/light/components/Card.scss deleted file mode 100644 index 32aa4c9a4..000000000 --- a/src/_styles/themes/light/components/Card.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin setup-light-card { - $--card-background-color: $--n-card-background-color !global; - $--card-text-color: $--n-secondary-text-color !global; - $--card-title-text-color: $--n-primary-text-color !global; - $--card-border-color: $--n-divider-overlay-color !global; - $--card-action-background-color: $--n-action-overlay-background-color !global; - $--card-close-color: ( - 'default': $--n-close-color, - 'hover': $--n-close-hover-color, - 'active': $--n-close-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Cascader.scss b/src/_styles/themes/light/components/Cascader.scss deleted file mode 100644 index 097aa9035..000000000 --- a/src/_styles/themes/light/components/Cascader.scss +++ /dev/null @@ -1,17 +0,0 @@ -@mixin setup-light-cascader { - $--cascader-menu-background-color: $--n-popover-background-color !global; - $--cascader-option-text-color: ( - 'default': $--n-secondary-text-color, - 'active': $--n-primary-color, - 'disabled': $--n-disabled-text-color, - 'disabled-active': change-color($--n-primary-color, $alpha: $--n-disabled-opacity) - ) !global; - $--cascader-menu-box-shadow: $--n-popmenu-box-shadow !global; - $--cascader-menu-border-color: $--n-divider-overlay-color !global; - $--cascader-menu-tracking-rect-background-color: composite-color( - $--n-base-background-color, - $--n-pending-overlay-color - ) !global; - $--cascader-option-arrow-background-color: $--n-disabled-text-color !global; - $--cascader-item-check-mark-color: $--n-primary-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/CheckBox.scss b/src/_styles/themes/light/components/CheckBox.scss deleted file mode 100644 index 320cfc8da..000000000 --- a/src/_styles/themes/light/components/CheckBox.scss +++ /dev/null @@ -1,21 +0,0 @@ -@mixin setup-light-checkbox { - $--checkbox-background-color: ( - 'default': $--n-base-background-color, - 'disabled': $--n-disabled-background-color, - 'table': $--n-card-background-color, - 'modal-table': $--n-modal-background-color - ) !global; - $--checkbox-icon-color: ( - 'default': $--n-base-background-color, - 'disabled': $--n-disabled-text-color - ) !global; - $--checkbox-border-color: ( - 'default': $--n-border-color, - 'disabled': $--n-border-color, - 'active': $--n-primary-color - ) !global; - $--checkbox-label-text-color: ( - 'default': $--n-secondary-text-color, - 'disabled': $--n-disabled-text-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Code.scss b/src/_styles/themes/light/components/Code.scss deleted file mode 100644 index f63e9c6c0..000000000 --- a/src/_styles/themes/light/components/Code.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-light-code { - $--code-text-color: $--n-secondary-text-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Collapse.scss b/src/_styles/themes/light/components/Collapse.scss deleted file mode 100644 index c2b43b17f..000000000 --- a/src/_styles/themes/light/components/Collapse.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin setup-light-collapse { - $--collapse-border-color: $--n-divider-overlay-color !global; - $--collapse-header-text-color: $--n-primary-text-color !global; - $--collapse-content-text-color: $--n-secondary-text-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Confirm.scss b/src/_styles/themes/light/components/Confirm.scss deleted file mode 100644 index 7716a967f..000000000 --- a/src/_styles/themes/light/components/Confirm.scss +++ /dev/null @@ -1,16 +0,0 @@ -@mixin setup-light-confirm { - $--confirm-title-text-color: $--n-primary-text-color !global; - $--confirm-text-color: $--n-secondary-text-color !global; - $--confirm-background-color: $--n-card-background-color !global; - $--confirm-close-color: ( - 'default': $--n-close-color, - 'hover': $--n-close-hover-color, - 'active': $--n-close-color - ) !global; - $--confirm-icon-color: ( - 'info': $--n-info-color, - 'success': $--n-success-color, - 'warning': $--n-warning-color, - 'error': $--n-error-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/DataTable.scss b/src/_styles/themes/light/components/DataTable.scss deleted file mode 100644 index cb13238af..000000000 --- a/src/_styles/themes/light/components/DataTable.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import '../../../utils/color.scss'; - -@mixin setup-light-data-table { - $--data-table-border-color: ( - 'default': composite-color($--n-card-background-color, $--n-divider-overlay-color), - 'modal': composite-color($--n-modal-background-color, $--n-divider-overlay-color), - ) !global; - $--data-table-header-text-color: $--n-primary-text-color !global; - $--data-table-fixed-column-box-shadow-color: rgba(0, 0, 0, .18) !global; - $--data-table-body-background-color: ( - 'default': $--n-card-background-color, - 'modal': $--n-modal-background-color - ) !global; - $--data-table-header-background-color: ( - 'default': composite-color($--n-card-background-color, $--n-table-header-overlay-background-color), - 'hover': composite-color( - composite-color($--n-card-background-color, $--n-table-header-overlay-background-color), - $--n-table-pending-overlay-color - ), - 'modal': composite-color($--n-modal-background-color, $--n-table-header-overlay-background-color), - 'modal-hover': composite-color( - composite-color($--n-modal-background-color, $--n-table-header-overlay-background-color), - $--n-table-pending-overlay-color - ) - ) !global; - $--data-table-icon-button-background-color: ( - 'hover': $--n-table-pending-overlay-color - ) !global; - $--data-table-row-background-color: ( - 'hover': composite-color($--n-card-background-color, $--n-table-pending-overlay-color), - 'modal-hover': composite-color($--n-modal-background-color, $--n-table-pending-overlay-color), - ) !global; - $--data-table-body-text-color: $--n-secondary-text-color !global; - $--data-table-button-color: ( - 'default': $--n-icon-overlay-color, - 'active': $--n-primary-color - ) !global; -} diff --git a/src/_styles/themes/light/components/DatePicker.scss b/src/_styles/themes/light/components/DatePicker.scss deleted file mode 100644 index db5d59603..000000000 --- a/src/_styles/themes/light/components/DatePicker.scss +++ /dev/null @@ -1,23 +0,0 @@ -@mixin setup-light-date-picker { - $--date-picker-background-color: $--n-popover-background-color !global; - $--date-picker-text-color: $--n-secondary-text-color !global; - $--date-picker-icon-color: $--n-icon-overlay-color !global; - $--date-picker-item-text-color: ( - 'inactive': $--n-disabled-text-color, - 'default': $--n-secondary-text-color, - 'active': $--n-modal-background-color, - 'current': $--n-primary-color - ) !global; - $--date-picker-item-sup-color: ( - 'default': $--n-primary-color, - 'active': $--n-base-background-color - ) !global; - $--date-picker-month-text-color: $--n-primary-text-color !global; - $--date-picker-item-background-color: ( - 'hover': change-color($--n-primary-color, $alpha: .1), - 'active': $--n-primary-color - ) !global; - $--date-picker-divider-color: $--n-divider-overlay-color !global; - $--date-picker-box-shadow: $--n-popmenu-box-shadow !global; - $--date-picker-text-decoration-color: $--n-secondary-text-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Descriptions.scss b/src/_styles/themes/light/components/Descriptions.scss deleted file mode 100644 index d4cfce24d..000000000 --- a/src/_styles/themes/light/components/Descriptions.scss +++ /dev/null @@ -1,13 +0,0 @@ -@mixin setup-light-descriptions { - $--descriptions-header-background-color: composite-color( - $--n-card-background-color, - $--n-table-header-overlay-background-color - ) !global; - $--descriptions-header-text-color: $--n-primary-text-color !global; - $--descriptions-content-text-color: $--n-secondary-text-color !global; - $--descriptions-content-background-color: ( - 'default': $--n-card-background-color, - 'modal': $--n-modal-background-color - ) !global; - $--descriptions-border-color: $--n-divider-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Divider.scss b/src/_styles/themes/light/components/Divider.scss deleted file mode 100644 index 4fa8c1d79..000000000 --- a/src/_styles/themes/light/components/Divider.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin setup-light-divider { - $--divider-text-color: $--n-primary-text-color !global; - $--divider-border-color: $--n-divider-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Drawer.scss b/src/_styles/themes/light/components/Drawer.scss deleted file mode 100644 index c25dc618e..000000000 --- a/src/_styles/themes/light/components/Drawer.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin setup-light-drawer { - $--drawer-background-color: $--n-modal-background-color !global; - $--drawer-text-color: $--n-secondary-text-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Dropdown.scss b/src/_styles/themes/light/components/Dropdown.scss deleted file mode 100644 index 7e9d46c9f..000000000 --- a/src/_styles/themes/light/components/Dropdown.scss +++ /dev/null @@ -1,10 +0,0 @@ -@mixin setup-light-dropdown { - $--dropdown-item-suffix-fill: $--n-secondary-text-color !global; - $--dropdown-item-text-color: ( - 'hover': $--n-primary-color, - 'selected': $--n-primary-color - ) !global; - $--dropdown-item-background-color: ( - 'selected': change-color($--n-primary-color, $alpha: .1) - ) !global -} diff --git a/src/_styles/themes/light/components/Empty.scss b/src/_styles/themes/light/components/Empty.scss deleted file mode 100644 index ee298bf38..000000000 --- a/src/_styles/themes/light/components/Empty.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin setup-light-empty { - $--empty-text-color: $--n-disabled-text-color !global; - $--empty-icon-color: $--n-icon-overlay-color !global; - $--empty-extra-text-color: $--n-secondary-text-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Form.scss b/src/_styles/themes/light/components/Form.scss deleted file mode 100644 index 43fddf163..000000000 --- a/src/_styles/themes/light/components/Form.scss +++ /dev/null @@ -1,8 +0,0 @@ -@mixin setup-light-form { - $--form-item-label-text-color: $--n-primary-text-color !global; - $--form-item-required-asterisk: $--n-error-color !global; - $--form-item-feedback-text-color: ( - 'error': $--n-error-color, - 'warning': $--n-warning-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/GradientText.scss b/src/_styles/themes/light/components/GradientText.scss deleted file mode 100644 index 0f1b59fb2..000000000 --- a/src/_styles/themes/light/components/GradientText.scss +++ /dev/null @@ -1,9 +0,0 @@ -@mixin setup-light-gradient-text { - $--gradient-text-background-image: ( - "primary": linear-gradient(252deg, change-color($--n-primary-color, $alpha: .6) 0%, $--n-primary-color 100%), - "success": linear-gradient(252deg, change-color($--n-success-color, $alpha: .6) 0%, $--n-success-color 100%), - "warning": linear-gradient(252deg, change-color($--n-warning-color, $alpha: .6) 0%, $--n-warning-color 100%), - "error": linear-gradient(252deg, change-color($--n-error-color, $alpha: .6) 0%, $--n-error-color 100%), - "info": linear-gradient(252deg, change-color($--n-info-color, $alpha: .6) 0%, $--n-info-color 100%) - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Input.scss b/src/_styles/themes/light/components/Input.scss deleted file mode 100644 index 143595227..000000000 --- a/src/_styles/themes/light/components/Input.scss +++ /dev/null @@ -1,46 +0,0 @@ -@mixin setup-light-input { - $--input-color: ( - 'default': $--n-secondary-text-color, - 'disabled': $--n-disabled-text-color, - ) !global; - $--input-caret-color: ( - 'default': $--n-primary-color, - 'error': $--n-error-color - ) !global; - $--input-placeholder-color: ( - 'default': $--n-placeholder-text-color, - 'disabled': change-color($--n-placeholder-text-color, $alpha: alpha($--n-placeholder-text-color) * $--n-disabled-opacity) - ) !global; - $--input-background-color: ( - 'default': $--n-base-background-color, - 'disabled': $--n-disabled-background-color, - 'focus': $--n-base-background-color, - 'error-focus': $--n-base-background-color, - ) !global; - $--input-icon-color: ( - 'default': composite-color($--n-base-background-color, $--n-icon-overlay-color), - 'disabled': composite-color( - $--n-base-background-color, - change-color($--n-icon-overlay-color, $alpha: alpha($--n-icon-overlay-color) * $--n-disabled-opacity) - ) - )!global; - $--input-border-mask-border-color: ( - 'default': transparent, - 'hover': $--n-primary-hover-color, - 'focus': $--n-primary-hover-color, - 'disabled': transparent, - 'error-default': transparent, - 'error-hover': $--n-error-hover-color, - 'error-focus': $--n-error-hover-color - ) !global; - $--input-border-mask-box-shadow: ( - 'focus': (0 0 0 2px change-color($--n-primary-hover-color, $alpha: .3)), - 'error-focus': (0 0 0 2px change-color($--n-error-hover-color, $alpha: .3)), - ) !global; - $--input-box-shadow: ( - 'default': inset 0 0 0 1px $--n-border-color, - 'disabled': inset 0 0 0 1px $--n-border-color, - 'error-default': inset 0 0 0 1px $--n-error-hover-color, - ) !global; - $--input-group-label-background-color: $--n-action-overlay-background-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/InputNumber.scss b/src/_styles/themes/light/components/InputNumber.scss deleted file mode 100644 index 190ac2979..000000000 --- a/src/_styles/themes/light/components/InputNumber.scss +++ /dev/null @@ -1,46 +0,0 @@ -@mixin setup-light-input-number { - $--input-number-border-color: ( - 'default': $--n-border-color, - 'hover': $--n-primary-color, - 'focus': $--n-primary-color, - 'error': $--n-error-color - )!global; - $--input-number-placeholder-color: ( - "default": $--n-placeholder-text-color, - "disabled": $--n-placeholder-text-color, - ) !global; - $--input-number-text-decoration-color: $--n-secondary-text-color !global; - $--input-number-background-color: ( - 'default': $--n-card-background-color, - 'disabled': $--n-disabled-background-color, - 'focus': $--n-card-background-color, - 'error-focus': $--n-card-background-color, - ) !global; - $--input-number-text-color: ( - 'default': $--n-secondary-text-color, - 'disabled': $--n-disabled-text-color - ) !global; - $--input-number-button-text-color: ( - 'default': $--n-secondary-text-color, - 'disabled': $--n-disabled-text-color, - 'hover': $--n-primary-color, - 'active': $--n-primary-active-color - ) !global; - $--input-number-button-background-color: ( - 'default': $--n-action-overlay-background-color, - 'hover': $--n-action-overlay-background-color, - 'active': $--n-action-overlay-background-color, - 'disabled': $--n-disabled-background-color, - ) !global; - $--input-number-caret-color: $--n-primary-color !global; - $--input-number-disabled-opacity: 1 !global; - $--input-number-box-shadow: ( - "default": inset 0 0 0 1px $--n-border-color, - "hover": inset 0 0 0 1px $--n-primary-hover-color, - "focus": (inset 0 0 0 1px $--n-primary-hover-color, 0 0 0 2px change-color($--n-primary-hover-color, $alpha: .3)), - "error-default": inset 0 0 0 1px $--n-error-hover-color, - "error-hover": inset 0 0 0 1px $--n-error-hover-color, - "error-focus": (inset 0 0 0 1px $--n-error-hover-color, 0 0 0 2px change-color($--n-error-hover-color, $alpha: .3)), - "disabled": inset 0 0 0 1px $--n-border-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Layout.scss b/src/_styles/themes/light/components/Layout.scss deleted file mode 100644 index 65c3e2afe..000000000 --- a/src/_styles/themes/light/components/Layout.scss +++ /dev/null @@ -1,20 +0,0 @@ -@mixin setup-light-layout { - $--layout-text-color: $--n-secondary-text-color !global; - $--layout-background-color: $--n-body-background-color !global; - $--layout-header-background-color: $--n-card-background-color !global; - $--layout-header-border-color: $--n-divider-overlay-color !global; - $--layout-footer-border-color: $--n-divider-overlay-color !global; - $--layout-sider-border-color: $--n-divider-overlay-color !global; - $--layout-sider-background-color: $--n-card-background-color !global; - $--layout-sider-toggle-button-fill: rgba(0, 0, 0, .15) !global; - $--layout-sider-toggle-bar-background-color: ( - 'default': composite-color( - $--n-body-background-color, - $--n-scrollbar-overlay-background-color - ), - 'hover': composite-color( - $--n-body-background-color, - $--n-scrollbar-hover-overlay-background-color - ), - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/List.scss b/src/_styles/themes/light/components/List.scss deleted file mode 100644 index bdc538ed4..000000000 --- a/src/_styles/themes/light/components/List.scss +++ /dev/null @@ -1,8 +0,0 @@ -@mixin setup-light-list { - $--list-text-color: $--n-secondary-text-color !global; - $--list-background-color: ( - 'default': $--n-card-background-color, - 'modal': $--n-modal-background-color - ) !global; - $--list-border-color: $--n-divider-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/LoadingBar.scss b/src/_styles/themes/light/components/LoadingBar.scss deleted file mode 100644 index 730dfc31c..000000000 --- a/src/_styles/themes/light/components/LoadingBar.scss +++ /dev/null @@ -1,7 +0,0 @@ -@mixin setup-light-loading-bar { - $--loading-bar-background-color: ( - "error": $--n-error-color, - "loading": $--n-success-color - ) !global; - $--loading-bar-height: 2px !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Log.scss b/src/_styles/themes/light/components/Log.scss deleted file mode 100644 index 3522c419f..000000000 --- a/src/_styles/themes/light/components/Log.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin setup-light-log { - $--log-text-color: $--n-secondary-text-color !global; - $--log-loader-text-color: $--n-secondary-text-color !global; - $--log-loader-background-color: $--n-modal-background-color !global; - $--log-loader-border-color: $--n-border-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Menu.scss b/src/_styles/themes/light/components/Menu.scss deleted file mode 100644 index 6a9cdf5e7..000000000 --- a/src/_styles/themes/light/components/Menu.scss +++ /dev/null @@ -1,26 +0,0 @@ -@mixin setup-light-menu { - $--menu-item-group-text-color: $--n-tertiary-text-color !global; - $--menu-item-text-color: $--n-secondary-text-color !global; - $--menu-horizontal-border-color: $--n-primary-color !global; - $--menu-item-content-text-color: ( - 'default': $--n-secondary-text-color, - 'hover': $--n-primary-color, - 'child-selected': $--n-primary-color, - 'selected': $--n-primary-color, - ) !global; - $--menu-item-content-extra-text-color: ( - 'default': $--n-tertiary-text-color, - 'hover': $--n-primary-color, - 'child-selected': $--n-primary-color, - 'selected': $--n-primary-color, - ) !global; - $--menu-item-content-icon-color: ( - 'default': $--n-primary-text-color, - 'hover': $--n-primary-color, - 'child-selected': $--n-primary-color, - 'selected': $--n-primary-color, - 'collapsed': $--n-primary-text-color, - ) !global; - $--menu-submenu-arrow-color: $--n-primary-color !global; - $--menu-item-background-color: change-color($--n-primary-color, $alpha: .1) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Message.scss b/src/_styles/themes/light/components/Message.scss deleted file mode 100644 index e982309f5..000000000 --- a/src/_styles/themes/light/components/Message.scss +++ /dev/null @@ -1,34 +0,0 @@ -@mixin setup-light-message { - $--message-text-color: ( - "info": $--n-base-background-color, - "success": $--n-base-background-color, - "error": $--n-base-background-color, - "warning": $--n-base-background-color, - "loading": $--n-secondary-text-color - ) !global; - $--message-icon-color: rgba(255, 255, 255, .45) !global; - $--message-close-color: ( - "default": rgba(255, 255, 255, .5), - "hover": rgba(255, 255, 255, .6), - "active": rgba(255, 255, 255, .4) - ) !global; - $--message-loading-close-color: ( - 'default': $--n-close-color, - 'hover': $--n-close-hover-color, - 'active': $--n-close-color - ) !global; - $--message-background-color: ( - "info": $--n-info-color, - "success": $--n-success-color, - "error": $--n-error-color, - "warning": $--n-warning-color, - "loading": $--n-popover-background-color - ) !global; - $--message-box-shadow: ( - "info": $--n-message-colored-box-shadow, - "success": $--n-message-colored-box-shadow, - "error": $--n-message-colored-box-shadow, - "warning": $--n-message-colored-box-shadow, - "loading": $--n-popmenu-box-shadow - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Modal.scss b/src/_styles/themes/light/components/Modal.scss deleted file mode 100644 index 4f3f07cb8..000000000 --- a/src/_styles/themes/light/components/Modal.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin setup-light-modal { - $--modal-background-color: $--n-modal-background-color !global; - $--modal-text-color: $--n-secondary-text-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Notification.scss b/src/_styles/themes/light/components/Notification.scss deleted file mode 100644 index 1d42244fc..000000000 --- a/src/_styles/themes/light/components/Notification.scss +++ /dev/null @@ -1,20 +0,0 @@ -@mixin setup-light-notification { - $--notification-avatar-fill: ( - 'default': $--n-secondary-text-color, - 'success': $--n-success-color, - 'info': $--n-info-color, - 'warning': $--n-warning-color, - 'error': $--n-error-color - ) !global; - $--notification-background-color: $--n-popover-background-color !global; - $--notification-text-color: $--n-secondary-text-color !global; - $--notification-close-color: ( - 'default': $--n-close-color, - 'hover': $--n-close-hover-color, - 'active': $--n-close-color - ) !global; - $--notification-header-text-color: $--n-primary-text-color !global; - $--notification-content-text-color: $--n-secondary-text-color !global; - $--notification-description-text-color: $--n-tertiary-text-color !global; - $--notification-action-text-color: $--n-secondary-text-color !global; -} diff --git a/src/_styles/themes/light/components/Pagination.scss b/src/_styles/themes/light/components/Pagination.scss deleted file mode 100644 index f29b116a2..000000000 --- a/src/_styles/themes/light/components/Pagination.scss +++ /dev/null @@ -1,22 +0,0 @@ -@mixin setup-light-pagination { - $--pagination-item-text-color: ( - 'default': $--n-secondary-text-color, - 'hover': $--n-primary-color, - 'active': $--n-primary-color, - 'disabled': $--n-disabled-text-color - ) !global; - $--pagination-item-background-color: ( - 'default': $--n-card-background-color, - 'active': $--n-base-background-color, - 'disabled': $--n-disabled-background-color - ) !global; - $--pagination-item-border-color: ( - 'default': $--n-border-color, - 'active': $--n-primary-color, - 'disabled': $--n-border-color - ) !global; - $--pagination-text-color: ( - 'default': $--n-secondary-text-color, - 'disabled': $--n-disabled-text-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Popover.scss b/src/_styles/themes/light/components/Popover.scss deleted file mode 100644 index 23aa3994d..000000000 --- a/src/_styles/themes/light/components/Popover.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin setup-light-popover { - $--popover-background-color: $--n-popover-background-color !global; - $--popover-text-color: $--n-secondary-text-color !global; - $--popover-box-shadow: $--n-popover-box-shadow !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Progress.scss b/src/_styles/themes/light/components/Progress.scss deleted file mode 100644 index 094fdc890..000000000 --- a/src/_styles/themes/light/components/Progress.scss +++ /dev/null @@ -1,15 +0,0 @@ -@mixin setup-light-progress { - $--progress-rail-color: change-color($--n-rail-overlay-color, $alpha: alpha($--n-rail-overlay-color) * 0.6) !global; - $--progress-fill-color: ( - 'default': $--n-info-color, - 'info': $--n-info-color, - 'error': $--n-error-color, - 'warning': $--n-warning-color, - 'success': $--n-success-color - ) !global; - $--progress-indicator-text-color: ( - 'outside': $--n-secondary-text-color, - 'inside': $--n-base-background-color - ) !global; - $--progress-line-processing-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .5) 100%) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Radio.scss b/src/_styles/themes/light/components/Radio.scss deleted file mode 100644 index 0936e8bbb..000000000 --- a/src/_styles/themes/light/components/Radio.scss +++ /dev/null @@ -1,41 +0,0 @@ -@mixin setup-light-radio { - $--radio-box-shadow: ( - 'default': inset 0 0 0 1px $--n-border-color, - 'active': inset 0 0 0 1px $--n-primary-color, - 'focus': (inset 0 0 0 1px $--n-primary-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)), - 'hover': inset 0 0 0 1px $--n-primary-color, - 'disabled': inset 0 0 0 1px $--n-border-color - ) !global; - $--radio-background-color: ( - 'default': $--n-base-background-color, - 'disabled': $--n-disabled-background-color - ) !global; - $--radio-label-text-color: ( - 'default': $--n-secondary-text-color, - 'disabled': $--n-disabled-text-color - ) !global; - $--radio-control-background-color: ( - 'active': $--n-primary-color, - 'disabled': $--n-border-color - ) !global; - $--radio-button-border-color: ( - 'default': $--n-border-color, - 'active': $--n-primary-color, - 'hover': $--n-border-color - ) !global; - $--radio-button-background-color: ( - 'default': $--n-base-background-color, - 'active': $--n-base-background-color, - ) !global; - $--radio-button-label-color: ( - 'default': $--n-secondary-text-color, - 'active': $--n-primary-color, - 'hover': $--n-primary-color - ) !global; - $--radio-disabled-opacity: $--n-disabled-opacity !global; - $--radio-border-mask-width: 0px !global; - $--radio-button-box-shadow: ( - 'focus': (inset 0 0 0 1px $--n-primary-color, 0 0 0 2px change-color($--n-primary-color, $alpha: .3)), - 'hover': inset 0 0 0 $--radio-border-mask-width transparent - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Result.scss b/src/_styles/themes/light/components/Result.scss deleted file mode 100644 index 6764273d3..000000000 --- a/src/_styles/themes/light/components/Result.scss +++ /dev/null @@ -1,10 +0,0 @@ -@mixin setup-light-result { - $--result-icon-color: ( - 'error': $--n-error-color, - 'success': $--n-success-color, - 'warning': $--n-warning-color, - 'info': $--n-info-color - ) !global; - $--result-header-text-color: $--n-primary-text-color !global; - $--result-description-text-color: $--n-secondary-text-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Scrollbar.scss b/src/_styles/themes/light/components/Scrollbar.scss deleted file mode 100644 index 68731a821..000000000 --- a/src/_styles/themes/light/components/Scrollbar.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin setup-light-scrollbar { - $--scrollbar-background-color: ( - "default": $--n-scrollbar-overlay-background-color, - "hover": $--n-scrollbar-hover-overlay-background-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Slider.scss b/src/_styles/themes/light/components/Slider.scss deleted file mode 100644 index d47cbf87c..000000000 --- a/src/_styles/themes/light/components/Slider.scss +++ /dev/null @@ -1,24 +0,0 @@ -@mixin setup-light-slider { - $--slider-rail-background-color: ( - 'default': $--n-rail-overlay-color, - 'hover': change-color($--n-rail-overlay-color, $alpha: alpha($--n-rail-overlay-color) * 0.75) - ) !global; - $--slider-rail-fill-background-color: ( - 'default': $--n-primary-color, - 'hover': $--n-primary-hover-color - ) !global; - $--slider-handle-background-color: $--n-base-background-color !global; - $--slider-handle-box-shadow: ( - 'default': inset 0 0 0 2px $--n-primary-color, - 'hover': inset 0 0 0 2px $--n-primary-hover-color, - 'active': (inset 0 0 0 2px $--n-primary-hover-color, 0 0 0 3px change-color($--n-primary-color, $alpha: .2)), - 'focus': (inset 0 0 0 2px $--n-primary-color, 0 0 0 3px change-color($--n-primary-color, $alpha: .2)) - ) !global; - $--slider-indicator-background-color: rgba(0, 0, 0, .85) !global; - $--slider-indicator-box-shadow: $--n-popover-box-shadow !global; - $--slider-indicator-text-color: $--n-base-background-color !global; - $--slider-dot-box-shadow: ( - 'default': inset 0 0 0 2px $--n-primary-color, - 'active': inset 0 0 0 2px $--n-primary-hover-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Spin.scss b/src/_styles/themes/light/components/Spin.scss deleted file mode 100644 index 1512f1bda..000000000 --- a/src/_styles/themes/light/components/Spin.scss +++ /dev/null @@ -1,3 +0,0 @@ -@mixin setup-light-spin { - $--spin-spinning-opacity: $--n-disabled-opacity !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Statistic.scss b/src/_styles/themes/light/components/Statistic.scss deleted file mode 100644 index f01db0fb8..000000000 --- a/src/_styles/themes/light/components/Statistic.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin setup-light-statistic { - $--statistic-value-label-text-color: $--n-secondary-text-color !global; - $--statistic-value-prefix-text-color: $--n-primary-text-color !global; - $--statistic-value-suffix-text-color: $--n-primary-text-color !global; - $--statistic-value-content-text-color: $--n-primary-text-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Steps.scss b/src/_styles/themes/light/components/Steps.scss deleted file mode 100644 index 9111b561f..000000000 --- a/src/_styles/themes/light/components/Steps.scss +++ /dev/null @@ -1,38 +0,0 @@ -@mixin setup-light-steps { - $--steps-step-border-color: ( - 'process': $--n-primary-color, - 'wait': $--n-disabled-text-color, - 'finish': $--n-primary-color, - 'error': $--n-error-color - ) !global; - $--steps-step-background-color: ( - 'process': $--n-primary-color, - 'wait': transparent, - 'finish': transparent, - 'error': transparent - ) !global; - $--steps-step-indicator-text-color: ( - 'process': black, - 'wait': $--n-disabled-text-color, - 'finish': $--n-primary-color, - 'error': $--n-error-color - ) !global; - $--steps-step-splitor-background-color: ( - 'process': $--n-disabled-text-color, - 'wait': $--n-disabled-text-color, - 'finish': $--n-primary-color, - 'error': $--n-disabled-text-color - ) !global; - $--steps-step-content-text-color: ( - 'process': $--n-secondary-text-color, - 'wait': $--n-disabled-text-color, - 'finish': $--n-disabled-text-color, - 'error': $--n-error-color - ) !global; - $--steps-step-title-text-color: ( - 'process': $--n-primary-text-color, - 'wait': $--n-disabled-text-color, - 'finish': $--n-tertiary-text-color, - 'error': $--n-error-color - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Switch.scss b/src/_styles/themes/light/components/Switch.scss deleted file mode 100644 index 1b780396e..000000000 --- a/src/_styles/themes/light/components/Switch.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin setup-light-switch { - $--switch-rail-background-color:( - "inactive": $--n-rail-overlay-color, - "active": $--n-primary-color - ) !global; - $--switch-switcher-background-image: ( - "inactive": linear-gradient(52deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(148,151,155,1) 75%,rgba(148,151,155,1) 100%), - "active": linear-gradient(52deg,rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(120,205,104,1) 75%,rgba(20,166,165,1) 100%) - ) !global; - $--switch-background-position: 0, 0 !global; - $--switch-switcher-box-shadow: (0px 1px 4px 0px rgba(0,0,0,0.3), inset 0px 0px 1px 0px rgba(0,0,0,0.05)) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Table.scss b/src/_styles/themes/light/components/Table.scss deleted file mode 100644 index 79f190a3b..000000000 --- a/src/_styles/themes/light/components/Table.scss +++ /dev/null @@ -1,13 +0,0 @@ -@mixin setup-light-table { - $--table-border-color: $--n-divider-overlay-color !global; - $--table-body-background-color: ( - 'default': $--n-card-background-color, - 'modal': $--n-modal-background-color - ) !global; - $--table-header-background-color: composite-color( - $--n-card-background-color, - $--n-table-header-overlay-background-color - ) !global; - $--table-header-text-color: $--n-primary-text-color !global; - $--table-body-text-color: $--n-secondary-text-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Tabs.scss b/src/_styles/themes/light/components/Tabs.scss deleted file mode 100644 index 7de8bb914..000000000 --- a/src/_styles/themes/light/components/Tabs.scss +++ /dev/null @@ -1,24 +0,0 @@ -@mixin setup-light-tabs { - $--tabs-tab-text-color: ( - 'default': $--n-secondary-text-color, - 'active': $--n-primary-color, - 'hover': $--n-primary-color, - 'disabled': $--n-disabled-text-color, - ) !global; - $--tabs-tab-bar-background-color: $--n-primary-color !global; - $--tabs-tab-scroll-button-color: ( - 'default': $--n-icon-overlay-color, - 'disabled': change-color($--n-icon-overlay-color, $alpha: alpha($--n-icon-overlay-color) * $--n-disabled-opacity) - ) !global; - $--tabs-tab-close-button-color: ( - 'default': $--n-close-color - ) !global; - $--tabs-card-tab-background-color: $--n-tab-overlay-background-color !global; - $--tabs-card-tab-border-color: $--n-border-color !global; - $--tabs-card-tab-text-color: ( - 'default': $--n-secondary-text-color, - 'active': $--n-primary-text-color - ) !global; - $--tabs-nav-border-color: $--n-divider-overlay-color !global; - $--tabs-panel-text-color: $--n-secondary-text-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Tag.scss b/src/_styles/themes/light/components/Tag.scss deleted file mode 100644 index 6b93ffb89..000000000 --- a/src/_styles/themes/light/components/Tag.scss +++ /dev/null @@ -1,88 +0,0 @@ -@mixin setup-light-tag { - $--tag-text-color: ( - 'checkable-default': $--n-secondary-text-color, - 'checkable-hover': $--n-primary-color, - 'checkable-active': $--n-base-background-color, - 'default': $--n-secondary-text-color, - 'default-disabled': $--n-disabled-text-color, - 'success': $--n-success-color, - 'success-disabled': $--n-disabled-text-color, - 'warning': $--n-warning-color, - 'warning-disabled': $--n-disabled-text-color, - 'info': $--n-info-color, - 'info-disabled': $--n-disabled-text-color, - 'error': $--n-error-color, - 'error-disabled': $--n-disabled-text-color, - ) !global; - $--tag-background-color: ( - 'checkable-default': transparent, - 'checkable-hover': transparent, - 'checkable-active': $--n-primary-color, - 'checkable-checked-hover': $--n-primary-hover-color, - 'checkable-checked-active': $--n-primary-active-color, - 'default': $--n-tag-background-color, - 'default-hover': $--n-tag-background-color, - 'default-active': $--n-tag-background-color, - 'default-disabled': $--n-disabled-background-color, - 'success': mix($--n-success-color, $--n-base-background-color, 10%), - 'success-hover': mix($--n-success-color, $--n-base-background-color, 10%), - 'success-active': mix($--n-success-color, $--n-base-background-color, 10%), - 'success-disabled': $--n-disabled-background-color, - 'warning': mix($--n-warning-color, $--n-base-background-color, 10%), - 'warning-hover': mix($--n-warning-color, $--n-base-background-color, 10%), - 'warning-active': mix($--n-warning-color, $--n-base-background-color, 10%), - 'warning-disabled': $--n-disabled-background-color, - 'info': mix($--n-info-color, $--n-base-background-color, 10%), - 'info-hover': mix($--n-info-color, $--n-base-background-color, 10%), - 'info-active': mix($--n-info-color, $--n-base-background-color, 10%), - 'info-disabled': $--n-disabled-background-color, - 'error': mix($--n-error-color, $--n-base-background-color, 10%), - 'error-hover': mix($--n-error-color, $--n-base-background-color, 10%), - 'error-active': mix($--n-error-color, $--n-base-background-color, 10%), - 'error-disabled': $--n-disabled-background-color, - ) !global; - $--tag-border-color: ( - 'default': $--n-border-color, - 'default-hover': transparent, - 'default-active': transparent, - 'default-disabled': $--n-border-color, - 'success': mix($--n-success-color, $--n-base-background-color, 30%), - 'success-hover': transparent, - 'success-active': transparent, - 'success-disabled': $--n-border-color, - 'warning': mix($--n-warning-color, $--n-base-background-color, 35%), - 'warning-hover': transparent, - 'warning-active': transparent, - 'warning-disabled': $--n-border-color, - 'info': mix($--n-info-color, $--n-base-background-color, 30%), - 'info-hover': transparent, - 'info-active': transparent, - 'info-disabled': $--n-border-color, - 'error': mix($--n-error-color, $--n-base-background-color, 23%), - 'error-hover': transparent, - 'error-active': transparent, - 'error-disabled': $--n-border-color, - ) !global; - $--tag-close-color: ( - 'default': $--n-close-color, - 'default-hover': $--n-close-hover-color, - 'default-active': $--n-close-color, - 'default-disabled': $--n-disabled-close-overlay-color, - 'success': change-color($--n-success-color, $alpha: .5), - 'success-hover': change-color($--n-success-color, $alpha: 1), - 'success-active': change-color($--n-success-color, $alpha: .75), - 'success-disabled': $--n-disabled-close-overlay-color, - 'warning': change-color($--n-warning-color, $alpha: .5), - 'warning-hover': change-color($--n-warning-color, $alpha: 1), - 'warning-active': change-color($--n-warning-color, $alpha: .75), - 'warning-disabled': $--n-disabled-close-overlay-color, - 'info': change-color($--n-info-color, $alpha: .5), - 'info-hover': change-color($--n-info-color, $alpha: 1), - 'info-active': change-color($--n-info-color, $alpha: .75), - 'info-disabled': $--n-disabled-close-overlay-color, - 'error': change-color($--n-error-color, $alpha: .5), - 'error-hover': change-color($--n-error-color, $alpha: 1), - 'error-active': change-color($--n-error-color, $alpha: .75), - 'error-disabled': $--n-disabled-close-overlay-color, - ) !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Thing.scss b/src/_styles/themes/light/components/Thing.scss deleted file mode 100644 index 3f2527d96..000000000 --- a/src/_styles/themes/light/components/Thing.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin setup-light-thing { - $--thing-header-text-color: $--n-primary-text-color !global; - $--thing-text-color: $--n-secondary-text-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/TimePicker.scss b/src/_styles/themes/light/components/TimePicker.scss deleted file mode 100644 index a1ea5ec1b..000000000 --- a/src/_styles/themes/light/components/TimePicker.scss +++ /dev/null @@ -1,17 +0,0 @@ -@mixin setup-light-time-picker { - $--time-picker-background-color: $--n-modal-background-color !global; - $--time-picker-text-color: ( - 'default': $--n-secondary-text-color, - 'active': $--n-primary-color - ) !global; - $--time-picker-text-decoration-color: ( - 'default': $--n-secondary-text-color, - 'active': $--n-primary-color - ) !global; - $--time-picker-item-background-color: ( - 'hover': $--n-pending-overlay-color - ) !global; - $--time-picker-divider-color: $--n-divider-overlay-color !global; - $--time-picker-box-shadow: $--n-popmenu-box-shadow !global; - $--time-picker-item-disabled-opacity: $--n-disabled-opacity !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Timeline.scss b/src/_styles/themes/light/components/Timeline.scss deleted file mode 100644 index c92af9a75..000000000 --- a/src/_styles/themes/light/components/Timeline.scss +++ /dev/null @@ -1,13 +0,0 @@ -@mixin setup-light-timeline { - $--timeline-item-circle-border-color: ( - 'default': $--n-tertiary-text-color, - 'info': $--n-info-color, - 'error': $--n-error-color, - 'success': $--n-success-color, - 'warning': $--n-warning-color - ) !global; - $--timeline-item-title-color: $--n-primary-text-color !global; - $--timeline-item-content-color: $--n-secondary-text-color !global; - $--timeline-item-meta-color: $--n-tertiary-text-color !global; - $--timeline-line-background-color: $--n-rail-overlay-color !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Tooltip.scss b/src/_styles/themes/light/components/Tooltip.scss deleted file mode 100644 index ee0a27ce3..000000000 --- a/src/_styles/themes/light/components/Tooltip.scss +++ /dev/null @@ -1,5 +0,0 @@ -@mixin setup-light-tooltip { - $--tooltip-background-color: rgba(0, 0, 0, .85) !global; - $--tooltip-text-color: $--n-base-background-color !global; - $--tooltip-box-shadow: $--n-popover-box-shadow !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Transfer.scss b/src/_styles/themes/light/components/Transfer.scss deleted file mode 100644 index 5b133b503..000000000 --- a/src/_styles/themes/light/components/Transfer.scss +++ /dev/null @@ -1,32 +0,0 @@ -@mixin setup-light-transfer { - $--transfer-list-background-color: ( - 'default': $--n-card-background-color - ) !global; - $--transfer-list-header-background-color: ( - 'default': composite-color( - $--n-card-background-color, - $--n-table-header-overlay-background-color - ) - ) !global; - $--transfer-list-header-text-color: ( - 'default': $--n-primary-text-color, - 'disabled': $--n-disabled-text-color - ) !global; - $--transfer-list-header-extra-text-color: ( - 'default': $--n-secondary-text-color, - 'disabled': $--n-disabled-text-color - ) !global; - $--transfer-gap-button-background-color: ( - 'default': rgba(0, 0, 0, .2), - 'disabled': rgba(0, 0, 0, .1), - 'hover': $--n-primary-color, - 'active': $--n-primary-active-color - ) !global; - $--transfer-item-text-color: ( - 'default': $--n-secondary-text-color, - 'disabled': $--n-disabled-text-color - ) !global; - $--transfer-filter-border-color: $--n-divider-overlay-color !global; - $--transfer-border-color: $--n-divider-overlay-color !global; - $--transfer-list-border-mask-pointer-events: none !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Tree.scss b/src/_styles/themes/light/components/Tree.scss deleted file mode 100644 index 0745c04c9..000000000 --- a/src/_styles/themes/light/components/Tree.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin setup-light-tree { - $--tree-node-background-color: ( - 'hover': $--n-pending-overlay-color, - 'active': $--n-active-overlay-color, - 'selected': change-color($--n-primary-color, $alpha: .1) - ) !global; - $--tree-node-switcher-color: $--n-tertiary-text-color !global; - $--tree-node-content-text-color: ( - 'default': $--n-secondary-text-color, - 'disabled': $--n-disabled-text-color - )!global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Typography.scss b/src/_styles/themes/light/components/Typography.scss deleted file mode 100644 index f63279894..000000000 --- a/src/_styles/themes/light/components/Typography.scss +++ /dev/null @@ -1,58 +0,0 @@ -@mixin setup-light-typography { - $--typography-header-text-color: ( - 'default': $--n-primary-text-color - ) !global; - $--typography-header-prefix-color: ( - 'default': $--n-primary-color, - 'primary': $--n-primary-color, - 'error': $--n-error-color, - 'warning': $--n-warning-color, - 'success': $--n-success-color - ) !global; - $--typography-p-text-color: ( - 'default': $--n-secondary-text-color, - 'primary-depth': $--n-primary-text-color, - 'secondary-depth': $--n-secondary-text-color, - 'tertiary-depth': $--n-tertiary-text-color - ) !global; - $--typography-li-text-color: ( - 'default': $--n-secondary-text-color - ) !global; - $--typography-a-text-color: ( - 'default': $--n-primary-color - ) !global; - $--typography-hr-border-color: ( - 'default': $--n-divider-overlay-color - ) !global; - $--typography-blockquote-text-color: ( - 'default': $--n-secondary-text-color - ) !global; - $--typography-blockquote-prefix-color: ( - 'default': $--n-border-color - ) !global; - $--typography-text-text-color: ( - 'default': $--n-secondary-text-color, - 'strong': $--n-primary-text-color, - 'primary-depth': $--n-primary-text-color, - 'secondary-depth': $--n-secondary-text-color, - 'tertiary-depth': $--n-tertiary-text-color, - 'primary': $--n-primary-color, - 'success': $--n-success-color, - 'warning': $--n-warning-color, - 'error': $--n-error-color, - 'info': $--n-info-color - ) !global; - $--typography-text-opacity: ( - 'primary-depth': $--n-primary-opacity, - 'secondary-depth': $--n-secondary-opacity, - 'tertiary-depth': $--n-tertiary-opacity, - ) !global; - $--typography-code-text-color: ( - 'default': $--n-secondary-text-color, - ) !global; - $--typography-code-background-color: composite-color( - $--n-base-background-color, - $--n-code-overlay-background-color - ) !global; - $--typography-code-border-color: transparent !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/components/Upload.scss b/src/_styles/themes/light/components/Upload.scss deleted file mode 100644 index e80fb681c..000000000 --- a/src/_styles/themes/light/components/Upload.scss +++ /dev/null @@ -1,22 +0,0 @@ -@mixin setup-light-upload { - $--upload-file-item-background-color: ( - 'hover': change-color($--n-primary-color, $alpha: .1), - 'error-hover': change-color($--n-error-color, $alpha: .1) - ) !global; - $--upload-dragger-border-color: ( - 'default': $--n-border-color, - 'hover': $--n-primary-color - ) !global; - $--upload-dragger-background-color: ( - 'default': $--n-action-overlay-background-color - ) !global; - $--upload-info-text-color: ( - 'default': $--n-secondary-text-color, - 'error': $--n-error-color, - 'success': $--n-success-color - ) !global; - $--upload-info-icon-color: ( - 'default': $--n-icon-overlay-color - ) !global; - $--upload-disabled-opacity: $--n-disabled-opacity !global; -} \ No newline at end of file diff --git a/src/_styles/themes/light/index.scss b/src/_styles/themes/light/index.scss deleted file mode 100644 index 021d37973..000000000 --- a/src/_styles/themes/light/index.scss +++ /dev/null @@ -1,243 +0,0 @@ -@import 'lightColors.scss'; -@import 'components/Button.scss'; -@import 'components/Divider.scss'; -@import 'components/Scrollbar.scss'; -@import 'components/BaseLoading.scss'; -@import 'components/BaseSelectMenu.scss'; -@import 'components/BaseSelection.scss'; -@import 'components/BaseSuffix.scss'; -@import 'components/Tag.scss'; -@import 'components/Table.scss'; -@import 'components/DataTable.scss'; -@import 'components/Popover.scss'; -@import 'components/Tooltip.scss'; -@import 'components/Confirm.scss'; -@import 'components/CheckBox.scss'; -@import 'components/Switch.scss'; -@import 'components/Message.scss'; -@import 'components/LoadingBar.scss'; -@import 'components/Badge.scss'; -@import 'components/Dropdown.scss'; -@import 'components/Input.scss'; -@import 'components/Alert.scss'; -@import 'components/Anchor.scss'; -@import 'components/Pagination.scss'; -@import 'components/GradientText.scss'; -@import 'components/DatePicker.scss'; -@import 'components/TimePicker.scss'; -@import 'components/Progress.scss'; -@import 'components/Timeline.scss'; -@import 'components/BackTop.scss'; -@import 'components/Notification.scss'; -@import 'components/Radio.scss'; -@import 'components/Steps.scss'; -@import 'components/InputNumber.scss'; -@import 'components/Slider.scss'; -@import 'components/Cascader.scss'; -@import 'components/Tabs.scss'; -@import 'components/Statistic.scss'; -@import 'components/Breadcrumb.scss'; -@import 'components/Modal.scss'; -@import 'components/Transfer.scss'; -@import 'components/Menu.scss'; -@import 'components/Thing.scss'; -@import 'components/List.scss'; -@import 'components/Layout.scss'; -@import 'components/Form.scss'; -@import 'components/Empty.scss'; -@import 'components/Drawer.scss'; -@import 'components/Descriptions.scss'; -@import 'components/Card.scss'; -@import 'components/AutoComplete.scss'; -@import 'components/Affix.scss'; -@import 'components/Avatar.scss'; -@import 'components/Collapse.scss'; -@import 'components/Result.scss'; -@import 'components/Tree.scss'; -@import 'components/Typography.scss'; -@import 'components/Upload.scss'; -@import 'components/BaseMenuMask.scss'; -@import 'components/Spin.scss'; -@import 'components/Log.scss'; -@import 'components/Code.scss'; -@import 'components/BaseTrackingRect.scss'; - -@mixin setup-light-theme($in-js-env: false) { - @include setup-light-colors(); - $--n-base-background-color: $--neutral-base !global; - - $--n-primary-color: $--primary-default !global; - $--n-primary-hover-color: $--primary-hover !global; - $--n-primary-active-color: $--primary-active !global; - $--n-primary-hs-color: $--primary-hs !global; - - $--n-info-color: $--info-default !global; - $--n-info-hover-color: $--info-hover !global; - $--n-info-active-color: $--info-active !global; - $--n-info-hs-color: $--info-hs !global; - - $--n-success-color: $--success-default !global; - $--n-success-hover-color: $--success-hover !global; - $--n-success-active-color: $--success-active !global; - $--n-success-hs-color: $--success-hs !global; - - $--n-error-color: $--error-default !global; - $--n-error-hover-color: $--error-hover !global; - $--n-error-active-color: $--error-active !global; - $--n-error-hs-color: $--error-hs !global; - - $--n-warning-color: $--warning-default !global; - $--n-warning-hover-color: $--warning-hover !global; - $--n-warning-active-color: $--warning-active !global; - $--n-warning-hs-color: $--warning-hs !global; - - $--n-primary-text-color: $--neutral-text-1 !global; - $--n-secondary-text-color: $--neutral-text-2 !global; - $--n-tertiary-text-color: $--neutral-text-3 !global; - $--n-disabled-text-color: $--neutral-text-4 !global; - $--n-placeholder-text-color: $--neutral-text-4 !global; - $--n-primary-text-overlay-color: $--overlay-text-1 !global; - $--n-secondary-text-overlay-color: $--overlay-text-2 !global; - $--n-tertiary-text-overlay-color: $--overlay-text-3 !global; - $--n-disabled-text-overlay-color: $--overlay-text-4 !global; - $--n-placeholder-text-overlay-color: $--overlay-text-4 !global; - $--n-base-text-color: $--base-text !global; - - $--n-primary-opacity: $--alpha-1 !global; - $--n-secondary-opacity: $--alpha-2 !global; - $--n-tertiary-opacity: $--alpha-3 !global; - $--n-pending-opacity: $--alpha-pending !global; - $--n-disabled-fill-opacity: $--alpha-disabled-fill !global; - - $--n-icon-color: $--neutral-text-4 !global; - $--n-icon-overlay-color: $--overlay-text-4 !global; - - $--n-rail-color: $--neutral-rail !global; - $--n-rail-overlay-color: $--overlay-rail !global; - $--n-divider-color: $--neutral-divider !global; - $--n-divider-overlay-color: $--overlay-divider !global; - $--n-border-color: $--neutral-border !global; - $--n-border-overlay-color: $--overlay-border !global; - - $--n-scrollbar-overlay-background-color: $--overlay-scrollbar !global; - $--n-scrollbar-hover-overlay-background-color: $--overlay-scrollbar-hover !global; - - $--n-close-hover-color: $--neutral-text-2 !global; - $--n-close-hover-overlay-color: $--overlay-text-2 !global; - $--n-close-color: $--neutral-text-3 !global; - $--n-close-overlay-color: $--overlay-text-3 !global; - $--n-disabled-close-color: $--neutral-text-4 !global; - $--n-disabled-close-overlay-color: $--overlay-text-4 !global; - - $--n-popover-background-color: $--neutral-popover !global; - $--n-table-body-background-color: $--neutral-card !global; - $--n-card-background-color: $--neutral-card !global; - $--n-modal-background-color: $--neutral-modal !global; - $--n-body-background-color: $--neutral-body !global; - $--n-base-background-color: $--neutral-base !global; - $--n-tag-background-color: $--neutral-tag !global; - - $--n-input-overlay-background-color: null !global; - $--n-code-overlay-background-color: $--overlay-code !global; - $--n-tab-overlay-background-color: $--overlay-tab !global; - $--n-avatar-overlay-background-color: $--overlay-avatar !global; - $--n-action-overlay-background-color: $--overlay-action !global; - $--n-table-header-overlay-background-color: $--overlay-action !global; - - $--n-pending-overlay-color: $--overlay-pending !global; - $--n-table-pending-overlay-color: $--overlay-table-pending !global; - $--n-active-overlay-color: $--overlay-active !global; - - $--n-disabled-opacity: $--alpha-disabled !global; - $--n-disabled-background-color: $--neutral-disabled !global; - - $--n-message-colored-box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.27) !global; - - @include setup-light-custom-variables(); - - @if ($in-js-env != true) { - @include setup-light-divider; - @include setup-light-scrollbar; - @include setup-light-base-loading; - @include setup-light-button; - @include setup-light-base-select-menu; - @include setup-light-base-selection; - @include setup-light-base-suffix; - @include setup-light-tag; - @include setup-light-table; - @include setup-light-data-table; - @include setup-light-popover; - @include setup-light-tooltip; - @include setup-light-confirm; - @include setup-light-checkbox; - @include setup-light-switch; - @include setup-light-message; - @include setup-light-loading-bar; - @include setup-light-badge; - @include setup-light-dropdown; - @include setup-light-input; - @include setup-light-anchor; - @include setup-light-alert; - @include setup-light-pagination; - @include setup-light-gradient-text; - @include setup-light-date-picker; - @include setup-light-time-picker; - @include setup-light-progress; - @include setup-light-timeline; - @include setup-light-back-top; - @include setup-light-notification; - @include setup-light-radio; - @include setup-light-steps; - @include setup-light-input-number; - @include setup-light-slider; - @include setup-light-cascader; - @include setup-light-tabs; - @include setup-light-statistic; - @include setup-light-breadcrumb; - @include setup-light-modal; - @include setup-light-transfer; - @include setup-light-menu; - @include setup-light-thing; - @include setup-light-list; - @include setup-light-layout; - @include setup-light-form; - @include setup-light-empty; - @include setup-light-drawer; - @include setup-light-descriptions; - @include setup-light-card; - @include setup-light-auto-complete; - @include setup-light-affix; - @include setup-light-avatar; - @include setup-light-collapse; - @include setup-light-result; - @include setup-light-tree; - @include setup-light-typography; - @include setup-light-upload; - @include setup-light-base-menu-mask; - @include setup-light-spin; - @include setup-light-log; - @include setup-light-code; - @include setup-light-base-tracking-rect; - } -} - -@mixin setup-light-custom-variables { - @if function-exists('get-primary-color') { - $color: get-primary-color('light'); - @if $color != null { - $--n-primary-color: $color !global; - } - } - @if function-exists('get-primary-hover-color') { - $color: get-primary-hover-color('light'); - @if $color != null { - $--n-primary-hover-color: $color !global; - } - } - @if function-exists('get-primary-active-color') { - $color: get-primary-active-color('light'); - @if $color != null { - $--n-primary-active-color: $color !global; - } - } -} \ No newline at end of file diff --git a/src/_styles/themes/light/lightColors.scss b/src/_styles/themes/light/lightColors.scss deleted file mode 100644 index 395172f23..000000000 --- a/src/_styles/themes/light/lightColors.scss +++ /dev/null @@ -1,98 +0,0 @@ -// Caveat: not all the colors will be used in the current theme! Be Careful to -// choose the color you need. - -// Neutral colors are derived from base background color and overlay colors. -// They have different usage. - -@mixin setup-light-colors { - $--base-text: #000 !global; - - $--alpha-1: .82 !global; - $--alpha-2: .72 !global; - $--alpha-3: .38 !global; - $--alpha-4: .24 !global; - - $--alpha-disabled: .5 !global; - $--alpha-pending: .04 !global; - $--alpha-table-pending: .02 !global; - - // overlay-text - $--overlay-text-1: rgba(0, 0, 0, $--alpha-1) !global; - $--overlay-text-2: rgba(0, 0, 0, $--alpha-2) !global; - $--overlay-text-3: rgba(0, 0, 0, $--alpha-3) !global; - $--overlay-text-4: rgba(0, 0, 0, $--alpha-4) !global; - $--neutral-text-1: create-light-neutral-color($--overlay-text-1) !global; - $--neutral-text-2: create-light-neutral-color($--overlay-text-2) !global; - $--neutral-text-3: create-light-neutral-color($--overlay-text-3) !global; - $--neutral-text-4: create-light-neutral-color($--overlay-text-4) !global; - - // overlay - $--overlay-avatar: rgba(0, 0, 0, .20) !global; - $--overlay-rail: rgba(0, 0, 0, .14) !global; - $--overlay-border: rgba(0, 0, 0, .14) !global; - $--overlay-divider: rgba(0, 0, 0, .08) !global; - $--overlay-input: rgba(0, 0, 0, 0) !global; - $--overlay-action: rgba(0, 0, 0, .02) !global; - $--overlay-tab: rgba(0, 0, 0, .04) !global; - $--overlay-scrollbar: rgba(0, 0, 0, .25) !global; - $--overlay-scrollbar-hover: rgba(0, 0, 0, .4) !global; - - $--alpha-disabled-fill: .02 !global; - - $--overlay-disabled: rgba(0, 0, 0, $--alpha-disabled-fill) !global; - $--overlay-pending: rgba(0, 0, 0, $--alpha-pending) !global; - $--overlay-table-pending: rgba(0, 0, 0, $--alpha-table-pending) !global; - $--overlay-active: rgba(0, 0, 0, .06) !global; - $--overlay-code: rgba(0, 0, 0, .05) !global; - $--overlay-tag: rgba(0, 0, 0, .02) !global; - - // neutral - $--neutral-base: #FFF !global; - $--neutral-popover: #FFF !global; - $--neutral-modal: #FFF !global; - $--neutral-card: #FFF !global; - $--neutral-body: rgb(248, 248, 248) !global; - $--neutral-disabled: create-light-neutral-color($--overlay-disabled) !global; - $--neutral-border: create-light-neutral-color($--overlay-border) !global; - $--neutral-divider: create-light-neutral-color($--overlay-divider) !global; - $--neutral-input: create-light-neutral-color($--overlay-input) !global; - $--neutral-action: create-light-neutral-color($--overlay-action) !global; - $--neutral-tag: create-light-neutral-color($--overlay-tag) !global; - $--neutral-code: create-light-neutral-color($--overlay-code) !global; - $--neutral-rail: create-light-neutral-color($--overlay-rail) !global; - - // primary - $--primary-hover: #36ad6a !global; - $--primary-default:#18a058 !global; - $--primary-active: #0c7a43 !global; - $--primary-hs: #36ad6a !global; - - // info - $--info-hover: #4098fc !global; - $--info-default:#2080f0 !global; - $--info-active: #1060c9 !global; - $--info-hs: #4098fc !global; - - // error - $--error-hover: #de576d !global; - $--error-default:#d03050 !global; - $--error-active: #ab1f3f !global; - $--error-hs: #de576d !global; - - // warning - $--warning-hover: #fcb040 !global; - $--warning-default:#f0a020 !global; - $--warning-active: #c97c10 !global; - $--warning-hs: #fcb040 !global; - - // success - $--success-hover: #36ad6a !global; - $--success-default:#18a058 !global; - $--success-active: #0c7a43 !global; - $--success-hs: #36ad6a !global; -} - -@function create-light-neutral-color($overlay) { - $neutral-r: 255 * (1 - alpha($overlay)); - @return rgb($neutral-r, $neutral-r, $neutral-r) -} diff --git a/src/_styles/themes/transition.scss b/src/_styles/themes/transition.scss deleted file mode 100644 index 6381d9a79..000000000 --- a/src/_styles/themes/transition.scss +++ /dev/null @@ -1,256 +0,0 @@ -@mixin fade-down-transition ($name: 'fade-down', $from-offset: -4px) { - &.#{$namespace}-#{$name}-transition-enter, &.#{$namespace}-#{$name}-transition-leave-to { - opacity: 0; - transform: translateY($from-offset); - } - &.#{$namespace}-#{$name}-transition-enter-to, &.#{$namespace}-#{$name}-transition-leave { - opacity: 1; - transform: translateY(0); - } - &.#{$namespace}-#{$name}-transition-leave-active { - transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier; - } - &.#{$namespace}-#{$name}-transition-enter-active { - transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier; - } -} - -@mixin fade-in-scale-up-transition ($name: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9, $original-transform: (), $original-transition: ()) { - &.#{$namespace}-#{$name}-transition-leave-active { - transform-origin: $origin; - transition: opacity $duration $--n-ease-in-cubic-bezier, transform $duration $--n-ease-in-cubic-bezier, $original-transition; - } - &.#{$namespace}-#{$name}-transition-enter-active { - transform-origin: $origin; - transition: opacity $duration $--n-ease-out-cubic-bezier, transform $duration $--n-ease-out-cubic-bezier, $original-transition; - } - &.#{$namespace}-#{$name}-transition-enter, &.#{$namespace}-#{$name}-transition-leave-to { - opacity: 0; - transform: scale($start-scale) $original-transform; - } - &.#{$namespace}-#{$name}-transition-leave, &.#{$namespace}-#{$name}-transition-enter-to { - opacity: 1; - transform: $--n-transform-debounce-scale $original-transform; - } -} - -@mixin fade-in-transition ($name: 'fade-in', $enter-duration: .2s, $leave-duration: .2s) { - &.#{$namespace}-#{$name}-transition-enter-active { - transition: all $enter-duration $--n-ease-in-out-cubic-bezier !important; - } - &.#{$namespace}-#{$name}-transition-leave-active { - transition: all $leave-duration $--n-ease-in-out-cubic-bezier !important; - } - &.#{$namespace}-#{$name}-transition-enter, - &.#{$namespace}-#{$name}-transition-leave-to { - opacity: 0; - } - &.#{$namespace}-#{$name}-transition-enter-to, - &.#{$namespace}-#{$name}-transition-leave { - opacity: 1; - } -} - -@mixin slide-in-from-right-transition ($name: 'slide-in-from-right', $duration: .3s, $leave-duration: .2s) { - &.#{$namespace}-#{$name}-transition-leave-active { - transition: transform $leave-duration $--n-ease-in-cubic-bezier; - } - &.#{$namespace}-#{$name}-transition-enter-active { - transition: transform $duration $--n-ease-out-cubic-bezier; - } - &.#{$namespace}-#{$name}-transition-enter-to { - transform: translateX(0); - } - &.#{$namespace}-#{$name}-transition-enter { - transform: translateX(100%); - } - &.#{$namespace}-#{$name}-transition-leave { - transform: translateX(0); - } - &.#{$namespace}-#{$name}-transition-leave-to { - transform: translateX(100%); - } -} - -@mixin slide-in-from-top-transition ($name: 'slide-in-from-top', $duration: .3s, $leave-duration: .2s) { - &.#{$namespace}-#{$name}-transition-leave-active { - transition: transform $leave-duration $--n-ease-in-cubic-bezier; - } - &.#{$namespace}-#{$name}-transition-enter-active { - transition: transform $duration $--n-ease-out-cubic-bezier; - } - &.#{$namespace}-#{$name}-transition-enter-to { - transform: translateY(0); - } - &.#{$namespace}-#{$name}-transition-enter { - transform: translateY(-100%); - } - &.#{$namespace}-#{$name}-transition-leave { - transform: translateY(0); - } - &.#{$namespace}-#{$name}-transition-leave-to { - transform: translateY(-100%); - } -} - -@mixin slide-in-from-bottom-transition ($name: 'slide-in-from-bottom', $duration: .3s, $leave-duration: .2s) { - &.#{$namespace}-#{$name}-transition-leave-active { - transition: transform $leave-duration $--n-ease-in-cubic-bezier; - } - &.#{$namespace}-#{$name}-transition-enter-active { - transition: transform $duration $--n-ease-out-cubic-bezier; - } - &.#{$namespace}-#{$name}-transition-enter-to { - transform: translateY(0); - } - &.#{$namespace}-#{$name}-transition-enter { - transform: translateY(100%); - } - &.#{$namespace}-#{$name}-transition-leave { - transform: translateY(0); - } - &.#{$namespace}-#{$name}-transition-leave-to { - transform: translateY(100%); - } -} - -@mixin slide-in-from-left-transition ($name: 'slide-in-from-left', $duration: .3s, $leave-duration: .2s) { - &.#{$namespace}-#{$name}-transition-leave-active { - transition: transform $duration $--n-ease-in-cubic-bezier; - } - &.#{$namespace}-#{$name}-transition-enter-active { - transition: transform $duration $--n-ease-out-cubic-bezier; - } - &.#{$namespace}-#{$name}-transition-enter-to { - transform: translateX(0); - } - &.#{$namespace}-#{$name}-transition-enter { - transform: translateX(-100%); - } - &.#{$namespace}-#{$name}-transition-leave { - transform: translateX(0); - } - &.#{$namespace}-#{$name}-transition-leave-to { - transform: translateX(-100%); - } -} - -@mixin fade-in-height-expand-transition ( - $name: 'fade-in-height-expand', - $duration: .3s, - $original-transition: (), - $leave-delay: 0s, - $fold-padding: false -) { - &.#{$namespace}-#{$name}-transition-leave, &.#{$namespace}-#{$name}-transition-enter-to { - opacity: 1; - } - &.#{$namespace}-#{$name}-transition-leave-to, &.#{$namespace}-#{$name}-transition-enter { - opacity: 0; - @if $fold-padding { - padding-top: 0 !important; - padding-bottom: 0 !important; - } - margin-top: 0 !important; - margin-bottom: 0 !important; - } - &.#{$namespace}-#{$name}-transition-leave-active { - overflow: hidden; - transition: - max-height $duration $--n-ease-in-out-cubic-bezier $leave-delay, - opacity $duration $--n-ease-out-cubic-bezier $leave-delay, - margin-top $duration $--n-ease-in-out-cubic-bezier $leave-delay, - margin-bottom $duration $--n-ease-in-out-cubic-bezier $leave-delay, - padding-top $duration $--n-ease-in-out-cubic-bezier $leave-delay, - padding-bottom $duration $--n-ease-in-out-cubic-bezier $leave-delay, - $original-transition; - } - &.#{$namespace}-#{$name}-transition-enter-active { - overflow: hidden; - transition: - max-height $duration $--n-ease-in-out-cubic-bezier, - opacity $duration $--n-ease-in-cubic-bezier, - margin-top $duration $--n-ease-in-out-cubic-bezier, - margin-bottom $duration $--n-ease-in-out-cubic-bezier, - padding-top $duration $--n-ease-in-out-cubic-bezier, - padding-bottom $duration $--n-ease-in-out-cubic-bezier, - $original-transition; - } -} - -@mixin fade-in-width-expand-transition ($name: 'fade-in-width-expand', $duration: .2s, $delay: .1s) { - &.#{$namespace}-#{$name}-transition-leave-active { - transition: - opacity $duration $--n-ease-in-out-cubic-bezier, - max-width $duration $--n-ease-in-out-cubic-bezier $delay, - margin-left $duration $--n-ease-in-out-cubic-bezier $delay, - margin-right $duration $--n-ease-in-out-cubic-bezier $delay; - } - &.#{$namespace}-#{$name}-transition-enter-active { - transition: - opacity $duration $--n-ease-in-out-cubic-bezier $delay, - max-width $duration $--n-ease-in-out-cubic-bezier, - margin-left $duration $--n-ease-in-out-cubic-bezier, - margin-right $duration $--n-ease-in-out-cubic-bezier; - } - &.#{$namespace}-#{$name}-transition-enter-to, &.#{$namespace}-#{$name}-transition-leave { - opacity: 1; - } - &.#{$namespace}-#{$name}-transition-enter, &.#{$namespace}-#{$name}-transition-leave-to { - max-width: 0 !important; - opacity: 0 !important; - margin-left: 0 !important; - margin-right: 0 !important; - } -} - -@mixin fade-up-width-expand-transition ($name: 'fade-up-width-expand', $duration: .2s) { - &.#{$namespace}-#{$name}-transition-leave-active { - transition: opacity $duration $--n-ease-out-cubic-bezier, max-width $duration $--n-ease-out-cubic-bezier, transform $duration $--n-ease-out-cubic-bezier; - } - &.#{$namespace}-#{$name}-transition-enter-active { - transition: opacity $duration $--n-ease-out-cubic-bezier, max-width $duration $--n-ease-out-cubic-bezier, transform $duration $--n-ease-out-cubic-bezier; - } - &.#{$namespace}-#{$name}-transition-enter-to { - opacity: 1; - transform: translateX(0) translateY(0); - } - &.#{$namespace}-#{$name}-transition-enter { - max-width: 0!important; - opacity: 0; - transform: translateY(60%); - } - &.#{$namespace}-#{$name}-transition-leave { - opacity: 1; - transform: translateY(0); - } - &.#{$namespace}-#{$name}-transition-leave-to { - max-width: 0!important; - opacity: 0!important; - transform: translateY(60%); - } -} - -@mixin icon-switch-transition ( - $original-transform: (), - $left: 0, - $top: 0, - $transition: (all .3s $--n-ease-in-out-cubic-bezier !important) -) { - &.#{$namespace}-icon-switch-transition-enter, &.#{$namespace}-icon-switch-transition-leave-to { - /* make sure it apply to element */ - transform: $original-transform scale(.75); - opacity: 0; - } - &.#{$namespace}-icon-switch-transition-enter-to, &.#{$namespace}-icon-switch-transition-leave { - transform: $--n-transform-debounce-scale $original-transform; - opacity: 1; - } - &.#{$namespace}-icon-switch-transition-leave-active, &.#{$namespace}-icon-switch-transition-enter-active { - transform-origin: center; - position: absolute; - left: $left; - top: $top; - transition: $transition; - } -} \ No newline at end of file diff --git a/src/_styles/utils/color.scss b/src/_styles/utils/color.scss deleted file mode 100644 index 78aff6ead..000000000 --- a/src/_styles/utils/color.scss +++ /dev/null @@ -1,14 +0,0 @@ -@function composite-color ($background-color, $color) { - $background-color-alpha: alpha($background-color); - @if $background-color-alpha != 1 { - @error "[naive-ui/styles/composite-color]: background-color isn't opaque."; - } - $color-weight: percentage(alpha($color)); - $temp-color-1: scale-color($background-color, $lightness: -$color-weight); - $temp-color-2: scale-color($color, $lightness: -(100% - $color-weight)); - @return rgb( - red($temp-color-1) + red($temp-color-2), - green($temp-color-1) + green($temp-color-2), - blue($temp-color-1) + blue($temp-color-2) - ); -} \ No newline at end of file