src/admin/scss/custom/websites.scss
.left {
float: left;
width: 30%;
}
.right {
float: right;
width: 65%;
}
.website-edition-form {
label {
text-transform: uppercase;
color: #777;
font-size: 1.2rem;
border-bottom: 1px solid #ddd;
margin-bottom: 1rem;
.button {
margin: -.4rem .4rem;
float: right;
}
}
input[type='text'], select {
font-family: 'Roboto', sans-serif;
font-size: .9rem;
margin-bottom: 1rem;
margin-left: .5rem;
}
input[type='text'] {
padding: .5rem;
}
fieldset {
margin-bottom: 1rem;
}
.name-section {
margin-bottom: 1rem;
}
.fa {
&::before {
color: #F00;
margin-left: .8rem;
cursor: pointer;
}
}
.website-settings-list {
margin-bottom: 5px;
padding: 5px;
font-size: 1rem;
list-style: none;
}
.website-parser-class, .templates >span {
margin-left: 1.25rem;
}
}
.website-settings-list {
list-style: none;
margin-left: 0;
}
.website-settings-list-item {
margin-right: 5px;
margin-bottom: 2px;
padding: 4px;
font-size: 1rem;
display: inline-block;
color: #fff;
font-weight: 600;
&.blue {
background-color: #1a7bf3;
}
&.green {
background-color: #3adb76;
}
&.red {
background-color: #ff7f50;
}
.fa {
&::before {
color: #fff;
margin-left: .9rem;
cursor: pointer;
}
}
}
/*
isplay: flex;
justify-content: center;
align-self: flex-start;
*/
.websites-group-holder {
.websitelist-table-heading, .websitelist-table-row {
background: #CCCBCB;
padding: 0 .9375rem;
}
.websitelist-table-heading {
font-weight: bold;
font-style: italic;
text-transform: uppercase;
}
}
.switcher-container {
margin-top: 2.5rem;
align-items: center;
justify-content: center;
align-self: flex-start;
text-align: center;
}
.overrides-container {
label {
line-height: 1.6;
}
.override-status-control {
position: relative;
@media #{$medium-up} {
justify-content: center;
align-self: flex-end;
text-align: center;
padding-bottom: .5rem;
}
.switch {
margin-bottom: 0;
@media #{$small-only} {
position: absolute;
right: 0;
}
}
}
}
.layout-settings-section {
.layout-content {
max-height: 0;
overflow-y: hidden;
margin-top: 10px;
-webkit-transition: max-height .3s ease-in-out;
-moz-transition: max-height .3s ease-in-out;
-o-transition: max-height .3s ease-in-out;
transition: max-height .3s ease-in-out;
.layout-content-section {
padding: .9375rem;
max-height: 0;
overflow-y: hidden;
-webkit-transition: max-height .3s ease-in-out;
-moz-transition: max-height .3s ease-in-out;
-o-transition: max-height .3s ease-in-out;
transition: max-height .3s ease-in-out;
}
}
.layout-btn, .layout-content-btn {
color: #2199e8;
padding: 0 2px;
background-color: #fff;
position: absolute;
cursor: pointer;
display: inline-block;
-webkit-transition: margin .3s, transform .3s;
transition: margin .3s, transform .3s;
&:hover {
color: #1583cc;
}
}
.layout-content-btn {
display: none;
}
&.opened {
.layout-content {
max-height: 600px;
min-height: 90px;
border: 1px solid #cacaca;
}
.layout-btn {
padding: 0 2px;
transform: translateX(5px);
&:hover {
color: #1583cc;
}
}
.layout-content-btn {
display: block;
}
.layout-content-section.opened {
max-height: 280px;
.layout-content-btn {
margin: 5px 10px;
padding: 0 2px;
}
}
}
}
.website-row {
background: #fff;
padding-bottom: 3px;
font-size: .9rem;
color: #777;
&.table-header {
font-size: 1rem;
color: #111;
}
> div {
padding: 10px;
}
.column, .columns {
background: #eee;
}
}
.website-bottom-panel {
position: fixed;
bottom: 0;
right: 0;
z-index: 1;
width: 20%;
background-color: #f3f3f3;
border-radius: 12px 0 0;
display: flex;
justify-content: flex-start;
padding: 10px 0;
box-shadow: 0 1px 4px 4px rgba(0, 0, 0, .2);
>div {
margin: .6rem;
>button {
margin: 0;
}
}
}