mirror of
https://github.com/tornadocash/trusted-setup-server.git
synced 2024-11-24 19:05:30 +01:00
organize styles
This commit is contained in:
Danil Kovtonyuk
parent
e77572f6b7
commit
4256306fc2
@ -1,4 +1,15 @@
|
||||
@import 'base';
|
||||
@import 'components/base';
|
||||
@import 'components/header';
|
||||
@import 'components/button';
|
||||
@import 'components/ceremony';
|
||||
@import 'components/loading';
|
||||
@import 'components/table';
|
||||
@import 'components/dropdown';
|
||||
@import 'components/icon';
|
||||
@import 'components/pagination';
|
||||
@import 'components/status';
|
||||
@import 'components/fieldset';
|
||||
@import 'components/form';
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
@ -12,41 +23,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@ -55,574 +31,6 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
50
assets/styles/components/_button.scss
Normal file
50
assets/styles/components/_button.scss
Normal file
@ -0,0 +1,50 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
151
assets/styles/components/_ceremony.scss
Normal file
151
assets/styles/components/_ceremony.scss
Normal file
@ -0,0 +1,151 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
87
assets/styles/components/_dropdown.scss
Normal file
87
assets/styles/components/_dropdown.scss
Normal file
@ -0,0 +1,87 @@
|
||||
.dropdown.is-mobile-modal.is-expanded {
|
||||
.dropdown-trigger {
|
||||
.control {
|
||||
.input {
|
||||
&::after {
|
||||
border: 2px solid $primary;
|
||||
border-radius: 2px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
assets/styles/components/_fieldset.scss
Normal file
20
assets/styles/components/_fieldset.scss
Normal file
@ -0,0 +1,20 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
assets/styles/components/_form.scss
Normal file
15
assets/styles/components/_form.scss
Normal file
@ -0,0 +1,15 @@
|
||||
.form {
|
||||
position: relative;
|
||||
|
||||
.logout {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -2px;
|
||||
height: 22px;
|
||||
width: 22px
|
||||
}
|
||||
|
||||
.button.is-fullwidth + .button.is-fullwidth {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
34
assets/styles/components/_header.scss
Normal file
34
assets/styles/components/_header.scss
Normal file
@ -0,0 +1,34 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
30
assets/styles/components/_icon.scss
Normal file
30
assets/styles/components/_icon.scss
Normal file
@ -0,0 +1,30 @@
|
||||
.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');
|
||||
}
|
||||
}
|
||||
42
assets/styles/components/_loading.scss
Normal file
42
assets/styles/components/_loading.scss
Normal file
@ -0,0 +1,42 @@
|
||||
.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); }
|
||||
}
|
||||
53
assets/styles/components/_pagination.scss
Normal file
53
assets/styles/components/_pagination.scss
Normal file
@ -0,0 +1,53 @@
|
||||
|
||||
.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");
|
||||
}
|
||||
}
|
||||
}
|
||||
14
assets/styles/components/_status.scss
Normal file
14
assets/styles/components/_status.scss
Normal file
@ -0,0 +1,14 @@
|
||||
.status {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $block-spacing;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
color: $primary;
|
||||
text-align: center;
|
||||
|
||||
&.is-danger {
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
91
assets/styles/components/_table.scss
Normal file
91
assets/styles/components/_table.scss
Normal file
@ -0,0 +1,91 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user