amis/scss/components/_panel.scss

181 lines
3.2 KiB
SCSS

.#{$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;
border-top: $Panel-fixedBottom-borderTop;
&.in {
position: fixed;
bottom: 0;
}
}
/* 主题 */
&--default {
border-color: $borderColor;
> .#{$ns}Panel-heading {
background: $Panel--default-bg;
color: $Panel--default-color;
.badge {
color: $Panel--default-badgeColor;
background: $Panel--default-badgeBg;
}
}
> .#{$ns}Panel-heading {
border-color: $Panel--default-headingBorderColor;
}
}
&--primary {
border-color: $primary;
> .#{$ns}Panel-heading {
background: $primary;
color: $white;
.badge {
color: $primary;
background: $white;
}
}
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
border-color: $primary;
}
}
&--success {
border-color: $success;
> .#{$ns}Panel-heading {
background: $success;
color: $white;
.badge {
color: $success;
background: $white;
}
}
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
border-color: $success;
}
}
&--info {
border-color: $info;
> .#{$ns}Panel-heading {
background: $info;
color: $white;
.badge {
color: $info;
background: $white;
}
}
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
border-color: $info;
}
}
&--warning {
border-color: $warning;
> .#{$ns}Panel-heading {
background: $warning;
color: $white;
.badge {
color: $warning;
background: $white;
}
}
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
border-color: $warning;
}
}
&--danger {
border-color: $danger;
> .#{$ns}Panel-heading {
background: $danger;
color: $white;
.badge {
color: $danger;
background: $white;
}
}
> .#{$ns}Panel-heading,
> .#{$ns}Panel-footer {
border-color: $danger;
}
}
/* 子组件 */
&-heading {
padding: $Panel-headingPadding;
border-bottom: $Panel-headingBorderBottom;
border-radius: $Panel-headingBorderRadius;
}
&-title {
margin-top: $Panel-titleMarginTop;
margin-bottom: $Panel-titleMarginBottom;
font-size: $Panel-titleFontSize;
color: $Panel-titleColor;
}
&-body {
padding: $Panel-bodyPadding;
}
&-footer {
border-color: $Panel-footerBorderColor;
border-radius: $Panel-footerBorderRadius;
background: $Panel-footerBg;
padding: $Panel-footerPadding;
border-style: solid;
border-width: $Panel-borderWidth 0 0 0;
.#{$ns}Button + .#{$ns}Button {
margin-left: $Panel-footerButtomMarginLeft;
}
}
&-btnToolbar {
@include clearfix();
text-align: $Panel-btnToolbarTextAlign;
.#{$ns}Button {
margin-left: $Panel-footerButtomMarginLeft;
}
&:empty {
display: none;
}
}
}