629 lines
9.9 KiB
SCSS
629 lines
9.9 KiB
SCSS
@import 'base';
|
|
|
|
.wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
background: url('../img/bg.png') repeat;
|
|
background-size: 40px 164px;
|
|
|
|
> .main-content {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
padding-top: 20px;
|
|
padding-left: .75rem;
|
|
padding-right: .75rem;
|
|
|
|
@include tablet-only {
|
|
> .container {
|
|
.navbar-brand {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar-brand {
|
|
align-items: center;
|
|
}
|
|
|
|
@include mobile {
|
|
.navbar-menu {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.logo {
|
|
height: 40px;
|
|
}
|
|
|
|
.navbar-menu {
|
|
.navbar-item {
|
|
padding-left: 1.25rem;
|
|
padding-right: 1.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.title {
|
|
transition: color .15s ease-in-out;
|
|
}
|
|
|
|
.input {
|
|
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
|
|
}
|
|
|
|
.button {
|
|
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
|
font-weight: $weight-bold;
|
|
|
|
&.is-primary.is-outlined {
|
|
background-color: rgba($primary, .104);
|
|
|
|
&.is-loading:focus {
|
|
background-color: rgba($primary, .104);
|
|
|
|
&::after {
|
|
border-color: transparent transparent $primary $primary !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-loading {
|
|
&::after {
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
|
|
&.is-icon {
|
|
padding:0;
|
|
width: 18px;
|
|
height: 18px;
|
|
background-color: transparent;
|
|
border: none;
|
|
|
|
svg {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
&:hover {
|
|
path:not(.no-hover) {
|
|
fill: #87feb7;
|
|
transition: fill .15s ease-out;
|
|
}
|
|
}
|
|
|
|
&:focus:not(:active) {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.icon:first-child:last-child {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box {
|
|
border: 1px solid #393939;
|
|
}
|
|
|
|
.ceremony {
|
|
text-align: center;
|
|
|
|
.title {
|
|
color: $white;
|
|
|
|
span {
|
|
color: $primary;
|
|
}
|
|
}
|
|
|
|
.p {
|
|
font-size: .857rem;
|
|
max-width: 66.6666%;
|
|
margin: 0 auto;
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: $block-spacing;
|
|
}
|
|
|
|
a {
|
|
color: $primary;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.columns:not(:last-child) {
|
|
margin-bottom: calc(2.5rem - 0.75rem);
|
|
}
|
|
|
|
.box {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
|
|
&:hover, &.is-hovered {
|
|
color: $primary;
|
|
border-color: #94febf;
|
|
|
|
.title {
|
|
color: $primary;
|
|
}
|
|
|
|
.cloak {
|
|
path {
|
|
transition: stroke .15s ease-in-out;
|
|
stroke: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.cloak {
|
|
align-self: center;
|
|
}
|
|
|
|
.form {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
}
|
|
|
|
&-anonymous {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
fieldset[disabled] {
|
|
.box {
|
|
background-color: $primary-invert;
|
|
border-color: #393939;
|
|
|
|
.title {
|
|
color: $white;
|
|
}
|
|
|
|
.cloak {
|
|
path {
|
|
stroke: #393939;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.field {
|
|
.label {
|
|
text-align: left;
|
|
}
|
|
|
|
.help {
|
|
text-align: left;
|
|
position: absolute;
|
|
|
|
&.counter {
|
|
right: 0;
|
|
}
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
&.is-horizontal {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
@include mobile {
|
|
justify-content: center;
|
|
}
|
|
|
|
.field-label.is-normal {
|
|
padding-top: 0;
|
|
margin-right: 1.5rem;
|
|
}
|
|
}
|
|
|
|
.control.has-icons-right {
|
|
.input {
|
|
padding-right: calc(#{$control-padding-horizontal} - 1px);
|
|
}
|
|
|
|
.icon.is-right {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.currently {
|
|
font-size: .85rem;
|
|
|
|
span {
|
|
color: $primary;
|
|
font-size: 2.5rem;
|
|
font-weight: $weight-bold;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: $block-spacing;
|
|
}
|
|
}
|
|
}
|
|
|
|
.status {
|
|
&:not(:last-child) {
|
|
margin-bottom: $block-spacing;
|
|
}
|
|
|
|
.status-message {
|
|
color: $primary;
|
|
text-align: center;
|
|
|
|
&.is-danger {
|
|
color: $danger;
|
|
}
|
|
}
|
|
}
|
|
|
|
.loading-overlay {
|
|
&.is-full-page {
|
|
.loading-background {
|
|
background:rgba(0,0,0,0.85);
|
|
}
|
|
}
|
|
.loading-container {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.loading-tornado {
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
height: 60px;
|
|
width: 60px;
|
|
background-image: url('../img/logo.svg');
|
|
animation: spinAroundReverse 2000ms infinite linear;
|
|
}
|
|
}
|
|
|
|
.loading-message {
|
|
padding-top: .5rem;
|
|
color: $primary;
|
|
text-align: center;
|
|
|
|
&.is-danger {
|
|
color: $danger;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes spinAroundReverse {
|
|
from {
|
|
transform: rotate(359deg); }
|
|
to {
|
|
transform: rotate(0deg); }
|
|
}
|
|
|
|
.b-table {
|
|
.table {
|
|
a {
|
|
color: $primary;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.social-link {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.icon {
|
|
margin-right: .75rem;
|
|
height: 18px;
|
|
width: 18px;
|
|
}
|
|
}
|
|
|
|
th {
|
|
font-weight: $weight-normal;
|
|
}
|
|
|
|
td {
|
|
border-color: rgba($primary, .5)
|
|
}
|
|
|
|
td, th {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
tbody {
|
|
tr {
|
|
&:last-child {
|
|
td {
|
|
border-bottom-width: 1px;
|
|
}
|
|
}
|
|
|
|
&:not(.is-selected) {
|
|
&:nth-child(odd) {
|
|
background-color: $table-striped-row-even-background-color;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $table-row-hover-background-color;
|
|
&:nth-child(odd) {
|
|
background-color: $table-striped-row-even-hover-background-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not(.is-selected).is-empty {
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown.is-expanded {
|
|
min-width: 75px;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
|
|
&-emoticon-sad {
|
|
background-image: url('../img/icons/emoticon-sad.svg');
|
|
}
|
|
|
|
&.icon-48px {
|
|
height: 48px;
|
|
width: 48px;
|
|
}
|
|
|
|
&-twitter {
|
|
background-image: url('../img/icons/tw.svg');
|
|
}
|
|
|
|
&-github {
|
|
background-image: url('../img/icons/git.svg');
|
|
}
|
|
|
|
&-anonymous {
|
|
background-image: url('../img/icons/anonymous.svg');
|
|
}
|
|
|
|
&-link {
|
|
background-image: url('../img/icons/link.svg');
|
|
}
|
|
}
|
|
|
|
.table-search {
|
|
.icon {
|
|
mask-image: url("../img/icons/search.svg");
|
|
mask-position: center;
|
|
mask-repeat: no-repeat;
|
|
mask-size: 16px 16px;
|
|
|
|
background-color: $input-placeholder-color;
|
|
}
|
|
|
|
.input {
|
|
&:hover {
|
|
~ .icon {
|
|
background-color: $input-hover-color;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
~ .icon {
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown.is-mobile-modal.is-expanded {
|
|
.dropdown-trigger {
|
|
.control {
|
|
.input {
|
|
&::after {
|
|
border: 1px solid #393939;
|
|
border-radius: 1px;
|
|
border-right: 0;
|
|
border-top: 0;
|
|
content: " ";
|
|
display: block;
|
|
margin-top: -0.5em;
|
|
pointer-events: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: rotate(-45deg);
|
|
transform-origin: center;
|
|
height: .625em;
|
|
width: .625em;
|
|
right: 1.125em;
|
|
transition: border-color .15s ease-in-out;
|
|
}
|
|
|
|
&:hover {
|
|
&::after {
|
|
border-color: $white;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
&::after {
|
|
border-color: $primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-loading {
|
|
.input {
|
|
&::after {
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
height: 1.14rem;
|
|
width: 1.14rem;
|
|
right: .86rem;
|
|
top: .86rem;
|
|
border-radius: 1.14rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown-menu {
|
|
@include touch {
|
|
max-width: 460px;
|
|
}
|
|
|
|
> .dropdown-content {
|
|
overflow: hidden;
|
|
margin: 1px;
|
|
|
|
> .dropdown-item {
|
|
font-size: 1rem;
|
|
padding: 0.675rem 1.25rem;
|
|
transition: color .15s ease-in-out, background-color .15s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-active {
|
|
.dropdown-trigger {
|
|
.control {
|
|
.input {
|
|
border-color: $primary;
|
|
|
|
&::after {
|
|
border-color: $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-top-right {
|
|
.dropdown-menu {
|
|
padding-top: 0px;
|
|
padding-bottom: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
&-previous, &-next, &-link {
|
|
background-color: rgba($primary, .104);
|
|
font-weight: $weight-bold;
|
|
|
|
&:hover {
|
|
background-color: $primary;
|
|
}
|
|
|
|
&[disabled] {
|
|
opacity: .5;
|
|
|
|
&:hover {
|
|
background-color: rgba($primary, .104);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-previous, &-next {
|
|
.icon {
|
|
width: 9px;
|
|
height: 16px;
|
|
background-color: $primary
|
|
}
|
|
|
|
&:hover {
|
|
.icon {
|
|
background-color: $primary-invert;
|
|
}
|
|
}
|
|
|
|
&[disabled] {
|
|
&:hover {
|
|
.icon {
|
|
background-color: $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-previous {
|
|
.icon {
|
|
mask-image: url("../img/icons/arrow-left.svg");
|
|
}
|
|
}
|
|
|
|
&-next {
|
|
.icon {
|
|
mask-image: url("../img/icons/arrow-right.svg");
|
|
}
|
|
}
|
|
}
|
|
|
|
fieldset {
|
|
&:not(:last-child) {
|
|
margin-bottom: $block-spacing;
|
|
}
|
|
|
|
&.authorize {
|
|
max-width: 30%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
&[disabled] {
|
|
opacity: .5;
|
|
cursor: not-allowed;
|
|
|
|
label {
|
|
cursor: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form {
|
|
position: relative;
|
|
|
|
.logout {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -2px;
|
|
height: 22px;
|
|
width: 22px
|
|
}
|
|
|
|
.button.is-fullwidth + .button.is-fullwidth {
|
|
margin-top: 1rem;
|
|
}
|
|
}
|