flexor-web/src/components/app/app.scss

@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/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%));
    // border-left: 1px solid $grey-lighter;
    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: 80%;

    div.centered-content-icon {
        border-radius: 100px;
        margin: auto;
        margin-top: -20px;
        text-align: center;
        width: 3rem;
    }
}

div#navigation {
    flex-grow: 1;

    div {
        margin: 1rem 0px;
    }
}

footer {
    padding: $size-normal;
}

div.group-list-item {
    background-color: $white;
    border-radius: 15px;
    margin: 10px 0px;
    padding: 20px;
}