frontend/css/buttons.scss
.fb-button {
margin: 0.25em 0.5em;
float: right;
font-weight: bold;
padding: 0.4em 0.8em;
border-radius: 5px;
font-size: 1rem;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
user-select: none;
color: $off_white;
border: none !important;
box-shadow: inset 0 -1px 0px 0px $translucent2, 0 0 5px $translucent15;
&:hover:not(.pseudo-disabled) {
filter: brightness(1.05);
box-shadow: inset 0 -1px 0px 0px $translucent2, 0 0 5px $translucent15, inset 0 0 5px rgba(255, 255, 255, 0.3);
}
&:active:not(.pseudo-disabled) {
filter: brightness(1);
box-shadow: inset 0 1px 0px 0px $translucent1, inset 0 0 5px $translucent2;
}
&.pseudo-disabled {
filter: brightness(0.7) contrast(0.8);
cursor: not-allowed !important;
}
.fa-check,
.fa-spinner {
margin: 0;
color: $off_white !important;
line-height: 1rem;
margin-left: 0.5rem;
float: none;
}
&.yellow,
&.orange {
.fa-spinner {
color: $dark_gray !important;
}
}
&.go {
background-color: $green;
padding: .4rem .8rem;
font-size: 1.2rem;
}
&.green {
background-color: $green;
}
&.blue {
background-color: $blue;
}
&.dark-blue {
background-color: $dark-blue;
}
&.red {
background-color: $red;
}
&.gray {
background-color: $medium_gray !important;
}
&.yellow {
color: $dark_gray;
background-color: $yellow;
}
&.orange {
color: $dark_gray;
background-color: $orange;
}
&.magenta {
background-color: $magenta;
}
&.cyan {
background-color: $cyan;
}
&.brown {
background-color: $brown;
}
&.purple {
background-color: $purple;
}
&.pink {
background-color: $pink;
}
&.panel-green {
background-color: $panel_green;
}
&.panel-yellow {
background-color: $panel_yellow;
}
&.panel-gray {
background-color: $panel_gray;
}
&.panel-light-gray {
background-color: $panel_medium_light_gray;
}
&.panel-blue {
background-color: $panel_blue;
}
&.panel-navy {
background-color: $panel_navy;
}
&.panel-brown {
background-color: $panel_brown;
}
&.panel-teal {
background-color: $panel_teal;
}
&.panel-red {
background-color: $panel_red;
}
&.panel-magenta {
background-color: $magenta;
}
&.panel-cyan {
background-color: $cyan;
}
&.zoom {
padding: 8px 12px;
&.zoom-out {
margin-right: 10px;
}
}
&.no-float {
float: none;
margin-right: 1rem;
}
}
.is-saved,
.is-saving {
pointer-events: none;
}
.block {
height: 3.5rem;
font-size: 1.2rem;
color: $dark_gray;
text-align: left;
&.active {
box-shadow: none !important;
border: 1px solid $white;
}
&.gray {
background-color: $medium_light_gray !important;
box-shadow: 0 2px 0px 0px darken($medium_light_gray, 12%);
&:focus,
&:hover,
&.active {
background-color: darken($medium_light_gray, 5%) !important;
}
}
&:hover {
.block-control {
transition: all 0.2s ease-out;
opacity: 1;
}
}
.step-block {
display: flex;
padding: 0;
box-shadow: none;
.step-block-drag {
margin: auto;
width: 100%;
padding: 0.2rem 0.8rem;
label {
display: -webkit-box;
margin: 0;
width: 90%;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
&.quick-del {
&:hover {
background: lighten($red, 10%) !important;
border: none;
box-shadow: inset 0px 0px 0px 4px $darkest_red !important;
&:after {
content: "x";
position: absolute;
right: 1rem;
color: $darkest_red;
font-size: 2rem;
}
}
}
}
.block-control {
position: absolute;
top: 30%;
right: 0.75rem;
transition: all 0.2s ease-out;
opacity: 0;
float: right;
font-size: 1.4rem !important;
pointer-events: none;
}
.fb-toggle-button {
position: relative;
height: 1.8rem !important;
border-bottom: none !important;
box-shadow: none !important;
padding: 0.3rem 0.10rem;
border-radius: 10px !important;
width: 5rem;
border-bottom: none;
transition: all 0.4s ease;
&.yellow {
&:after {
content: "";
position: absolute;
top: 0.1rem;
left: 0;
right: 0;
margin: 0 auto;
height: 1.6rem;
width: 1.6rem;
background: $white;
border-radius: 50%;
box-shadow: inset rgba(0, 0, 0, 0.03) 0px 0px 3px 3px;
}
&:before {
content: "";
position: absolute;
top: 0.1rem;
left: 0;
right: 0;
margin: 0 auto;
height: 1.6rem;
width: 1.6rem;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);
}
}
&.green {
text-align: left;
padding-left: 0.6rem;
&:after {
content: "";
position: absolute;
top: 0.1rem;
right: 0.2rem;
height: 1.6rem;
width: 1.6rem;
background: $white;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);
}
&:hover {
background: $green;
}
&.dim {
background: lighten($green, 20%) !important;
}
}
&.red {
text-align: right !important;
padding-right: 0.8rem;
&:after {
content: "";
position: absolute;
top: 0.1rem;
left: 0.2rem;
height: 1.6rem;
width: 1.6rem;
background: white;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0px 0 rgba(0, 0, 0, 0.04), 0 4px 9px rgba(0, 0, 0, 0.13), 0 3px 3px rgba(0, 0, 0, 0.05);
}
&.dim {
background: lighten($red, 10%) !important;
}
}
&.grayscale {
filter: grayscale(100%);
}
&.disabled,
&:disabled {
background: $medium_light_gray !important;
filter: grayscale(100%);
}
&.modified {
box-shadow: 0 0 0px 3px $yellow !important;
}
.fa-spinner {
margin: 0;
color: $dark_gray !important;
}
.fa-check {
margin: 0;
color: $green !important;
}
}
.front-page-button {
margin-top: "1rem";
padding: ".5rem 1.6rem";
font-size: "1.2rem";
border-bottom: "none";
}
.fb-icon-button {
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
font-size: 1.25rem;
border: none;
border-radius: 5px;
background: transparent;
color: $dark_gray;
text-align: center;
&.light {
color: $off_white;
&:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.12);
}
&:disabled {
color: $off_white;
filter: brightness(0.8);
}
}
&:hover {
background: rgba(0, 0, 0, 0.08);
}
&:active:not(:disabled) {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
filter: brightness(0.95);
}
&:disabled {
filter: invert(0.5);
cursor: not-allowed;
}
}