p5.js-web-editor/client/styles/components/_quick-add.scss
2020-05-06 14:43:46 -04:00

126 lines
2.3 KiB
SCSS

.quick-add-wrapper {
min-width: #{600 / $base-font-size}rem;
overflow-y: scroll;
}
.quick-add {
width: auto;
padding: #{24 / $base-font-size}rem;
}
.quick-add__item {
display: flex;
align-items: center;
height: #{64 / $base-font-size}rem;
padding-right: #{24 / $base-font-size}rem;
button, a {
@include themify() {
color: getThemifyVariable('primary-text-color');
}
}
}
.quick-add__item:nth-child(odd) {
@include themify() {
background: getThemifyVariable('table-row-stripe-color');
}
}
.quick-add__item-toggle {
display: flex;
align-items: center;
}
.quick-add__item-name {
flex: 1;
}
.quick-add__icon {
display: inline-block;
margin-right:#{15 / $base-font-size}rem;
width:#{35 / $base-font-size}rem;
height:#{35 / $base-font-size}rem;
@include icon();
@include themify() {
// icon graphic
path {
fill: getThemifyVariable('table-button-color');
}
// icon background circle
path:first-child {
fill: getThemifyVariable('table-button-background-color');
}
& svg {
width:#{35 / $base-font-size}rem;
height:#{35 / $base-font-size}rem;
}
}
}
.quick-add__icon > * {
display: none;
}
.quick-add__in-icon {
display: inline-block;
}
.quick-add__icon--in-collection .quick-add__in-icon {
@include themify() {
// icon graphic
& path {
fill: getThemifyVariable('table-button-active-color');
}
// icon background circle
& path:first-child {
fill: getThemifyVariable('table-button-background-active-color');
}
}
}
.quick-add__add-icon {
transform: rotate(45deg);
}
.quick-add__item:hover,
.quick-add__item-toggle:hover,
.quick-add__item-toggle:focus {
cursor: pointer;
@include themify() {
& .quick-add__icon path {
fill: getThemifyVariable('table-button-hover-color');
}
& .quick-add__icon path:first-child {
fill: getThemifyVariable('table-button-background-hover-color');
}
}
& .quick-add__in-icon {
display: none;
}
& .quick-add__icon--in-collection {
.quick-add__remove-icon {
display: inline-block;
}
.quick-add__add-icon {
display: none;
}
}
& .quick-add__icon--not-in-collection {
.quick-add__add-icon {
display: inline-block;
}
.quick-add__remove-icon {
display: none;
}
}
}