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,112 +1,19 @@
|
|||
ul.config {
|
||||
@include button-font;
|
||||
ul#draft-config {
|
||||
margin: 1rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
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;
|
||||
}
|
||||
ul.config.l2 > li > div,
|
||||
ul.config.l3 > li > div,
|
||||
ul.config.l4 > li > div {
|
||||
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;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.theme-wrapper.light span.custom {
|
||||
background: $oc-orange-2;
|
||||
button.mini-icon-btn {
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
}
|
||||
.theme-wrapper.dark span.custom {
|
||||
color: $oc-yellow-8;
|
||||
}
|
||||
.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-right: 5px;
|
||||
|
|
@ -117,19 +24,164 @@ svg.icon-col-exp.expanded {
|
|||
transform: rotate(90deg);
|
||||
opacity: 1;
|
||||
}
|
||||
button.mini-icon-btn {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
padding: 0;
|
||||
}
|
||||
.theme-wrapper.light button.mini-icon-btn.recipe:enabled {
|
||||
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 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;
|
||||
}
|
||||
.theme-wrapper.light button.mini-icon-btn.pattern:enabled {
|
||||
button.mini-icon-btn.pattern:enabled {
|
||||
color: $oc-green-8;
|
||||
}
|
||||
.theme-wrapper.dark button.mini-icon-btn.recipe:enabled {
|
||||
color: $oc-blue-5;
|
||||
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 ul#draft-config {
|
||||
color: $oc-gray-3;
|
||||
> li > span > svg {
|
||||
color: $oc-violet-3;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
.theme-wrapper.dark button.mini-icon-btn.pattern:enabled {
|
||||
color: $oc-green-6;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue