42106e6601
We were using `overflow: scroll` as a workaround with a problem we had with the equalizer. But now we never need an extra vertical scroll bar, and we only need an extra horizontal scroll bar on small screens. Since the dashboard was using the class `admin-content` as well, we need to apply to the dashboard the same changes we've done in the admin section. I've extracted them into a mixin.
151 lines
2.3 KiB
SCSS
151 lines
2.3 KiB
SCSS
// Table of Contents
|
|
//
|
|
// 01. Logo
|
|
// 02. Side menu and content
|
|
// 03. Orbit bullets
|
|
// 04. Direct uploads
|
|
// ------------------
|
|
|
|
// 01. Logo
|
|
// --------
|
|
|
|
@mixin logo {
|
|
color: #fff;
|
|
display: inline-block;
|
|
font-family: "Lato" !important;
|
|
font-size: rem-calc(24);
|
|
font-weight: lighter;
|
|
|
|
@include breakpoint(medium) {
|
|
line-height: $line-height * 2;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
// 02. Side menu and content
|
|
// -------------------------
|
|
|
|
@mixin side-menu-and-content {
|
|
display: flex;
|
|
|
|
> :first-child {
|
|
flex: 25%;
|
|
min-width: 250px;
|
|
|
|
> :first-child {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
> :last-child {
|
|
flex: 75%;
|
|
overflow-x: auto;
|
|
padding: $line-height !important;
|
|
}
|
|
}
|
|
|
|
// 03. Orbit bullet
|
|
// ----------------
|
|
|
|
@mixin orbit-bullets {
|
|
@include disable-mouse-outline;
|
|
position: relative;
|
|
margin-top: $orbit-bullet-margin-top;
|
|
margin-bottom: $orbit-bullet-margin-bottom;
|
|
text-align: center;
|
|
|
|
button {
|
|
width: $orbit-bullet-diameter;
|
|
height: $orbit-bullet-diameter;
|
|
margin: $orbit-bullet-margin;
|
|
|
|
border-radius: 50%;
|
|
background-color: $orbit-bullet-background;
|
|
|
|
&:hover {
|
|
background-color: $orbit-bullet-background-active;
|
|
}
|
|
|
|
&.is-active {
|
|
background-color: $orbit-bullet-background-active;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 04. Direct uploads
|
|
// ------------------
|
|
|
|
@mixin direct-uploads {
|
|
|
|
.cached-image {
|
|
max-width: rem-calc(150);
|
|
max-height: rem-calc(150);
|
|
}
|
|
|
|
.progress-bar-placeholder {
|
|
display: none;
|
|
margin-bottom: $line-height;
|
|
}
|
|
|
|
.document,
|
|
.image {
|
|
|
|
.document-attachment,
|
|
.image-attachment {
|
|
padding-left: 0;
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.attachment-errors {
|
|
|
|
> .js-image-attachment,
|
|
> .js-document-attachment {
|
|
display: none;
|
|
|
|
~ .error {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.button {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
background-color: $light-gray;
|
|
}
|
|
|
|
.file-name {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.loading-bar {
|
|
height: 5px;
|
|
width: 0;
|
|
transition: width 500ms ease-out;
|
|
|
|
&.uploading {
|
|
background-color: $dark-gray;
|
|
}
|
|
|
|
&.complete {
|
|
background-color: $success-color;
|
|
}
|
|
|
|
&.errors {
|
|
background-color: $alert-color;
|
|
margin-top: $line-height / 2;
|
|
}
|
|
}
|
|
|
|
.loading-bar.no-transition {
|
|
transition: none;
|
|
}
|
|
}
|