mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-03-02 15:27:18 +00:00
598 lines
19 KiB
SCSS
598 lines
19 KiB
SCSS
@charset "UTF-8";
|
|
|
|
@import "../core/index-noreset.scss";
|
|
@import "scss/mixin";
|
|
@import "scss/variable";
|
|
@import "./rtl.scss";
|
|
|
|
#{$shell-prefix} {
|
|
@include box-sizing;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: all .2s $motion-ease;
|
|
|
|
&-content-wrapper {
|
|
overflow: auto;
|
|
}
|
|
|
|
&-header {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
z-index: 9;
|
|
|
|
.dock-trigger,
|
|
.nav-trigger {
|
|
outline: 0;
|
|
// background: $shell-dark-header-background;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
.nav-trigger {
|
|
margin-right: 10px;
|
|
}
|
|
.dock-trigger {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#{$shell-prefix}-navigation {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
}
|
|
#{$shell-prefix}-branding {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
#{$shell-prefix}-action {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
&-sub-main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: auto;
|
|
outline: 0;
|
|
}
|
|
&-main {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: row;
|
|
position: relative;
|
|
height: 100%;
|
|
box-sizing: content-box;
|
|
overflow: auto;
|
|
transition: all .2s $motion-ease;
|
|
|
|
#{$shell-prefix}-content {
|
|
flex: 1;
|
|
}
|
|
|
|
#{$shell-prefix}-content-inner {
|
|
margin: 0 auto;
|
|
// display: grid;
|
|
}
|
|
|
|
#{$shell-prefix}-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&-aside {
|
|
transition: all .2s $motion-ease;
|
|
|
|
.aside-trigger {
|
|
cursor: pointer;
|
|
outline: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
width: 20px;
|
|
height: 48px;
|
|
display: flex;
|
|
border: 1px solid #DDD;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.local-nav-trigger {
|
|
outline: 0;
|
|
border-left: none;
|
|
transform: translate(100%, -50%);
|
|
right: 0;
|
|
}
|
|
.ancillary-trigger {
|
|
outline: 0;
|
|
transform: translate(-100%, -50%);
|
|
border-right: 0;
|
|
left: 1px;
|
|
}
|
|
|
|
&.#{$css-prefix}aside-localnavigation {
|
|
position: relative;
|
|
}
|
|
|
|
&.#{$css-prefix}aside-ancillary {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
&#{$shell-prefix}-navigation {
|
|
overflow-x: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-self: flex-start;
|
|
transition: all .2s $motion-ease;
|
|
}
|
|
|
|
&#{$shell-prefix}-tooldock {
|
|
overflow-x: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
#{$shell-prefix}-tooldockitem {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
#{$shell-prefix}-localnavigation {
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-self: flex-start;
|
|
transition: all .2s $motion-ease;
|
|
}
|
|
|
|
#{$shell-prefix}-ancillary {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-self: flex-start;
|
|
transition: all .2s $motion-ease;
|
|
}
|
|
}
|
|
|
|
&-light {
|
|
@include shell-trigger-background(
|
|
$shell-light-header-background,
|
|
$shell-light-header-background,
|
|
$shell-light-local-navigation-background,
|
|
$shell-light-ancillary-background
|
|
);
|
|
|
|
#{$shell-prefix}-header {
|
|
@include shell-header-type(
|
|
$shell-light-header-color,
|
|
$shell-light-header-height,
|
|
$shell-light-header-background,
|
|
$shell-light-header-divider,
|
|
$shell-light-header-shadow,
|
|
$shell-light-header-paddingLeft
|
|
);
|
|
|
|
#{$shell-prefix}-navigation {
|
|
@include shell-header-navigation(
|
|
$shell-light-navigation-hoz-align,
|
|
$shell-light-header-height,
|
|
$shell-light-header-height,
|
|
$shell-light-navigation-hoz-marginLeft
|
|
);
|
|
}
|
|
}
|
|
|
|
#{$shell-prefix}-task-header {
|
|
@include shell-task-header(
|
|
$shell-light-multitask-min-height,
|
|
$shell-light-multitask-background,
|
|
$shell-light-multitask-divider,
|
|
$shell-light-multitask-shadow,
|
|
$shell-light-multitask-paddingLeft
|
|
);
|
|
}
|
|
|
|
#{$shell-prefix}-main {
|
|
background: $shell-light-content-background;
|
|
|
|
#{$shell-prefix}-appbar {
|
|
@include shell-appbar(
|
|
$shell-light-appbar-min-height,
|
|
$shell-light-appbar-background,
|
|
$shell-light-appbar-divider,
|
|
$shell-light-appbar-shadow,
|
|
$shell-light-appbar-paddingLeft
|
|
);
|
|
}
|
|
|
|
@include shell-content(
|
|
$shell-light-content-paddingTop,
|
|
$shell-light-content-paddingLeft,
|
|
$shell-light-content-max-width,
|
|
$shell-light-content-gutter-row,
|
|
$shell-light-content-gutter-column,
|
|
$shell-light-content-columns
|
|
);
|
|
|
|
#{$shell-prefix}-footer {
|
|
background: $shell-light-footer-background;
|
|
min-height: $shell-light-footer-min-height;
|
|
color: $shell-light-footer-color;
|
|
font-size: $shell-light-footer-font-size;
|
|
}
|
|
}
|
|
|
|
#{$shell-prefix}-aside {
|
|
&#{$shell-prefix}-navigation {
|
|
@include shell-navigation(
|
|
$shell-light-navigation-ver-width,
|
|
$shell-light-navigation-ver-background,
|
|
$shell-light-navigation-ver-divider,
|
|
$shell-light-navigation-ver-shadow,
|
|
$shell-light-navigation-ver-paddingTop,
|
|
$shell-light-navigation-ver-paddingBottom,
|
|
$shell-light-navigation-ver-width-mini
|
|
);
|
|
}
|
|
&#{$shell-prefix}-tooldock {
|
|
@include shell-tooldock(
|
|
$shell-light-tooldock-width,
|
|
$shell-light-tooldock-background,
|
|
$shell-light-tooldock-divider,
|
|
$shell-light-tooldock-shadow,
|
|
$shell-light-tooldock-paddingTop,
|
|
$shell-light-tooldock-paddingBottom
|
|
);
|
|
}
|
|
#{$shell-prefix}-tooldockitem {
|
|
@include shell-tooldock-item(
|
|
$shell-light-tooldock-item-paddingTop,
|
|
$shell-light-tooldock-item-color,
|
|
$shell-light-tooldock-item-background,
|
|
$shell-light-tooldock-item-color-hover,
|
|
$shell-light-tooldock-item-background-hover
|
|
);
|
|
}
|
|
#{$shell-prefix}-localnavigation {
|
|
@include shell-localnavigation(
|
|
$shell-light-local-navigation-width,
|
|
$shell-light-local-navigation-background,
|
|
$shell-light-local-navigation-divider,
|
|
$shell-light-local-navigation-shadow,
|
|
$shell-light-local-navigation-paddingTop,
|
|
$shell-light-local-navigation-paddingBottom
|
|
);
|
|
}
|
|
#{$shell-prefix}-ancillary {
|
|
@include shell-ancillary(
|
|
$shell-light-ancillary-width,
|
|
$shell-light-ancillary-background,
|
|
$shell-light-ancillary-divider,
|
|
$shell-light-ancillary-shadow,
|
|
$shell-light-ancillary-paddingTop,
|
|
$shell-light-ancillary-paddingBottom
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-dark {
|
|
@include shell-trigger-background(
|
|
$shell-dark-header-background,
|
|
$shell-dark-header-background,
|
|
$shell-dark-local-navigation-background,
|
|
$shell-dark-ancillary-background
|
|
);
|
|
|
|
#{$shell-prefix}-header {
|
|
@include shell-header-type(
|
|
$shell-dark-header-color,
|
|
$shell-dark-header-height,
|
|
$shell-dark-header-background,
|
|
$shell-dark-header-divider,
|
|
$shell-dark-header-shadow,
|
|
$shell-dark-header-paddingLeft
|
|
);
|
|
|
|
#{$shell-prefix}-navigation {
|
|
@include shell-header-navigation(
|
|
$shell-dark-navigation-hoz-align,
|
|
$shell-dark-header-height,
|
|
$shell-dark-header-height,
|
|
$shell-dark-navigation-hoz-marginLeft
|
|
);
|
|
}
|
|
}
|
|
|
|
#{$shell-prefix}-task-header {
|
|
@include shell-task-header(
|
|
$shell-dark-multitask-min-height,
|
|
$shell-dark-multitask-background,
|
|
$shell-dark-multitask-divider,
|
|
$shell-dark-multitask-shadow,
|
|
$shell-dark-multitask-paddingLeft
|
|
);
|
|
}
|
|
|
|
#{$shell-prefix}-main {
|
|
background: $shell-dark-content-background;
|
|
|
|
#{$shell-prefix}-appbar {
|
|
@include shell-appbar(
|
|
$shell-dark-appbar-min-height,
|
|
$shell-dark-appbar-background,
|
|
$shell-dark-appbar-divider,
|
|
$shell-dark-appbar-shadow,
|
|
$shell-dark-appbar-paddingLeft
|
|
);
|
|
}
|
|
|
|
@include shell-content(
|
|
$shell-dark-content-paddingTop,
|
|
$shell-dark-content-paddingLeft,
|
|
$shell-dark-content-max-width,
|
|
$shell-dark-content-gutter-row,
|
|
$shell-dark-content-gutter-column,
|
|
$shell-dark-content-columns
|
|
);
|
|
|
|
#{$shell-prefix}-footer {
|
|
background: $shell-dark-footer-background;
|
|
min-height: $shell-dark-footer-min-height;
|
|
color: $shell-dark-footer-color;
|
|
font-size: $shell-dark-footer-font-size;
|
|
}
|
|
}
|
|
|
|
#{$shell-prefix}-aside {
|
|
&#{$shell-prefix}-navigation {
|
|
@include shell-navigation(
|
|
$shell-dark-navigation-ver-width,
|
|
$shell-dark-navigation-ver-background,
|
|
$shell-dark-navigation-ver-divider,
|
|
$shell-dark-navigation-ver-shadow,
|
|
$shell-dark-navigation-ver-paddingTop,
|
|
$shell-dark-navigation-ver-paddingBottom,
|
|
$shell-dark-navigation-ver-width-mini
|
|
);
|
|
}
|
|
&#{$shell-prefix}-tooldock {
|
|
@include shell-tooldock(
|
|
$shell-dark-tooldock-width,
|
|
$shell-dark-tooldock-background,
|
|
$shell-dark-tooldock-divider,
|
|
$shell-dark-tooldock-shadow,
|
|
$shell-dark-tooldock-paddingTop,
|
|
$shell-dark-tooldock-paddingBottom
|
|
);
|
|
}
|
|
#{$shell-prefix}-tooldockitem {
|
|
@include shell-tooldock-item(
|
|
$shell-dark-tooldock-item-paddingTop,
|
|
$shell-dark-tooldock-item-color,
|
|
$shell-dark-tooldock-item-background,
|
|
$shell-dark-tooldock-item-color-hover,
|
|
$shell-dark-tooldock-item-background-hover
|
|
);
|
|
}
|
|
#{$shell-prefix}-localnavigation {
|
|
@include shell-localnavigation(
|
|
$shell-dark-local-navigation-width,
|
|
$shell-dark-local-navigation-background,
|
|
$shell-dark-local-navigation-divider,
|
|
$shell-dark-local-navigation-shadow,
|
|
$shell-dark-local-navigation-paddingTop,
|
|
$shell-dark-local-navigation-paddingBottom
|
|
);
|
|
}
|
|
#{$shell-prefix}-ancillary {
|
|
@include shell-ancillary(
|
|
$shell-dark-ancillary-width,
|
|
$shell-dark-ancillary-background,
|
|
$shell-dark-ancillary-divider,
|
|
$shell-dark-ancillary-shadow,
|
|
$shell-dark-ancillary-paddingTop,
|
|
$shell-dark-ancillary-paddingBottom
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-brand {
|
|
@include shell-trigger-background(
|
|
$shell-brand-header-background,
|
|
$shell-brand-header-background,
|
|
$shell-brand-local-navigation-background,
|
|
$shell-brand-ancillary-background
|
|
);
|
|
|
|
#{$shell-prefix}-header {
|
|
@include shell-header-type(
|
|
$shell-brand-header-color,
|
|
$shell-brand-header-height,
|
|
$shell-brand-header-background,
|
|
$shell-brand-header-divider,
|
|
$shell-brand-header-shadow,
|
|
$shell-brand-header-paddingLeft
|
|
);
|
|
|
|
#{$shell-prefix}-navigation {
|
|
@include shell-header-navigation(
|
|
$shell-brand-navigation-hoz-align,
|
|
$shell-brand-header-height,
|
|
$shell-brand-header-height,
|
|
$shell-brand-navigation-hoz-marginLeft
|
|
);
|
|
}
|
|
}
|
|
|
|
#{$shell-prefix}-task-header {
|
|
@include shell-task-header(
|
|
$shell-brand-multitask-min-height,
|
|
$shell-brand-multitask-background,
|
|
$shell-brand-multitask-divider,
|
|
$shell-brand-multitask-shadow,
|
|
$shell-brand-multitask-paddingLeft
|
|
);
|
|
}
|
|
|
|
#{$shell-prefix}-main {
|
|
background: $shell-brand-content-background;
|
|
|
|
#{$shell-prefix}-appbar {
|
|
@include shell-appbar(
|
|
$shell-brand-appbar-min-height,
|
|
$shell-brand-appbar-background,
|
|
$shell-brand-appbar-divider,
|
|
$shell-brand-appbar-shadow,
|
|
$shell-brand-appbar-paddingLeft
|
|
);
|
|
}
|
|
|
|
@include shell-content(
|
|
$shell-brand-content-paddingTop,
|
|
$shell-brand-content-paddingLeft,
|
|
$shell-brand-content-max-width,
|
|
$shell-brand-content-gutter-row,
|
|
$shell-brand-content-gutter-column,
|
|
$shell-brand-content-columns
|
|
);
|
|
|
|
#{$shell-prefix}-footer {
|
|
background: $shell-brand-footer-background;
|
|
min-height: $shell-brand-footer-min-height;
|
|
color: $shell-brand-footer-color;
|
|
font-size: $shell-brand-footer-font-size;
|
|
}
|
|
}
|
|
|
|
#{$shell-prefix}-aside {
|
|
&#{$shell-prefix}-navigation {
|
|
@include shell-navigation(
|
|
$shell-brand-navigation-ver-width,
|
|
$shell-brand-navigation-ver-background,
|
|
$shell-brand-navigation-ver-divider,
|
|
$shell-brand-navigation-ver-shadow,
|
|
$shell-brand-navigation-ver-paddingTop,
|
|
$shell-brand-navigation-ver-paddingBottom,
|
|
$shell-brand-navigation-ver-width-mini
|
|
);
|
|
}
|
|
|
|
&#{$shell-prefix}-tooldock {
|
|
@include shell-tooldock(
|
|
$shell-brand-tooldock-width,
|
|
$shell-brand-tooldock-background,
|
|
$shell-brand-tooldock-divider,
|
|
$shell-brand-tooldock-shadow,
|
|
$shell-brand-tooldock-paddingTop,
|
|
$shell-brand-tooldock-paddingBottom
|
|
);
|
|
}
|
|
#{$shell-prefix}-tooldockitem {
|
|
@include shell-tooldock-item(
|
|
$shell-brand-tooldock-item-paddingTop,
|
|
$shell-brand-tooldock-item-color,
|
|
$shell-brand-tooldock-item-background,
|
|
$shell-brand-tooldock-item-color-hover,
|
|
$shell-brand-tooldock-item-background-hover
|
|
);
|
|
}
|
|
#{$shell-prefix}-localnavigation {
|
|
@include shell-localnavigation(
|
|
$shell-brand-local-navigation-width,
|
|
$shell-brand-local-navigation-background,
|
|
$shell-brand-local-navigation-divider,
|
|
$shell-brand-local-navigation-shadow,
|
|
$shell-brand-local-navigation-paddingTop,
|
|
$shell-brand-local-navigation-paddingBottom
|
|
);
|
|
}
|
|
#{$shell-prefix}-ancillary {
|
|
@include shell-ancillary(
|
|
$shell-brand-ancillary-width,
|
|
$shell-brand-ancillary-background,
|
|
$shell-brand-ancillary-divider,
|
|
$shell-brand-ancillary-shadow,
|
|
$shell-brand-ancillary-paddingTop,
|
|
$shell-brand-ancillary-paddingBottom
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-header #{$shell-prefix}-navigation {
|
|
&#{$shell-prefix}-nav-left {
|
|
justify-content: flex-start;
|
|
}
|
|
&#{$shell-prefix}-nav-right {
|
|
justify-content: flex-end;
|
|
}
|
|
&#{$shell-prefix}-nav-center {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
&#{$shell-prefix}-phone {
|
|
|
|
#{$shell-prefix}-header #{$shell-prefix}-navigation {
|
|
display: none;
|
|
}
|
|
#{$shell-prefix}-navigation {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: height .2s $motion-ease;
|
|
&#{$shell-prefix}-collapse {
|
|
padding: 0;
|
|
height: 0;
|
|
transition: height .2s $motion-ease;
|
|
}
|
|
}
|
|
#{$shell-prefix}-tooldock {
|
|
height: $shell-dark-tooldock-height;
|
|
left: 0;
|
|
right: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
&#{$shell-prefix}-collapse {
|
|
display: none;
|
|
height: 0;
|
|
padding: 0;
|
|
transition: all .2s $motion-ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
&#{$shell-prefix}-tablet,
|
|
&#{$shell-prefix}-phone {
|
|
#{$shell-prefix}-aside.#{$css-prefix}aside-ancillary {
|
|
width: 0;
|
|
}
|
|
#{$shell-prefix}-ancillary {
|
|
transform: translateX(-100%);
|
|
}
|
|
#{$shell-prefix}-aside.#{$css-prefix}aside-localnavigation {
|
|
width: 0;
|
|
}
|
|
}
|
|
}
|