You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
2.7 KiB
120 lines
2.7 KiB
@charset "utf-8";
|
|
|
|
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap');
|
|
|
|
// Colors
|
|
$orange: hsl(14, 100%, 53%);
|
|
$yellow: hsl(48, 100%, 67%);
|
|
$green: hsl(141, 65%, 31%);
|
|
$turquoise: hsl(171, 100%, 41%);
|
|
$cyan: hsl(204, 86%, 53%);
|
|
$blue: hsl(217, 72%, 30%);
|
|
$purple: hsl(271, 63%, 32%);
|
|
$red: hsl(348, 71%, 42%);
|
|
$white-ter: hsl(0, 0%, 96%);
|
|
|
|
$family-sans-serif: "Open Sans", sans-serif;
|
|
$primary: $blue;
|
|
// $title-weight: 400;
|
|
$body-background-color: $white-ter;
|
|
$body-size: 14px;
|
|
|
|
@import "../../node_modules/bulma/sass/utilities/_all.sass";
|
|
@import "../../node_modules/bulma/sass/base/_all.sass";
|
|
@import "../../node_modules/bulma/sass/form/_all.sass";
|
|
@import "../../node_modules/bulma/sass/grid/columns.sass";
|
|
@import "../../node_modules/bulma/sass/elements/button.sass";
|
|
@import "../../node_modules/bulma/sass/elements/icon.sass";
|
|
@import "../../node_modules/bulma/sass/elements/notification.sass";
|
|
@import "../../node_modules/bulma/sass/elements/other.sass";
|
|
@import "../../node_modules/bulma/sass/elements/table.sass";
|
|
@import "../../node_modules/bulma/sass/elements/tag.sass";
|
|
@import "../../node_modules/bulma/sass/elements/title.sass";
|
|
@import "../../node_modules/bulma/sass/layout/hero.sass";
|
|
@import "../../node_modules/bulma/sass/components/level.sass";
|
|
@import "../../node_modules/bulma/sass/components/media.sass";
|
|
@import "../../node_modules/bulma/sass/components/tabs.sass";
|
|
|
|
div#main-menu {
|
|
background: linear-gradient(135deg, $primary, darken($primary, 20%));
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
div#header, div#navigation {
|
|
padding: $size-normal;
|
|
}
|
|
|
|
div.main-content {
|
|
padding: $size-normal;
|
|
}
|
|
|
|
div.centered-content {
|
|
background-color: $white;
|
|
border-radius: $radius;
|
|
margin: 1rem auto;
|
|
padding: 2rem;
|
|
width: 95%;
|
|
|
|
div.centered-content-icon {
|
|
border-radius: 100px;
|
|
margin: auto;
|
|
margin-top: -20px;
|
|
text-align: center;
|
|
width: 3rem;
|
|
}
|
|
}
|
|
|
|
div.centered-content-narrow {
|
|
@extend div.centered-content;
|
|
width: 75%;
|
|
}
|
|
|
|
div#navigation {
|
|
flex-grow: 1;
|
|
|
|
div {
|
|
margin: 1rem 0px;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
padding: $size-normal;
|
|
}
|
|
|
|
div#notification-container {
|
|
bottom: 10px;
|
|
position: absolute;
|
|
left: 10px;
|
|
width: 40%;
|
|
}
|
|
|
|
div.group-list-item {
|
|
background-color: $white;
|
|
border-radius: 15px;
|
|
margin: 10px 0px;
|
|
padding: 20px;
|
|
}
|
|
|
|
div.member {
|
|
border: solid 1px $grey-lighter;
|
|
margin-right: 10px;
|
|
min-width: 150px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
div.invitation-options {
|
|
display: flex;
|
|
}
|
|
|
|
div.invitation-options > div {
|
|
margin-right: 20px;
|
|
}
|
|
|
|
article#user-info {
|
|
padding: 20px;
|
|
}
|