hubl/src/styles/base/main.scss

514 lines
7.4 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;
}
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;
min-height: 100vh;
2019-12-12 16:32:00 +00:00
overflow-wrap: break-word;
overflow-x: hidden; /* To stop getting horizontal scrolling if anything overflows the width */
2019-05-13 16:50:34 +00:00
}
2019-05-14 15:32:42 +00:00
main {
display: flex;
overflow: hidden;
height: calc(100vh - 83px); /* 83px = height of the header */
position: relative;
width: 100%;
backface-visibility: hidden;
/*will-change: overflow;*/
2019-05-14 15:32:42 +00:00
}
2019-05-13 16:50:34 +00:00
}
/* Add scrollbar to the left and right menu, and to the content */
nav, .views-container {
overflow: auto;
height: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
}
2020-01-18 20:43:41 +00:00
/* Custom scrollbar of the left-menu */
nav {
scrollbar-width: thin;
scrollbar-color: $color-244-10-70 $color-233-18-29;
&::-webkit-scrollbar-track {
background: $color-233-18-29;
}
&::-webkit-scrollbar-thumb {
background-color: $color-244-10-70;
border-radius: 6px;
border: 3px solid $color-233-18-29;
}
&::-webkit-scrollbar {
width: 11px;
}
}
/* Custom scrollbar of the content */
.views-container {
scrollbar-width: thin;
scrollbar-color: $color-244-10-70 white;
&::-webkit-scrollbar-track {
background: white;
}
&::-webkit-scrollbar-thumb {
background-color: $color-244-10-70;
border-radius: 6px;
border: 3px solid white;
}
&::-webkit-scrollbar {
width: 11px;
}
}
/* Quick fix. Will be removed later */
#admin-circles,
#admin-projects {
display: contents;
}
2019-05-13 16:50:34 +00:00
img {
max-height: 100%;
max-width: 100%;
}
h1,
.h1-like,
2019-05-13 16:50:34 +00:00
h2,
.h2-like,
2019-05-13 16:50:34 +00:00
h3,
h4,
h5,
h6 {
font-weight: bold;
2019-05-13 16:50:34 +00:00
/*span {
2019-05-13 16:50:34 +00:00
font-weight: 400;
padding-left: 0.85rem;
&:before {
content: '// ';
}
}*/
2019-05-13 16:50:34 +00:00
}
.h2-like {
display: block;
margin: 14.94px 0;
width: 100%;
2019-05-13 16:50:34 +00:00
}
h1, .h1-like {
color: $color-233-18-29;
2019-05-13 16:50:34 +00:00
font-size: 2rem;
text-transform: uppercase;
&.without-margin {
margin: 0;
}
}
h2, .h2-like {
color: $color-216-4-22;
font-size: 1.8rem;
text-transform: uppercase;
2019-05-13 16:50:34 +00:00
}
h3 {
color: $color-216-4-22;
font-size: 1.7rem;
2019-05-13 16:50:34 +00:00
}
h4 {
font-size: 1.2rem;
}
h5 {
font-size: 2rem;
}
2019-05-14 15:32:42 +00:00
%padding-main {
padding: 5rem;
2019-05-13 16:50:34 +00:00
}
%padding-block {
padding: 3.2rem;
}
#admin-circle-create,
#admin-project-create {
input[type='submit'] {
@extend .button,
.text-bold,
.text-uppercase,
.reversed,
.button-dark,
.bordered;
margin-left: auto;
margin-top: 3.2rem;
}
}
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.6rem;
2019-05-14 15:32:42 +00:00
margin: 0 auto;
min-height: 100%;
2019-05-14 15:32:42 +00:00
}
&.with-padding {
@extend %padding-main;
}
2019-05-14 15:32:42 +00:00
}
2019-05-13 16:50:34 +00:00
.content-box__header {
border-bottom: 1px solid $color-221-51-90;
padding: 3rem;
div {
.h1-aside {
font-size: 1.8rem;
&:not(:empty)::before {
color: $color-233-18-29;
2019-12-19 13:10:09 +00:00
content: ' - ';
font-size: 2rem;
font-weight: bold;
}
}
.description {
color: $color-215-6-63;
}
.name {
color: $color-233-18-29;
font-weight: normal;
}
}
}
.modal {
color: white;
margin: 75px;
padding: 40px;
max-height: 85vh;
text-align: center;
2019-06-05 09:45:41 +00:00
img {
max-width: 75%;
}
2019-10-23 11:55:42 +00:00
sib-link {
font-size: 2.7rem;
position: absolute;
right: 32px;
top: 32px;
button {
color: $color-233-18-29;
}
2019-10-23 11:55:42 +00:00
}
}
.drive {
width: 100%;
border: 0;
}
2019-05-14 15:32:42 +00:00
.backlink {
2019-11-08 10:34:30 +00:00
@include icon('arrow-left-circle');
color: $color-233-18-29;
2019-05-14 15:32:42 +00:00
font-size: 1.5rem;
margin: 2rem 0 0 2rem;
text-decoration: underline;
2019-05-13 16:50:34 +00:00
2019-05-14 15:32:42 +00:00
&::before {
font-size: 2rem;
margin-right: 1rem;
2019-11-08 10:34:30 +00:00
text-decoration: none;
2019-05-13 16:50:34 +00:00
}
}
.name {
color: $color-216-4-22;
font-size: 2rem;
font-weight: bold;
}
.username {
&::before {
content: '@';
}
}
2019-11-06 14:44:53 +00:00
.space-between {
display: flex;
justify-content: space-between;
2019-11-11 10:50:10 +00:00
padding-bottom: 1.4rem;
2019-11-06 14:44:53 +00:00
}
.position-end {
text-align: end;
}
.section {
border-bottom: 1px solid $color-221-51-90;
padding: 4.5rem;
}
2019-12-19 13:10:09 +00:00
.word-spacing-left {
margin-left: 0.60rem;
}
.word-spacing-right {
margin-right: 0.60rem;
}
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';
2020-01-08 16:29:23 +00:00
@import 'table';
2019-05-14 15:32:42 +00:00
@import 'header';
@import 'menu-left';
2019-11-05 16:52:34 +00:00
// Button global CSS
sib-delete,
sib-route,
sib-link,
button,
input[type='submit'],
a,
.button {
background: none;
border: none;
2019-11-08 10:34:30 +00:00
cursor: pointer;
display: inline-block;
2019-11-05 16:52:34 +00:00
padding: 0;
&.button {
padding: 0.55rem 2.5rem;
border-radius: 100em;
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
font-size: 1.4rem;
}
2019-11-05 18:58:40 +00:00
&.btn-margin-left {
margin-left: 2.2rem;
}
2019-11-05 16:52:34 +00:00
&.small {
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
font-size: 1rem;
}
}
&.text-bold {
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
font-weight: bold;
}
}
&.text-uppercase {
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
text-transform: uppercase;
}
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.rounded {
border-radius: 50%;
padding: 0.5rem 1rem;
2019-11-05 18:58:40 +00:00
}
2019-11-05 16:52:34 +00:00
&.button-link {
border-radius: 100em;
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
text-decoration: underline;
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
text-decoration: none;
}
}
&.with-icon::before {
font-size: 1.6rem;
margin-right: 1rem;
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.button-yellow {
background-color: white;
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-08 10:34:30 +00:00
color: $color-43-100-50;
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.bordered {
2019-11-08 10:34:30 +00:00
border: 1px solid $color-43-100-50;
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
2019-11-08 10:34:30 +00:00
background-color: $color-43-100-50;
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
color: white;
}
}
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.button-blue {
background-color: white;
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-08 10:34:30 +00:00
color: $color-244-73-62;
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.bordered {
2019-11-08 10:34:30 +00:00
border: 1px solid $color-244-73-62;
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
2019-11-08 10:34:30 +00:00
background-color: $color-244-73-62;
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
color: white;
}
}
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.button-dark {
2019-11-08 10:34:30 +00:00
color: $color-233-18-29;
2019-11-05 16:52:34 +00:00
background-color: white;
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.bordered {
2019-11-08 10:34:30 +00:00
border: 1px solid $color-233-18-29;
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
2019-11-08 10:34:30 +00:00
background-color: $color-233-18-29;
2019-11-05 16:52:34 +00:00
color: white;
}
}
2019-11-05 18:58:40 +00:00
&.test {
display: flex;
}
2019-11-05 16:52:34 +00:00
&.reversed {
&.button-yellow {
2019-11-08 10:34:30 +00:00
background-color: $color-43-100-50;
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
color: white;
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
background-color: white;
2019-11-08 10:34:30 +00:00
color: $color-43-100-50;
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.bordered {
2019-11-08 10:34:30 +00:00
border: 1px solid $color-43-100-50;
2019-11-05 16:52:34 +00:00
}
}
}
&.button-blue {
2019-11-08 10:34:30 +00:00
background-color: $color-244-73-62;
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
color: white;
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
background-color: white;
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-08 10:34:30 +00:00
color: $color-244-73-62;
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.bordered {
2019-11-08 10:34:30 +00:00
border: 1px solid $color-244-73-62;
2019-11-05 16:52:34 +00:00
}
}
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.button-dark {
2019-11-08 10:34:30 +00:00
background-color: $color-233-18-29;
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-05 16:52:34 +00:00
color: white;
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&:hover {
background-color: white;
2019-11-05 18:58:40 +00:00
*,
& {
2019-11-08 10:34:30 +00:00
color: $color-233-18-29;
2019-11-05 16:52:34 +00:00
}
2019-11-05 18:58:40 +00:00
2019-11-05 16:52:34 +00:00
&.bordered {
2019-11-08 10:34:30 +00:00
border: 1px solid $color-233-18-29;
2019-11-05 16:52:34 +00:00
}
}
}
}
}
}