css/sass/partials/_areas/_area-styles.scss
.kb-area__head {
position: relative;
}
.kb-area__wrap {
border-bottom: 1px solid #ccc;
&:last-child {
border-bottom: 0;
}
.kb-area__title-text span.title {
font-size: 13px;
margin-left: 0px;
font-weight: 100;
color: #ccc;
padding-left: 27px;
line-height: 37px;
font-style: italic;
}
.kb-area__title-text span.description {
font-size: 12px;
margin-left: 10px;
color: #ccc;
}
&:hover {
.kb-area__title-text span.title {
color: #222;
}
.kb-area__title-text span.description {
color: #222;
}
}
}
.area_description p {
padding: 0 0 0 16px;
margin: 0;
font-size: 1.1em;
font-style: italic
}
/* Area Settings */
.kb_area_settings {
display: block;
float: left;
width: 32px;
height: 32px;
background: url(assets/gear-32.jpg) no-repeat;
position: relative;
cursor: pointer;
}
.area_settings_list {
position: absolute;
width: 220px;
background: #2D3138;
top: 20px;
z-index: 5050;
display: none;
-webkit-box-shadow: 1px 1px 6px #333;
-moz-box-shadow: 1px 1px 6px #333;
box-shadow: 1px 1px 6px #333;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
left: 25px;
}
.area_setting {
background: #2D3138 !important;
border-top: 1px solid #3e444f;
border-bottom: 1px solid #212122;
padding: 0 10px;
margin: 0;
}
.area_setting .description {
font-size: 11px;
padding: 5px;
margin: 0;
line-height: 100%;
}
.area_setting.class label {
padding-left: 10px;
}
.area_setting.custom-css textarea {
width: 100%;
background: #3e444f;
line-height: 100%;
height: 100px;
color: #ccc;
}
.area_setting.custom-css textarea:focus {
background: #fff;
color: #000;
}
.area_setting.classselect select {
width: 100%;
}
.kb_area_templates {
position: relative;
cursor: pointer;
}
/* new design */
.area-wrap {
margin: 0;
padding: 0px;
background: #fcfcfc;
// border: 1px solid #eaeaea;
border-bottom: 1px solid #bbb;
border-top: 1px solid #fefefe;
}
.area-wrap:first-child {
padding-top: 0;
}
.kb-area__list-item {
//min-height: 60px;
background: none;
border: none;
padding: 5px 20px;
}
//.area-normal.has-sidebar {
// float: left;
// width: 58%;
// left: 0;
// z-index: 888;
// min-width: 550px;
//}
//.area-normal.has-sidebar {
// -webkit-transition: width .3s linear;
// left: 0;
// z-index: 888;
// min-width: 550px;
//}
//
//.area-side {
// float: right;
// width: 36%;
// -webkit-transition: width .3s linear;
// right: 0;
// z-index: 888;
//
//}
.area-bottom {
clear: both;
}
.kb-context-container {
// min-height: 180px;
margin-bottom: 20px;
padding: 0px;
box-shadow: 0px 1px 1px #fff;
}
.kb-context__inner {
background-color: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
.kb-area--footer{
padding: $halfpadding 27px;
overflow: hidden;
background-color: $grey-100;
border-top: 1px solid $grey-200;
}
.kb-area-block_limit {
font-size: 10px;
display: block;
color: $grey-400;
float: left;
}
.add-modules {
a {
float: right;
text-decoration: none;
font-size: 12px;
&:before {
content: "\f132";
font-family: 'dashicons';
position: relative;
top: 2px;
}
}
}
.kb-selectbox {
// border: 1px solid #eaeaea;
border-top: none;
border-bottom: none;
padding: 10px;
background: #fff;
// select {
// padding: 3px;
// margin: 0;
// margin-left: 6px;
// background: #fff;
// color: #888;
// border: 1px solid #eaeaea;
// outline: none;
// display: inline-block;
// -webkit-appearance: none;
// -moz-appearance: none;
// appearance: none;
// cursor: pointer;
// line-height: 13px !important;
// font-size: 12px;
// }
/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
select {
padding-right: 18px
}
}
// label {
// position: relative;
// }
// label:after {
// content: '<>';
// font: 11px "Consolas", monospace;
// color: #aaa;
// -webkit-transform: rotate(90deg);
// -moz-transform: rotate(90deg);
// -ms-transform: rotate(90deg);
// transform: rotate(90deg);
// right: 3px;
// top: 2px;
// padding: 0 0 2px;
// border-bottom: 1px solid #ddd;
// position: absolute;
// pointer-events: none;
// }
// label:before {
// content: '';
// background: #f8f8f8;
// position: absolute;
// pointer-events: none;
// display: block;
// }
}
.kb-area__item-placeholder {
background: #f2f2f2;
border: 5px dashed #ccc;
cursor: pointer;
color: #999;
padding: 10px 10px;
margin: 5px 30px;
transition:color .25s linear;
&:hover {
color: #333;
}
}
.kb-dynamic-area-proxy{
.kb-dynamic-area-proxy--inner{
padding: $halfpadding $fullpadding;
position: relative;
h4{
margin: 0;
}
h4 + p{
margin: 0;
}
h4 span {
font-weight: 100;
font-size: 85%;
}
.kb-button-small{
position: absolute;
right: $fullpadding;
top: $halfpadding;
}
}
}
.kb-area-move-handle{
cursor: move;
font-size: 23px;
}