442 lines
9.9 KiB
SCSS
442 lines
9.9 KiB
SCSS
.fb-button {
|
|
position: relative;
|
|
font-size: 1rem;
|
|
float: right;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
padding: .2rem .8rem;
|
|
border-radius: 3px;
|
|
border: none;
|
|
color: $off_white;
|
|
transition: all 0.1s ease-in-out !important;
|
|
&.disabled,
|
|
&:disabled {
|
|
background: $gray !important;
|
|
color: $off_white !important;
|
|
box-shadow: 0 2px 0px 0px lighten($gray, 5%) !important;
|
|
pointer-events: none !important;
|
|
cursor: not-allowed !important;
|
|
}
|
|
&.is-saved,
|
|
&.is-saving {
|
|
color: $off_white !important;
|
|
background: $medium_gray !important;
|
|
box-shadow: 0 2px 0px 0px $dark_gray !important;
|
|
pointer-events: none;
|
|
}
|
|
.btn-spinner {
|
|
margin: 0.2rem 0px 0 0.6rem;
|
|
width: 0.8rem;
|
|
height: 0.8rem;
|
|
animation: rotate 0.8s infinite linear;
|
|
border: 1px solid $white;
|
|
border-right-color: transparent;
|
|
border-radius: 50%;
|
|
float: right;
|
|
&.sync {
|
|
border-color: $dark_gray;
|
|
border-right-color: transparent;
|
|
margin-top: 0.4rem;
|
|
}
|
|
}
|
|
&:active {
|
|
box-shadow: none !important;
|
|
transform: translateY(2px);
|
|
}
|
|
&.arrow-button:active {
|
|
border-bottom: none !important;
|
|
transform: translateY(2px);
|
|
}
|
|
&.go {
|
|
background-color: $green;
|
|
padding: .4rem .8rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
&.green {
|
|
background-color: $green;
|
|
box-shadow: 0 2px 0px 0px darken($green, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($green, 5%) !important;
|
|
}
|
|
}
|
|
&.blue {
|
|
background-color: $blue;
|
|
box-shadow: 0 2px 0px 0px darken($blue, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($blue, 5%) !important;
|
|
}
|
|
}
|
|
&.dark-blue {
|
|
background-color: $dark-blue;
|
|
box-shadow: 0 2px 0px 0px darken($dark-blue, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($dark-blue, 5%) !important;
|
|
}
|
|
}
|
|
&.red {
|
|
background-color: $red;
|
|
box-shadow: 0 2px 0px 0px darken($red, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($red, 5%) !important;
|
|
}
|
|
}
|
|
&.gray {
|
|
background-color: $medium_gray !important;
|
|
box-shadow: 0 2px 0px 0px darken($medium_gray, 12%);
|
|
&:disabled,
|
|
&.disabled {
|
|
background: $gray !important;
|
|
}
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($medium_gray, 5%) !important;
|
|
}
|
|
}
|
|
&.yellow {
|
|
color: $dark_gray;
|
|
background-color: $yellow;
|
|
box-shadow: 0 2px 0px 0px darken($yellow, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($yellow, 5%) !important;
|
|
}
|
|
}
|
|
&.orange {
|
|
color: $dark_gray;
|
|
background-color: $orange;
|
|
box-shadow: 0 2px 0px 0px darken($orange, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($orange, 5%) !important;
|
|
}
|
|
}
|
|
&.magenta {
|
|
background-color: $magenta;
|
|
box-shadow: 0 2px 0px 0px darken($magenta, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($magenta, 5%) !important;
|
|
}
|
|
}
|
|
&.cyan {
|
|
background-color: $cyan;
|
|
box-shadow: 0 2px 0px 0px darken($cyan, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($cyan, 5%) !important;
|
|
}
|
|
}
|
|
&.brown {
|
|
background-color: $brown;
|
|
box-shadow: 0 2px 0px 0px darken($brown, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($brown, 5%) !important;
|
|
}
|
|
}
|
|
&.purple {
|
|
background-color: $purple;
|
|
box-shadow: 0 2px 0px 0px darken($purple, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($purple, 5%) !important;
|
|
}
|
|
}
|
|
&.pink {
|
|
background-color: $pink;
|
|
box-shadow: 0 2px 0px 0px darken($pink, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($pink, 5%) !important;
|
|
}
|
|
}
|
|
&.panel-green {
|
|
background-color: $panel_green;
|
|
box-shadow: 0 2px 0px 0px darken($panel_green, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($panel_green, 5%) !important;
|
|
}
|
|
}
|
|
&.panel-yellow {
|
|
background-color: $panel_yellow;
|
|
box-shadow: 0 2px 0px 0px darken($panel_yellow, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($panel_yellow, 5%) !important;
|
|
}
|
|
}
|
|
&.panel-gray {
|
|
background-color: $panel_gray;
|
|
box-shadow: 0 2px 0px 0px darken($panel_gray, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($panel_gray, 5%) !important;
|
|
}
|
|
}
|
|
&.panel-light-gray {
|
|
background-color: $panel_medium_light_gray;
|
|
box-shadow: 0 2px 0px 0px darken($panel_medium_light_gray, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($panel_medium_light_gray, 5%) !important;
|
|
}
|
|
}
|
|
&.panel-blue {
|
|
background-color: $panel_blue;
|
|
box-shadow: 0 2px 0px 0px darken($panel_blue, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($panel_blue, 5%) !important;
|
|
}
|
|
}
|
|
&.panel-navy {
|
|
background-color: $panel_navy;
|
|
box-shadow: 0 2px 0px 0px darken($panel_navy, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($panel_navy, 5%) !important;
|
|
}
|
|
}
|
|
&.panel-brown {
|
|
background-color: $panel_brown;
|
|
box-shadow: 0 2px 0px 0px darken($panel_brown, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($panel_brown, 5%) !important;
|
|
}
|
|
}
|
|
&.panel-teal {
|
|
background-color: $panel_teal;
|
|
box-shadow: 0 2px 0px 0px darken($panel_teal, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($panel_teal, 5%) !important;
|
|
}
|
|
}
|
|
&.panel-red {
|
|
background-color: $panel_red;
|
|
box-shadow: 0 2px 0px 0px darken($panel_red, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($panel_red, 5%) !important;
|
|
}
|
|
}
|
|
&.panel-magenta {
|
|
background-color: $magenta;
|
|
box-shadow: 0 2px 0px 0px darken($magenta, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($magenta, 5%) !important;
|
|
}
|
|
}
|
|
&.panel-cyan {
|
|
background-color: $cyan;
|
|
box-shadow: 0 2px 0px 0px darken($cyan, 12%);
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background-color: darken($cyan, 5%) !important;
|
|
}
|
|
}
|
|
&.zoom {
|
|
padding: 8px 12px;
|
|
&.zoom-out {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
&.no-float {
|
|
float: none;
|
|
margin-right: 1rem;
|
|
}
|
|
&.pseudo-disabled {
|
|
background: $medium_light_gray !important;
|
|
box-shadow: 0 2px 0px 0px lighten($medium_light_gray, 5%) !important;
|
|
border-bottom: none !important;
|
|
&:focus,
|
|
&:hover,
|
|
&.active {
|
|
background: $medium_light_gray !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.block {
|
|
height: 3.5rem;
|
|
margin-bottom: 1.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;
|
|
.step-block-drag {
|
|
width: 100%;
|
|
padding: 0.2rem 0.8rem;
|
|
line-height: 3rem;
|
|
}
|
|
}
|
|
&.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 {
|
|
transition: all 0.2s ease-out;
|
|
opacity: 0;
|
|
float: right;
|
|
font-size: 1.4rem !important;
|
|
padding-left: 1rem;
|
|
line-height: 3rem;
|
|
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;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.front-page-button {
|
|
margin-top: "1rem";
|
|
padding: ".5rem 1.6rem";
|
|
font-size: "1.2rem";
|
|
border-bottom: "none";
|
|
}
|