mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 12:08:13 +08:00
371 lines
6.7 KiB
SCSS
371 lines
6.7 KiB
SCSS
// 百度云舍主题: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}DropDown {
|
||
.#{$ns}DropDown-menu {
|
||
border: none;
|
||
> li {
|
||
color: #{$G2};
|
||
}
|
||
> li.is-disabled {
|
||
color: #{$G6};
|
||
}
|
||
}
|
||
}
|
||
|
||
.#{$ns}Toast {
|
||
.#{$ns}Toast-icon {
|
||
margin-right: #{px2rem(8px)};
|
||
}
|
||
.#{$ns}Toast-close {
|
||
margin-left: #{px2rem(8px)};
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.#{$ns}InputGroup {
|
||
// .#{$ns}TextControl-input {
|
||
// }
|
||
.#{$ns}InputGroup-btn .#{$ns}Button {
|
||
border-radius: px2rem(3px);
|
||
}
|
||
|
||
.#{$ns}InputGroup-btn:last-child .#{$ns}Button {
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
}
|
||
|
||
.#{$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-label {
|
||
font-size: #{$T3};
|
||
color: #{$G4};
|
||
}
|
||
|
||
.#{$ns}Form-item {
|
||
&--inline {
|
||
.#{$ns}Form-label {
|
||
margin-right: #{px2rem(16px)};
|
||
font-size: #{$T3};
|
||
color: #{$G4};
|
||
}
|
||
}
|
||
}
|
||
|
||
//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;
|
||
}
|
||
}
|
||
}
|