open-consul/ui/styles/_panels.scss

132 lines
2.6 KiB
SCSS

.panel {
border-width: 2px;
border-color: $gray-background;
@include transition(background-color .3s ease-in-out);
.panel-heading {
padding: 10px 7px;
background-color: transparent;
border-width: 2px;
border-color: $gray-background;
}
h4.panel-title {
padding: 4px 10px 4px 2px;
font-size: 20px;
color: $gray-light;
color: $gray-darker;
border-radius: 3px;
opacity: 0.8;
small {
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
margin-left: 5px;
padding-top: 2px;
}
.no-case {
text-transform: none;
}
.panel-note {
margin-top: 5px;
float: right;
font-weight: 600;
color: $gray-light;
font-size: 14px;
}
}
h3.panel-title {
padding: 4px 0px 4px 0px;
font-size: 20px;
color: $gray-light;
color: $gray-darker;
border-radius: 3px;
small {
font-size: 14px;
margin-left: 5px;
}
.panel-note {
margin-top: 5px;
float: right;
font-weight: 600;
color: $gray-light;
font-size: 14px;
}
}
.panel-body {
padding: 0px 7px 0px 7px;
p {
font-size: 14px;
color: $text-color;
}
h5 {
font-size: 12px;
}
h4.check {
font-size: 16px;
}
&.panel-form {
padding-bottom: 15px;
}
}
.panel-bar {
width: 100%;
height: 20px;
@include transition(background-color .1s linear);
}
&.panel-link {
border-bottom-width: 2px;
}
&.panel-list {
ul {
margin: 0;
li {
margin: 0;
border: 0;
}
}
}
.panel-bar-horizontal {
width: 20px;
float: left;
height: 50px;
margin-right: 10px;
display: block;
}
&.panel-short {
border-bottom-width: 0px;
}
&.panel-link:hover {
cursor: pointer;
background-color: lighten($gray-background, 8%);
}
&.active {
>.panel-heading {
border-color: $pink;
}
@include transition(border-color .1s linear);
border-color: $pink;
.panel-bar {
@include transition(background-color .1s linear);
background-color: $pink;
}
}
}