jfa-go/scss/base.scss

.pageContainer {
    margin: 5% 30% 5% 30%;
}
@media (max-width: 1900px) {
    .pageContainer {
        margin: 5% 20% 5% 20%;
    }
}
@media (max-width: 1100px) {
    .pageContainer {
        margin: 2%;
    }
}
h1 {
    /*margin: 20%;*/
    margin-bottom: 5%;
}
.tabGroup {
    /*margin: 20%;*/
    margin-bottom: 5%;
    margin-top: 5%;
}
.linkForm {
    /*margin: 20%;*/
    margin-top: 5%;
    margin-bottom: 5%;
}
.contactBox {
    /*margin: 20%;*/
    margin-top: 5%;
    color: grey;
}
.circle {
    /*margin-left: 1rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    z-index: 5000;*/
-webkit-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
-moz-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
 -o-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
    transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190); /* easeInCubic */
}
.smooth-transition {
-webkit-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
-moz-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
 -o-transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190);
    transition: all 300ms cubic-bezier(0.550, 0.055, 0.675, 0.190); /* easeincubic */
}
.rotated {
    transform: rotate(180deg);
-webkit-transition: all 150ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 150ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
 -o-transition: all 150ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    transition: all 150ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}

.not-rotated {
    transform: rotate(0deg);
-webkit-transition: all 150ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
-moz-transition: all 150ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
 -o-transition: all 150ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    transition: all 150ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
}

.invite-link {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
}

.settingIcon {
    margin-left: 0.2rem;
}

body.modal-open {
    overflow: hidden;
}

@mixin white-text {
  &, &:visited, &:hover, &:active {
    font-style: inherit;
    color: inherit;
    font-size: inherit;
    text-decoration: none;
    font-variant: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-family: inherit;
  }
}

%white-text {
    @include white-text;
}

%link-unstyled {
    @include white-text;
    background-color: transparent;
    margin-right: 0.5rem;
}

.text-button {
    @extend %link-unstyled;
}

.text-button:hover {
    @extend %link-unstyled;
}

.nl {
    @extend %link-unstyled;
}

.nl:hover {
    @extend %white-text;
}

.unfocused {
    display: none;
}