hubl/src/styles/base/main.scss

197 lines
2.6 KiB
SCSS
Raw Normal View History

2019-05-13 16:50:34 +00:00
$breakpoints: (phone: 480px,
tablet: 768px,
desktop: 1024px) !default;
[hidden],
.hidden {
display: none !important;
}
sib-ac-checker[hidden] {
display: block !important;
}
2019-05-14 16:19:30 +00:00
* {
outline: none;
}
2019-05-13 16:50:34 +00:00
:root {
font-size: 10px;
font-family: Open Sans, sans-serif;
--sib-notifications-theme: #{$color-46-100-50};
body {
background-color: $color-210-25-95;
color: $color-213-4-50;
font-size: 1.6rem;
overflow: hidden;
overflow-wrap: break-word;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
2019-05-14 15:32:42 +00:00
main {
display: flex;
flex-direction: row;
height: 100%;
max-width: 100%;
overflow: hidden;
}
2019-05-13 16:50:34 +00:00
}
img {
max-height: 100%;
max-width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-216-4-22;
font-weight: 600;
padding: 0;
span {
font-weight: 400;
padding-left: 0.85rem;
&:before {
content: '// ';
}
}
}
h1 {
font-size: 2rem;
2019-05-13 16:50:34 +00:00
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.6rem;
}
h4 {
font-size: 1.2rem;
}
h5 {
font-size: 2rem;
}
button {
background: none;
border: none;
padding: 0;
}
2019-05-14 15:32:42 +00:00
sib-route,
sib-link,
button,
input,
a {
cursor: pointer;
&:hover,
&:link,
&:active {
cursor: pointer;
}
2019-05-13 16:50:34 +00:00
}
2019-10-21 11:12:04 +00:00
sib-delete {
button {
@include icon('close');
background-color: $color-233-18-29;
border: none;
border-radius: 100em;
color: $color-0-0-100;
cursor: pointer;
font-size: 1.4rem;
font-weight: bold;
padding: 0.55rem 2.5rem;
text-transform: uppercase;
&::before {
margin-right: 1rem;
}
}
}
2019-05-14 15:32:42 +00:00
%padding-main {
padding: 5rem;
2019-05-13 16:50:34 +00:00
}
2019-05-14 15:32:42 +00:00
.content-box {
2019-05-13 16:50:34 +00:00
@include window-style-modal();
display: flex;
flex-direction: column;
flex-grow: 1;
margin: 2rem 1rem 5rem 2rem;
2019-05-14 15:32:42 +00:00
&.full-width {
background: $color-0-0-100;
flex: 1;
font-size: 1.5rem;
margin: 0 auto;
min-height: calc(100vh - 84px);
}
&.with-padding {
@extend %padding-main;
}
2019-05-14 15:32:42 +00:00
}
2019-05-13 16:50:34 +00:00
2019-06-05 09:45:41 +00:00
.drive {
width: 100%;
border: 0;
}
2019-05-14 15:32:42 +00:00
.backlink {
font-size: 1.5rem;
margin: 2rem 0 0 2rem;
@include icon('arrow-left-circle');
color: #3d4057;
text-decoration: underline;
2019-05-13 16:50:34 +00:00
2019-05-14 15:32:42 +00:00
&::before {
text-decoration: none;
2019-05-13 16:50:34 +00:00
}
2019-05-14 15:32:42 +00:00
&::before {
font-size: 2rem;
margin-right: 1rem;
2019-05-13 16:50:34 +00:00
}
}
.name {
color: $color-216-4-22;
font-size: 2rem;
font-weight: bold;
}
.username {
&::before {
content: '@';
}
}
.section {
border-bottom: 1px solid $color-221-51-90;
padding: 4.5rem;
}
2019-05-13 16:50:34 +00:00
// Compatibility layer for non-updated components
@import 'compat';
2019-05-14 15:32:42 +00:00
// Other base components
@import 'form';
@import 'header';
@import 'menu-left';