tornadocash/trusted-setup-server
1
0
Fork 0
mirror of https://github.com/tornadocash/trusted-setup-server.git synced 2024-11-24 19:05:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

organize styles

Browse Source
This commit is contained in:
Danil Kovtonyuk 2020-02-16 22:33:51 +10:00
parent e77572f6b7
commit 4256306fc2
13 changed files with 599 additions and 604 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

616
assets/styles/app.scss
View File

@ -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 { .wrapper {
display: flex; 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 { .title {
transition: color .15s ease-in-out; 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; 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 { .box {
border: 1px solid #393939; 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;
}
}

0
assets/styles/base.scss → assets/styles/components/_base.scss
View File

50
assets/styles/components/_button.scss Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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;
}
}
}
}