modules/cms/client/scss/_partials/_settings.scss
[data-lky-component="settings"] {
position: absolute;
top: $header-height;
left: 0px;
height: calc(100% - #{$header-height});
transform: translateX(-100%);
transition: transform $speed;
pointer-events: none;
box-shadow: 3px 23px 23px -2px rgba(0, 0, 0, 0.52);
border-top: 10px solid $color-background-highlight;
z-index: 999999;
> [data-lky-hook="settings.back"] {
width: 0px;
background: rgba(0, 0, 0, 0.25);
height: 100%;
float: left;
}
&[data-lky-open] {
transform: none;
pointer-events: all;
}
[data-lky-hook="settings.pick"] {
width: $settings-pick-width;
background-color: $color-background;
height: 100%;
float: left;
> ul {
padding: 0px;
margin: 0px;
> li {
box-sizing: content-box;
display: block;
height: $item-height;
line-height: $item-height;
padding-left: $item-height * 0.6;
cursor: pointer;
border-bottom: 1px solid $color-washed;
&[data-lky-hook="settings.open.cms"] {
border-bottom: 10px solid $color-background-highlight;
}
> a {
color: $color-white;
pointer-events: none;
text-transform: uppercase;
text-decoration: none;
vertical-align: middle;
> img {
margin-right: 0.75em;
vertical-align: middle;
}
}
&[data-class=divider] {
content: "";
display: block;
height: 10px;
background-color: $color-background-highlight;
border: none;
cursor: initial;
}
}
}
}
label {
margin: 5px 0px 28px;
display: block;
color: $color-background-accent;
font-size: 14px;
font-weight: 500;
> span {
display: inline-block;
padding: 0px 0px 8px;
}
> input,
> select {
background: white;
border: 1px solid $color-background-highlight;
border-radius: 0;
display: block;
width: 100%;
text-transform: none;
font-size: 13px;
font-weight: normal;
padding: 7px 8px;
color: $color-light-gray;
}
> input[type=url] {
& + figure {
padding: 6px 0 6px 6px;
font-size: 0.9em;
font-weight: 400;
> a {
display: block;
color: inherit;
text-decoration: none;
}
}
}
> select {
appearance: none;
padding-right: 38px;
background-image: url(../../../img/cms/cms/svg/down-arrow.svg);
background-position: calc(100% - 1em) center;
background-repeat: no-repeat;
background-size: auto 25%;
}
}
[data-lky-hook="settings.picker"] {
background-color: white;
color: $color-black;
height: 100%;
float: left;
transition: width $speed;
overflow-x: hidden;
overflow-y: auto;
width: $settings-edit-width;
padding: 25px;
}
[data-lky-hook="settings.picker"],
[data-lky-hook="settings.gallery"] {
input[type="search"] {
border: 1px solid $color-background-highlight;
color: $color-light-gray;
border-radius: 30px;
padding: 8px 10px;
width: 100%;
}
}
[data-lky-hook="settings.picker"] {
ul {
list-style: none;
padding: 15px 0px;
margin: 0px;
li.pagination {
text-align: right;
display: block;
> ul > li {
margin-top: 0;
padding-top: 0;
border-top: 0;
display: inline-block;
margin-left: 30px;
vertical-align: middle;
}
&:hover {
background: initial;
color: initial;
cursor: initial;
}
}
li {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
max-width: 100%;
& + li {
padding-top: 20px;
margin-top: 22px;
border-top: 1px solid lighten($color-lackey-light-gray, 30%);
}
img {
display: block;
margin: auto;
}
> span {
margin-top: 10px;
width: 100%;
display: block;
text-align: center;
}
> label {
display: block;
width: 100%;
margin: 0 0 5px;
text-align: center;
}
> button {
float: right;
height: 65px;
border-radius: 5px;
cursor: pointer;
}
div {
padding: 5px;
max-width: 100%;
&[data-lky-block] {
padding: 0;
margin: 0;
}
& + img { text-align: right; }
&:first-child {
flex: 1 0 auto;
span, pre {
overflow-x: auto;
width: 100%
}
pre {
font-size: 10px;
color: $color-lackey-light-gray;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
}
}
[data-lky-hook="settings.meta"],
[data-lky-hook="settings.dimensions"],
[data-lky-hook="settings.taxonomy"],
[data-lky-hook="settings.blocks"],
[data-lky-hook="settings.diff"],
[data-lky-hook="settings.url"],
[data-lky-hook="settings.upload"],
[data-lky-hook="settings.gallery"] {
width: 0px;
background-color: white;
color: $color-black;
height: 100%;
float: left;
transition: width $speed;
overflow-x: hidden;
overflow-y: hidden;
> div {
height: 100%;
width: $settings-edit-width;
> ul {
padding: 0px;
margin: 0px;
li.pagination {
text-align: right;
display: block;
> ul > li {
display: inline-block;
margin-left: 30px;
vertical-align: middle;
}
&:hover {
background: initial;
color: initial;
cursor: initial;
}
}
}
}
}
&[data-lky-has-media="true"] {
[data-lky-hook="settings.meta"] {
> div {
width: #{$settings-edit-width*2};
}
}
}
[data-lky-hook="settings.dimensions"] {
> div {
width: #{$settings-edit-width * 2};
> ul {
padding: 50px;
list-style: none;
}
}
}
[data-lky-hook="settings.dimensions"],
[data-lky-hook="settings.meta"] {
> div {
> ul {
> li {
table {
width: 100%;
font-size: 11px;
border-spacing: 0px;
border-collapse: collapse;
tr,
td {
padding: 5px;
border: 1px solid $color-light-gray;
input {
width: 100%;
}
}
thead {
background-color: $color-lightest-gray;
}
tr:nth-child(even) {
background-color: $color-lightest-gray;
}
}
}
}
}
}
[data-lky-hook="settings.meta"] {
input[type="text"] + [data-lky-btn] {
display: block;
cursor: pointer;
width: 100%;
padding: 0.6em 3em;
}
}
[data-lky-hook="settings.taxonomy"] {
[data-lky-btn] {
display: block;
cursor: pointer;
width: 100%;
margin-top: 5px;
padding: 3px 10px;
}
}
[data-lky-hook="settings.blocks"] {
> div {
padding: 50px;
}
ul {
list-style: none;
}
}
[data-lky-hook="settings.diff"] {
> aside {
padding: 50px;
}
}
[data-lky-hook="settings.meta"] {
> div {
> small {
padding: 50px 50px 0px 50px;
display: block;
}
> ul {
padding: 50px;
list-style: none;
&:empty:after {
content: "This element has no configurable settings!";
}
}
}
}
[data-lky-hook="settings.gallery"] {
> div {
width: #{$settings-edit-width*2};
padding: 25px;
> ul {
padding: 20px 0;
list-style: none;
> li {
// Remove button styles
background: transparent;
color: inherit;
padding: 0;
display: flex;
min-height: 50px;
padding: 8px 5px;
cursor: pointer;
& + li { margin-top: 15px; }
&:hover {
background: $color-lackey-light-blue;
color: #fff;
> section > h2 { color: #fff; }
}
> figure {
flex: 0 0 35%;
position: relative;
margin-right: 15px;
> * {
position: absolute;
box-sizing: content-box;
left: 50%;
top: 50%;
max-width: 100%;
max-height: 100%;
padding: 10px;
border-radius: 7px;
transform: translate(-50%, -50%);
}
&:not(:hover) > * {
transition: background-color 0.2s;
}
&:hover > * {
background-color: #000;
transition: background-color 0.2s 0.6s;
}
}
> section {
flex: 1 1 auto;
align-self: center;
overflow: hidden;
> h2 {
margin-bottom: 5px;
font-size: 18px;
font-weight: 400;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
}
}
[data-lky-hook="settings.taxonomy"] {
> div {
padding: 50px;
> section {
& + section { margin-top: 28px; }
> label {
margin-bottom: 5px;
}
> small {
font-size: 10px;
color: $color-washed;
padding: 10px;
display: block;
line-height: 150%;
letter-spacing: 0px;
&:empty { display: none; }
}
> ul {
margin-top: 1em;
}
[data-tag] + button { margin-top: 14px; }
}
}
}
&[data-lky-has-media="false"] {
[data-lky-hook="settings.open.meta"],
[data-lky-hook="settings.open.clear"] {
background-color: $color-lackey-light-gray;
pointer-events: none;
a {
color: $color-lackey-dark-gray;
cursor: none;
}
}
}
&[data-lky-edit="meta"] {
[data-lky-hook="settings.open.meta"] {
background-color: $color-background-accent;
}
[data-lky-hook="settings.meta"] {
width: $settings-edit-width;
overflow-y: auto;
}
&[data-lky-has-media="true"] {
[data-lky-hook="settings.meta"] {
width: #{$settings-edit-width * 2};
overflow-y: auto;
}
}
}
&[data-lky-edit="dimensions"] {
[data-lky-hook="settings.open.dimensions"] {
background-color: $color-background-accent;
}
[data-lky-hook="settings.dimensions"] {
width: #{$settings-edit-width * 2};
overflow-y: auto;
}
}
&[data-lky-edit="taxonomy"] {
[data-lky-hook="settings.open.taxonomy"] {
background-color: $color-background-accent;
}
[data-lky-hook="settings.taxonomy"] {
width: $settings-edit-width;
overflow-y: auto;
}
}
&[data-lky-edit="blocks"] {
[data-lky-hook="settings.open.blocks"] {
background-color: $color-background-accent;
}
[data-lky-hook="settings.blocks"] {
width: #{$settings-edit-width * 2};
overflow-y: auto;
}
}
&[data-lky-edit="diff"] {
[data-lky-hook="settings.open.diff"] {
background-color: $color-background-accent;
}
[data-lky-hook="settings.diff"] {
width: #{$settings-edit-width*2};
overflow-y: auto;
}
}
&[data-lky-edit="url"] {
[data-lky-hook="settings.open.url"] {
background-color: $color-background-accent;
}
[data-lky-hook="settings.url"] {
width: #{$settings-edit-width};
overflow-y: auto;
}
}
&[data-lky-edit="upload"] {
[data-lky-hook="settings.open.upload"] {
background-color: $color-background-accent;
}
[data-lky-hook="settings.upload"] {
width: #{$settings-edit-width};
overflow-y: auto;
}
}
&[data-lky-edit="gallery"] {
[data-lky-hook="settings.open.gallery"] {
background-color: $color-background-accent;
}
[data-lky-hook="settings.gallery"] {
width: #{$settings-edit-width*2};
overflow-y: auto;
}
}
}
[data-lky-hook="settings.overlay"] {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
width: 100%; height: 100%;
opacity: 0;
pointer-events: none;
background-color: $color-background-highlight;
transform: transition;
transition: transform $speed, opacity $speed;
}
[data-lky-component="settings"] ~ [data-lky-component="settings"] {
[data-lky-hook="settings.open.cms"],
[data-lky-hook="settings.open.diff"],
[data-lky-hook="settings.open.dimensions"] {
display: none;
}
}
[data-lky-component="settings"] + [data-lky-component="settings"] {
> [data-lky-hook="settings.back"] {
width: 50px;
}
}
[data-lky-component="settings"] + [data-lky-component="settings"] + [data-lky-component="settings"] {
> [data-lky-hook="settings.back"] {
width: 100px;
}
}
[data-lky-component="settings"] + [data-lky-component="settings"] + [data-lky-component="settings"] +[data-lky-component="settings"] {
> [data-lky-hook="settings.back"] {
width: 150px;
}
}