accounts-frontend/src/components/ui/panel.scss

134 lines
2.3 KiB
SCSS
Raw Normal View History

@import '~components/ui/colors.scss';
@import '~components/ui/fonts.scss';
.panel {
background: $black;
}
$headerHeight: 60px;
.header {
box-sizing: border-box;
height: $headerHeight;
border-bottom: 1px solid lighter($black);
position: relative;
overflow: hidden;
font-family: $font-family-title;
text-align: center;
// Шрифт Roboto Condensed имеет странную высоту линии, так что компенсируем это
line-height: $headerHeight + 2px;
font-size: 20px;
color: #fff;
}
.headerControl {
composes: black from './buttons.scss';
float: left;
overflow: hidden;
height: $headerHeight - 1px;
width: 49px;
padding: 0;
border-right: 1px solid lighter($black);
line-height: 1;
text-align: center;
}
$bodyLeftRightPadding: 20px;
$bodyTopBottomPadding: 15px;
.body {
overflow: hidden;
padding: $bodyTopBottomPadding $bodyLeftRightPadding;
color: #ccc;
font-size: 18px;
b {
font-weight: normal;
color: #fff;
}
a {
color: #fff;
border-bottom: 1px dotted rgba(#fff, 0.75);
text-decoration: none;
transition: .25s;
&:hover {
border-bottom-color: rgba(#fff, 0.5);
}
}
}
.footer {
position: relative;
overflow: hidden;
height: 50px;
button {
width: 100%;
}
}
.bodyHeader {
position: relative;
overflow: hidden;
padding: 10px 20px;
margin: (-$bodyTopBottomPadding) (-$bodyLeftRightPadding) 15px;
max-height: 200px;
transition: 0.4s ease;
}
.isClosed {
max-height: 0;
opacity: 0;
padding: 0;
margin: 0;
}
.errorBodyHeader {
composes: bodyHeader;
background: $red;
border: 1px darker($red) solid;
font-size: 14px;
line-height: 1.3;
color: #fff;
a {
&:hover {
text-shadow: 0 0 1px #fff;
border-bottom-color: transparent;
}
}
}
.defaultBodyHeader {
composes: bodyHeader;
background: darker($black);
border: lighter($black) solid;
border-bottom-width: 5px;
border-top-width: 4px;
font-size: 14px;
line-height: 1.3;
color: #fff;
}
.close {
composes: close from './icons.scss';
position: absolute;
right: 5px;
top: 5px;
font-size: 10px;
cursor: pointer;
}