.playlist-info {
background-color: pvar(--submenuColor);
- margin-left: -15px;
+ margin-left: -$not-expanded-horizontal-margins;
margin-top: -$sub-menu-margin-bottom;
- padding: $sub-menu-margin-bottom 0 -15px 0;
+ padding: 10px;
display: flex;
justify-content: center;
@media screen and (max-width: $small-view) {
.playlist-info {
- margin-top: -$sub-menu-margin-bottom-small-view;
+ width: 100vw;
+ padding-top: 20px;
+ margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1);
}
}
--activatedActionButtonColor: #{$activated-action-button-color};
+ --expanded-horizontal-margin-content: $expanded-horizontal-margins;
+
font-family: $main-fonts;
font-weight: $font-regular;
color: pvar(--mainForegroundColor);
width: 100%;
.margin-content {
- margin-left: $expanded-horizontal-margins;
- margin-right: $expanded-horizontal-margins;
+ margin-left: var(--expanded-horizontal-margin-content);
+ margin-right: var(--expanded-horizontal-margin-content);
}
.sub-menu {
- padding-left: $expanded-horizontal-margins;
- padding-right: $expanded-horizontal-margins;
+ padding-left: var(--expanded-horizontal-margin-content);
+ padding-right: var(--expanded-horizontal-margin-content);
}
}
.main-col {
&.expanded {
.margin-content {
- margin-left: $expanded-horizontal-margins/2;
- margin-right: $expanded-horizontal-margins/2;
+ --expanded-horizontal-margin-content: $expanded-horizontal-margins/2;
}
}
}
.main-col {
&, &.expanded {
.margin-content {
- margin-left: $expanded-horizontal-margins/3;
- margin-right: $expanded-horizontal-margins/3;
+ --expanded-horizontal-margin-content: $expanded-horizontal-margins/3;
}
.sub-menu {
&, &.expanded {
.margin-content {
- margin-left: 15px;
- margin-right: 15px;
+ --expanded-horizontal-margin-content: 15px;
}
.sub-menu {