e140702784
* start to create asset list * begin refactoring overlay component to remove duplicate code * refactoring of overlays, asset list styles * changes to add size to asset list * fixes to asset list * handle case in which a user hasn't uploaded any assets * fix bug in which asset list only grabbed first asset * remove console.log * update overlay exit styling to use icon mixin
102 lines
2.4 KiB
SCSS
102 lines
2.4 KiB
SCSS
.about__logo {
|
|
@include themify() {
|
|
& path {
|
|
fill: getThemifyVariable('logo-color');
|
|
}
|
|
}
|
|
}
|
|
|
|
.about__play-video {
|
|
padding-top: #{9 / $base-font-size}rem;
|
|
padding-left: #{5 / $base-font-size}rem;
|
|
}
|
|
|
|
.about__play-video-button {
|
|
@include themify() {
|
|
@extend %toolbar-button;
|
|
width: #{32 / $base-font-size}rem;
|
|
height: #{32 / $base-font-size}rem;
|
|
line-height: #{34 / $base-font-size}rem;
|
|
border-radius: #{24 / $base-font-size}rem;
|
|
background-color: $about-play-background-color;
|
|
border: solid 0.5px $about-button-border-color;
|
|
&:hover {
|
|
border-color: getThemifyVariable('button-background-hover-color');
|
|
}
|
|
}
|
|
padding-left: 2px;
|
|
margin-right: #{9 / $base-font-size}rem;
|
|
svg {
|
|
width: #{11 / $base-font-size}rem;
|
|
height: #{11 / $base-font-size}rem;
|
|
margin-left: #{1 / $base-font-size}rem;
|
|
}
|
|
}
|
|
|
|
.about__content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding-top: #{17 / $base-font-size}rem;
|
|
padding-right: #{78 / $base-font-size}rem;
|
|
padding-bottom: #{20 / $base-font-size}rem;
|
|
padding-left: #{20 / $base-font-size}rem;
|
|
width: #{720 / $base-font-size}rem;
|
|
& a {
|
|
color: $form-navigation-options-color;
|
|
}
|
|
}
|
|
|
|
.about__content-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.about__content-column-title {
|
|
font-size: #{21 / $base-font-size}rem;
|
|
padding-left: #{17 / $base-font-size}rem;
|
|
}
|
|
|
|
.about__content-column-asterisk {
|
|
padding-right: #{5 / $base-font-size}rem;
|
|
@include themify() {
|
|
& path {
|
|
fill: getThemifyVariable('logo-color');
|
|
stroke: getThemifyVariable('logo-color');
|
|
}
|
|
}
|
|
}
|
|
|
|
.about__content-column-list {
|
|
@include themify() {
|
|
padding-top: #{10 / $base-font-size}rem;
|
|
font-size: #{16 / $base-font-size}rem;
|
|
& a {
|
|
color: getThemifyVariable(about-list-text-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.about__footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: #{18 / $base-font-size}rem;
|
|
padding-right: #{20 / $base-font-size}rem;
|
|
padding-bottom: #{21 / $base-font-size}rem;
|
|
padding-left: #{291 / $base-font-size}rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.about__footer-list {
|
|
padding-top: #{12 / $base-font-size}rem;
|
|
}
|
|
|
|
.about__ok-button {
|
|
@include themify() {
|
|
@extend %button;
|
|
padding: #{7 / $base-font-size}rem #{13 / $base-font-size}rem;
|
|
font-size: #{16 / $base-font-size}rem;
|
|
border: #{0.5 / $base-font-size}rem solid $toast-background-color;
|
|
}
|
|
}
|