amis/scss/themes/cxd.scss

339 lines
6.2 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// 百度云舍主题http://console.yunshe.design/docs/index
@import './cxd-variables';
@import './common';
.#{$ns}Switch {
.text {
margin: 0 px2rem(8px) 0 px2rem(25px);
vertical-align: super;
}
.slider {
&:before {
width: calc(var(--Switch-height) - #{px2rem(4px)});
top: px2rem(2px);
bottom: px2rem(2px);
}
}
&:active {
.slider::before {
width: calc(var(--Switch-height) + #{px2rem(2px)});
border-radius: 10px;
}
}
&:hover {
background: var(--Switch-onHover-bgColor);
}
&.is-checked {
background: var(--Switch-checked-bgColor);
.slider::before {
right: px2rem(2px);
}
.text {
margin: 0 px2rem(25px) 0 px2rem(8px);
}
&:hover {
background: var(--Switch-checked-onHover-bgColor);
}
&:active {
background: var(--Switch-checked-onActive-bgColor);
}
}
}
// input选择器模式
.#{$ns}TextControl-sugs {
border-radius: px2rem(3px);
top: calc(var(--Form-input-height) + #{px2rem(4px)});
box-shadow: #{px2rem(2px)} #{px2rem(4px)} #{px2rem(8px)} rgba(0, 0, 0, 0.2);
border: none;
}
.#{$ns}Select {
.#{$ns}PopOver {
.#{$ns}Select-menu {
border-radius: #{$R3};
.#{$ns}Select-option {
// height: var(--Form-input-height);
line-height: 1.1;
padding: px2rem(5px) px2rem(12px);
}
}
}
}
.#{$ns}NestedSelectControl {
.#{$ns}PopOver {
.#{$ns}NestedSelect-menuOuter {
.#{$ns}NestedSelect-menu {
border-radius: #{$R3};
.#{$ns}NestedSelect-option {
height: var(--Form-input-height);
padding: 0 px2rem(12px);
.#{$ns}NestedSelect-optionArrowRight {
padding-right: 0;
}
}
&:not(:first-child) {
margin-left: 2px;
}
}
}
}
}
.#{$ns}TreeSelectControl {
.#{$ns}PopOver {
box-shadow: var(--boxShadow);
.#{$ns}Tree {
border-radius: #{$R3};
border: none;
}
}
}
.#{$ns}Toast {
.#{$ns}Toast-icon {
margin-right: #{px2rem(8px)};
}
.#{$ns}Toast-close {
margin-left: #{px2rem(8px)};
cursor: pointer;
}
}
.#{$ns}Button--iconOnly {
min-width: var(--Button-height);
}
.#{$ns}Alert {
font-weight: #{$W2};
.#{$ns}Alert-close {
opacity: 1;
color: #{$G5};
&:hover {
color: #{$G4};
}
&:active {
color: #{$G3};
}
}
}
.#{$ns}IconPickerControl {
.#{$ns}IconPickerControl-input--withAC {
.#{$ns}IconPickerControl-sugsPanel {
border: none;
box-shadow: var(--boxShadow);
border-radius: px2rem(3px);
}
}
}
.#{$ns}Combo {
.#{$ns}Combo-items {
.#{$ns}Combo-item {
.#{$ns}Combo-delBtn {
padding-top: calc(
(var(--Form-input-height) - var(--Form-input-lineHeight) * 10px) / 2
);
}
}
}
}
.#{$ns}LocationControl {
.#{$ns}PopOver {
border: none;
box-shadow: var(--boxShadow);
}
}
.#{$ns}Transfer {
&-title {
height: var(--Form-input-height);
padding-left: #{px2rem(16px)};
padding-right: #{px2rem(16px)};
}
.#{$ns}ListCheckboxes {
.#{$ns}ListCheckboxes-item {
padding-left: #{px2rem(16px)};
padding-right: #{px2rem(16px)};
}
}
}
.#{$ns}Modal {
box-shadow: var(--boxShadow);
&-content {
padding: #{px2rem(24px)};
border-radius: #{$R4};
}
&-body {
padding: #{px2rem(16px)} 0 #{px2rem(24px)} 0;
font-size: #{$T2};
font-weight: #{$W2};
}
&-footer {
.#{$ns}Button {
margin-left: #{px2rem(16px)};
}
}
}
.#{$ns}Drawer {
&-content {
border-radius: #{$R4};
}
&-header {
border-radius: #{$R4} 0 0 0;
}
&-title {
font-size: #{$T3};
font-weight: #{$W3};
}
&-body {
font-size: #{$T3};
font-weight: #{$W2};
}
}
.#{$ns}Drawer--right {
.#{$ns}Drawer-header {
border-radius: #{$R4} 0 0 0;
}
.#{$ns}Drawer-footer {
justify-content: flex-end;
.#{$ns}Button {
margin-left: #{px2rem(16px)};
}
}
}
.#{$ns}Drawer--left {
.#{$ns}Drawer-header {
border-radius: 0 #{$R4} 0 0;
}
.#{$ns}Drawer-footer {
.#{$ns}Button {
margin-left: #{px2rem(16px)};
}
}
}
.#{$ns}Drawer--top {
.#{$ns}Drawer-footer {
.#{$ns}Button {
margin-left: #{px2rem(16px)};
}
}
}
.#{$ns}Drawer--bottom {
.#{$ns}Drawer-header {
border-radius: #{$R4} #{$R4} 0 0;
}
.#{$ns}Drawer-footer {
.#{$ns}Button {
margin-left: #{px2rem(16px)};
}
}
}
.#{$ns}Steps {
.#{$ns}StepsItem {
&-container {
&Icon {
padding-right: #{px2rem(8px)};
.#{$ns}StepsItem-icon {
width: #{px2rem(24px)};
height: #{px2rem(24px)};
display: inline-flex;
align-items: center;
justify-content: center;
svg {
width: #{px2rem(12px)};
height: #{px2rem(12px)};
top: 0;
}
}
&Wrapper {
.#{$ns}StepsItem-body {
.#{$ns}StepsItem-title {
&:after {
padding-right: #{px2rem(8px)};
}
}
.#{$ns}StepsItem-subTitle {
padding-left: #{px2rem(8px)};
}
}
}
}
}
}
&--vertical {
.#{$ns}StepsItem {
&-container {
&Icon > .#{$ns}StepsItem-icon {
&:after {
top: px2rem(28px);
left: px2rem(10px);
transform: translate(px2rem(1px));
}
}
}
}
}
.#{$ns}StepsItem.is-finish {
.#{$ns}StepsItem-icon {
color: var(--Steps-status-success);
background-color: var(--white);
}
}
.#{$ns}StepsItem.is-error {
.#{$ns}StepsItem-icon {
color: var(--Steps-status-error);
background-color: var(--white);
border: 1px solid var(--Steps-status-error);
}
}
}
.#{$ns}Form-feedback {
list-style-type: none;
padding-left: 0;
}
.#{$ns}Form-item {
&--inline {
.#{$ns}Form-label {
margin-right: #{px2rem(16px)};
}
}
}
//FieldSet Form + Collapse
.#{$ns}Form {
.#{$ns}Collapse {
border: none;
&-header {
background-color: var(--white);
display: inline-flex;
justify-content: flex-end;
flex-direction: row-reverse;
}
&-content {
padding: 0;
}
}
}