chore: Restyled draft configurator
This commit is contained in:
Joost De Cock
parent
c130826d3b
commit
bc6a0441cf
1 changed files with 182 additions and 130 deletions
|
|
@ -1,135 +1,187 @@
|
||||||
ul.config {
|
ul#draft-config {
|
||||||
@include button-font;
|
margin: 1rem 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
div.collapsed {
|
||||||
ul.config.l1 {
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
ul.config.l2,
|
|
||||||
ul.config.l3,
|
|
||||||
ul.config.l4 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.config li {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* level 1 */
|
|
||||||
ul.config.l1 > li > span {
|
|
||||||
display: block;
|
|
||||||
padding: 0.25rem 1rem;
|
|
||||||
font-weight: bold;
|
|
||||||
text-transform: uppercase;
|
|
||||||
border-bottom: 1px solid $oc-gray-6;
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* level 2 */
|
|
||||||
ul.config.l2 > li.collapsed > span,
|
|
||||||
ul.config.l2 > li.expanded > span {
|
|
||||||
display: block;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.config.l2 > li > span:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background: $oc-gray-5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* level 3 */
|
|
||||||
div.collapsed {
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
ul.config.l2 > li > div,
|
span.dflt,
|
||||||
ul.config.l3 > li > div,
|
span.p-dflt,
|
||||||
ul.config.l4 > li > div {
|
span.custom {
|
||||||
padding: 0.25rem 1.5rem 0.25rem 1.5rem;
|
|
||||||
}
|
|
||||||
ul.config.l3 > li > div.expanded,
|
|
||||||
ul.config.l4 > li > div.expanded {
|
|
||||||
margin: 0 0 2rem 0;
|
|
||||||
padding: 0.75 0.5rem 1.5rem;
|
|
||||||
}
|
|
||||||
ul.config.l2 > li > div:hover,
|
|
||||||
ul.config.l3 > li > div:hover,
|
|
||||||
ul.config.l4 > li > div:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
background: $oc-gray-4;
|
|
||||||
}
|
|
||||||
ul.config.l2 > li > div.expanded:hover,
|
|
||||||
ul.config.l3 > li > div.expanded:hover {
|
|
||||||
background: initial;
|
|
||||||
cursor: initial;
|
|
||||||
}
|
|
||||||
div.expanded div.MuiSlider-container {
|
|
||||||
width: initial;
|
|
||||||
margin: 0;
|
|
||||||
overflow: initial;
|
|
||||||
}
|
|
||||||
ul.config p {
|
|
||||||
@include body-font;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* level 4 */
|
|
||||||
ul.config.l3 li span.subheading {
|
|
||||||
padding-left: 2rem;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
ul.config.l4 > li > div {
|
|
||||||
padding-left: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
span.dflt,
|
|
||||||
span.p-dflt,
|
|
||||||
span.custom {
|
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
.theme-wrapper.light span.custom {
|
button.mini-icon-btn {
|
||||||
background: $oc-orange-2;
|
margin: 0;
|
||||||
}
|
padding: 2px;
|
||||||
.theme-wrapper.dark span.custom {
|
}
|
||||||
color: $oc-yellow-8;
|
svg.icon-col-exp {
|
||||||
}
|
|
||||||
.theme-wrapper.light span.p-dflt {
|
|
||||||
background: $oc-green-2;
|
|
||||||
}
|
|
||||||
.theme-wrapper.dark span.p-dflt {
|
|
||||||
color: $oc-green-6;
|
|
||||||
}
|
|
||||||
.theme-wrapper.light div.col-exp.expanded {
|
|
||||||
border-left: 4px solid $fc-text-light;
|
|
||||||
}
|
|
||||||
.theme-wrapper.dark div.col-exp.expanded {
|
|
||||||
border-left: 4px solid $fc-text-dark;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg.icon-col-exp {
|
|
||||||
margin-bottom: -5px;
|
margin-bottom: -5px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
|
transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
}
|
}
|
||||||
svg.icon-col-exp.expanded {
|
svg.icon-col-exp.expanded {
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
button.mini-icon-btn {
|
ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 2px;
|
padding: 0;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
> li {
|
||||||
|
padding: 0.25rem 0;
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
> span {
|
||||||
|
padding: 1rem;
|
||||||
|
svg {
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
margin-bottom: -4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul.config.level-1 > li {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: normal;
|
||||||
|
> div {
|
||||||
|
padding: 0.2rem 0.5rem 0.1rem 1rem;
|
||||||
|
}
|
||||||
|
> span {
|
||||||
|
padding: 0.2rem 0.5rem 0.1rem 1rem;
|
||||||
|
display: block;
|
||||||
|
svg {
|
||||||
|
margin-bottom: -5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> div:first-of-type > div:last-of-type {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
> div.col-exp {
|
||||||
|
padding: 0.2rem 0.5rem 0.1rem 2rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
> div.col-exp:hover {
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul.config.level-2 > li {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
font-weight: normal;
|
||||||
|
> span,
|
||||||
|
> div:first-of-type {
|
||||||
|
padding: 0.3rem 0.5rem 0.2rem 2rem;
|
||||||
|
line-height: 1;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
> div:first-of-type:hover,
|
||||||
|
> span:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
> div.col-exp.expanded {
|
||||||
|
padding: 0 1rem 0 3rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
span.subheading {
|
||||||
|
padding-left: 2.5rem;
|
||||||
|
}
|
||||||
|
span.subheading:after {
|
||||||
|
content: '...';
|
||||||
|
}
|
||||||
|
span.subheading:after {
|
||||||
|
content: '...';
|
||||||
|
}
|
||||||
|
> div:first-of-type > div:last-of-type {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul.config.level-2 > li.expanded > div.col-exp {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
ul.config.level-3 > li {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: normal;
|
||||||
|
> div:first-of-type {
|
||||||
|
padding: 0.3rem 0.5rem 0.2rem 3rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
> div:first-of-type:hover,
|
||||||
|
> span:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
> div.col-exp.expanded {
|
||||||
|
padding: 0 1rem 0 3rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
> div:first-of-type > div:last-of-type {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.theme-wrapper.light button.mini-icon-btn.recipe:enabled {
|
|
||||||
|
.theme-wrapper.light ul#draft-config {
|
||||||
|
color: $oc-gray-7;
|
||||||
|
> li > span > svg {
|
||||||
|
color: $oc-violet-5;
|
||||||
|
}
|
||||||
|
span.custom {
|
||||||
|
background: $oc-yellow-1;
|
||||||
|
border: 1px solid $oc-yellow-2;
|
||||||
|
}
|
||||||
|
span.p-dflt {
|
||||||
|
background: $oc-green-1;
|
||||||
|
border: 1px solid $oc-green-2;
|
||||||
|
}
|
||||||
|
button.mini-icon-btn.recipe:enabled {
|
||||||
color: $oc-blue-7;
|
color: $oc-blue-7;
|
||||||
}
|
}
|
||||||
.theme-wrapper.light button.mini-icon-btn.pattern:enabled {
|
button.mini-icon-btn.pattern:enabled {
|
||||||
color: $oc-green-8;
|
color: $oc-green-8;
|
||||||
|
}
|
||||||
|
span.subheading:hover,
|
||||||
|
li.collapsed:hover,
|
||||||
|
ul.config.level-1 > li > span:hover {
|
||||||
|
background-color: $oc-gray-2;
|
||||||
|
}
|
||||||
|
ul.config.level-3 > li {
|
||||||
|
> div:first-of-type:hover,
|
||||||
|
> span:hover {
|
||||||
|
background-color: $oc-gray-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.theme-wrapper.dark button.mini-icon-btn.recipe:enabled {
|
.theme-wrapper.dark ul#draft-config {
|
||||||
color: $oc-blue-5;
|
color: $oc-gray-3;
|
||||||
}
|
> li > span > svg {
|
||||||
.theme-wrapper.dark button.mini-icon-btn.pattern:enabled {
|
color: $oc-violet-3;
|
||||||
color: $oc-green-6;
|
}
|
||||||
|
span.custom {
|
||||||
|
background: $oc-yellow-8;
|
||||||
|
border: 1px solid $oc-yellow-9;
|
||||||
|
}
|
||||||
|
span.p-dflt {
|
||||||
|
background: $oc-green-8;
|
||||||
|
border: 1px solid $oc-green-9;
|
||||||
|
}
|
||||||
|
button.mini-icon-btn.recipe:enabled {
|
||||||
|
color: $oc-blue-7;
|
||||||
|
}
|
||||||
|
button.mini-icon-btn.pattern:enabled {
|
||||||
|
color: $oc-green-8;
|
||||||
|
}
|
||||||
|
span.subheading:hover,
|
||||||
|
li.collapsed:hover,
|
||||||
|
ul.config.level-1 > li > span:hover {
|
||||||
|
background-color: $oc-gray-9;
|
||||||
|
}
|
||||||
|
ul.config.level-3 > li {
|
||||||
|
> div:first-of-type:hover,
|
||||||
|
> span:hover {
|
||||||
|
background-color: $oc-gray-9;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue