amis/scss/components/_panel.scss

177 lines
3.8 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}Panel {
margin-bottom: $Panel-marginBottom;
background-color: $Panel-bg;
border: $Panel-border;
border-radius: $Panel-borderRadius;
-webkit-box-shadow: $Panel-boxShadow;
box-shadow: $Panel-boxShadow;
&-fixedBottom {
position: absolute;
background: $white;
z-index: $zindex-affix;
bottom: 999999px;
box-shadow: $Panel-fixedBottom-boxShadow;
2019-09-04 15:44:43 +08:00
border-top: $Panel-fixedBottom-borderTop;
2019-04-30 11:11:25 +08:00
&.in {
position: fixed;
bottom: 0;
}
}
/* 主题 */
&--default {
border-color: $borderColor;
> .#{$ns}Panel-heading {
2019-09-09 00:53:39 +08:00
background: $Panel--default-bg;
2019-04-30 11:11:25 +08:00
color: $Panel--default-color;
2019-04-30 11:11:25 +08:00
.badge {
color: $Panel--default-badgeColor;
2019-09-09 00:53:39 +08:00
background: $Panel--default-badgeBg;
2019-04-30 11:11:25 +08:00
}
}
> .#{$ns}Panel-heading {
2019-04-30 11:11:25 +08:00
border-color: $Panel--default-headingBorderColor;
}
}
2019-04-30 11:11:25 +08:00
&--primary {
border-color: $primary;
> .#{$ns}Panel-heading {
2019-09-09 00:53:39 +08:00
background: $primary;
2019-04-30 11:11:25 +08:00
color: $white;
2019-04-30 11:11:25 +08:00
.badge {
color: $primary;
2019-09-09 00:53:39 +08:00
background: $white;
2019-04-30 11:11:25 +08:00
}
}
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
2019-04-30 11:11:25 +08:00
border-color: $primary;
}
}
2019-04-30 11:11:25 +08:00
&--success {
border-color: $success;
> .#{$ns}Panel-heading {
2019-09-09 00:53:39 +08:00
background: $success;
2019-04-30 11:11:25 +08:00
color: $white;
2019-04-30 11:11:25 +08:00
.badge {
color: $success;
2019-09-09 00:53:39 +08:00
background: $white;
2019-04-30 11:11:25 +08:00
}
}
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
2019-04-30 11:11:25 +08:00
border-color: $success;
}
}
2019-04-30 11:11:25 +08:00
&--info {
border-color: $info;
> .#{$ns}Panel-heading {
2019-09-09 00:53:39 +08:00
background: $info;
2019-04-30 11:11:25 +08:00
color: $white;
2019-04-30 11:11:25 +08:00
.badge {
color: $info;
2019-09-09 00:53:39 +08:00
background: $white;
2019-04-30 11:11:25 +08:00
}
}
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
2019-04-30 11:11:25 +08:00
border-color: $info;
}
}
2019-04-30 11:11:25 +08:00
&--warning {
border-color: $warning;
> .#{$ns}Panel-heading {
2019-09-09 00:53:39 +08:00
background: $warning;
2019-04-30 11:11:25 +08:00
color: $white;
2019-04-30 11:11:25 +08:00
.badge {
color: $warning;
2019-09-09 00:53:39 +08:00
background: $white;
2019-04-30 11:11:25 +08:00
}
}
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
2019-04-30 11:11:25 +08:00
border-color: $warning;
}
}
2019-04-30 11:11:25 +08:00
&--danger {
border-color: $danger;
> .#{$ns}Panel-heading {
2019-09-09 00:53:39 +08:00
background: $danger;
2019-04-30 11:11:25 +08:00
color: $white;
2019-04-30 11:11:25 +08:00
.badge {
color: $danger;
2019-09-09 00:53:39 +08:00
background: $white;
2019-04-30 11:11:25 +08:00
}
}
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
2019-04-30 11:11:25 +08:00
border-color: $danger;
}
}
2019-04-30 11:11:25 +08:00
/* 子组件 */
&-heading {
padding: $Panel-headingPadding;
border-bottom: $Panel-headingBorderBottom;
border-radius: $Panel-headingBorderRadius;
}
2019-04-30 11:11:25 +08:00
&-title {
margin-top: $Panel-titleMarginTop;
margin-bottom: $Panel-titleMarginBottom;
font-size: $Panel-titleFontSize;
color: $Panel-titleColor;
}
2019-04-30 11:11:25 +08:00
&-body {
padding: $Panel-bodyPadding;
}
2019-04-30 11:11:25 +08:00
&-footer {
border-color: $Panel-footerBorderColor;
border-radius: $Panel-footerBorderRadius;
2019-09-09 00:53:39 +08:00
background: $Panel-footerBg;
2019-04-30 11:11:25 +08:00
padding: $Panel-footerPadding;
border-style: solid;
border-width: $Panel-borderWidth 0 0 0;
2019-04-30 11:11:25 +08:00
.#{$ns}Button + .#{$ns}Button {
margin-left: $Panel-footerButtomMarginLeft;
}
}
2019-04-30 11:11:25 +08:00
&-btnToolbar {
2019-09-04 15:44:43 +08:00
@include clearfix();
2019-04-30 11:11:25 +08:00
text-align: $Panel-btnToolbarTextAlign;
2019-04-30 11:11:25 +08:00
.#{$ns}Button {
margin-left: $Panel-footerButtomMarginLeft;
}
}
}