mdhub/app/application/resources/site/scss/layout.scss

192 lines
3.4 KiB
SCSS

html,
body {
height: 100%;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
}
hr {
background: #eee;
height: 1px;
border: 0;
margin-top: 15px;
margin-bottom: 15px;
}
#main-container {
display: flex;
flex-direction: column;
position: relative;
min-height: calc(100vh - 69px);
}
#menu {
display: none;
ul {
padding: 0;
margin: 0;
list-style: none;
li {
padding-left: 20px;
}
}
a {
display: block;
text-decoration: none;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
color: #0a0e17;
transition: opacity 0.2s ease-out;
}
a:hover {
opacity: 0.65;
}
a.active {
font-weight: bold;
}
.menu__profile {
padding-top: 0;
padding-left: 0;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.menu__profile__logout {
color: rgba(143, 28, 28, 100);
cursor: pointer;
border: 0;
background: none;
transition: color 0.2s ease-out;
display: block;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
}
.menu__profile__logout:hover {
color: rgba(143, 28, 28, 0.65);
}
}
.block-copy {
background: #eee;
border: 1px solid #ccc;
padding: 7px 10px;
border-radius: 9px;
position: relative;
min-height: 40px;
margin-top: 30px;
.block-copy-text {
white-space: break-spaces;
overflow-wrap: break-word;
word-break: break-all;
}
button {
position: absolute;
right: 0;
top: -20px;
cursor: pointer;
}
}
.container-width {
padding-left: 15px;
padding-right: 15px;
}
.section-content {
.h1 {
font-size: 27px;
font-weight: bold;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
}
}
.margin-bottom-20 {
margin-bottom: 20px;
}
.quantity_pulls {
font-size: 14px;
color: #333;
display: inline-block;
vertical-align: middle;
}
.quantity_pulls:before {
content: ' ';
background: url('../images/icons/download.svg') left top no-repeat;
background-size: contain;
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
margin-right: 5px;
}
.dot {
padding-left: 7px;
padding-right: 7px;
color: #999;
}
@media (min-width: 1000px) {
.container-width {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
.section-content {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 200px 1fr;
grid-template-areas: "section-menu section-content";
}
#menu {
background: none;
grid-area: section-menu;
display: block;
padding-right: 20px;
padding-top: 14px;
ul {
padding-left: 0;
}
}
.menu__title {
display: none;
}
#content {
grid-area: section-content;
}
.block-copy {
margin-top: 0;
button {
display: none;
right: 5px;
top: 7px;
}
}
.block-copy:hover {
button {
display: block;
}
}
}