wagtail/client/scss/components/_button.scss

649 wiersze
14 KiB
SCSS

// Core button style
// Note that these styles include methods to render buttons the same x-browser, described here:
// http: //cbjdigital.com/blog/2010/08/bulletproof_css_input_button_heights
// input[type=submit],
// input[type=reset],
// input[type=button],
.button {
border-radius: 3px;
font-family: Open Sans,Arial,sans-serif;
width: auto;
height: 2.4em;
padding: 0 1em;
font-size: 0.9em;
font-weight: normal;
vertical-align: middle;
display: inline-block;
background-color: $color-button;
border: 1px solid $color-button;
color: $color-white;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
position: relative;
overflow: hidden;
box-sizing: border-box;
-webkit-font-smoothing: auto;
// stylelint-disable-next-line property-no-vendor-prefix
-moz-appearance: none;
transition: background-color 0.1s ease;
&:hover {
color: $color-teal;
}
&.yes {
background-color: $color-button-yes;
border: 1px solid $color-button-yes;
&.button-secondary {
border: 1px solid $color-button-yes;
color: $color-button-yes;
background-color: transparent;
}
&:hover {
color: $color-white;
border-color: transparent;
background-color: $color-button-yes-hover;
}
&.button-nobg:hover {
color: $color-button-yes;
background-color: transparent;
}
}
&.warning {
background-color: $color-button-warning;
border: 1px solid $color-button-warning;
&.button-secondary {
border: 1px solid $color-button-warning;
color: $color-button-warning;
background-color: transparent;
}
&:hover {
color: $color-white;
border-color: transparent;
background-color: $color-button-warning-hover;
}
&.button-nobg:hover {
color: $color-button-warning;
background-color: transparent;
}
}
&.no,
&.serious {
background-color: $color-button-no;
border: 1px solid $color-button-no;
&.button-secondary {
border: 1px solid $color-button-no;
color: $color-button-no;
background-color: transparent;
}
&:hover {
color: $color-white;
border-color: transparent;
background-color: $color-button-no-hover;
}
&.button-nobg:hover {
color: $color-button-no;
background-color: transparent;
}
}
&.button-nobg {
border: 0;
background-color: transparent;
}
&.bicolor {
border: 1px solid transparent;
padding-left: 3.5em;
&:before { // iconfont
font-size: 1rem;
position: absolute;
left: 0;
top: 0;
width: 2em;
line-height: 1.85em;
height: 100%;
text-align: center;
background-color: rgba(0, 0, 0, 0.2);
display: block;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
.icon-wrapper {
background-color: rgba(0, 0, 0, 0.2);
display: block;
position: absolute;
left: 0;
top: 0;
width: 3em;
line-height: 1.85em;
height: 100%;
text-align: center;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
}
&.button--icon {
&:before {
display: none; // TODO: remove once the icon font styles are gone
}
.icon {
@include svg-icon(1rem);
padding: 0.75em;
}
}
&.button--icon-flipped {
.icon {
transform: scaleX(-1);
}
}
&.button-secondary {
border: 1px solid rgba(0, 0, 0, 0.2);
}
}
&.button-small.bicolor {
padding-left: 3.5em;
.icon-wrapper {
width: 2em;
}
&.button--icon .icon {
@include svg-icon(0.9rem);
padding: 0.25em;
}
}
// + input[type=submit],
// + input[type=reset],
// + input[type=button],
+ .button {
// + button {
margin-left: 1em;
}
// A completely unstyled button
&.unbutton {
border-radius: 0;
width: auto;
height: auto;
padding: 0;
font-size: inherit;
font-weight: normal;
vertical-align: middle;
display: inline;
background-color: transparent;
border: 0;
color: inherit;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
position: relative;
overflow: hidden;
box-sizing: border-box;
-webkit-font-smoothing: auto;
// stylelint-disable-next-line property-no-vendor-prefix
-moz-appearance: none;
}
&:hover {
background-color: $color-button-hover;
color: $color-white;
border-color: transparent;
&.hover-no {
background-color: $color-button-no;
}
}
&.button-longrunning {
span { // iconfont
@include transition(all 0.3s ease);
transform: scale(0.9);
display: inline-block;
height: 0.9em;
position: relative;
opacity: 0;
width: 0;
visibility: hidden;
text-align: center;
padding-right: 0;
}
em {
font-style: normal;
}
&.button-longrunning-active span { // iconfont
transform: scale(1);
visibility: visible;
width: 1em;
height: 1em;
opacity: 0.8;
padding-right: 0.5em;
}
span.icon-spinner:after { // iconfont
text-align: center;
position: absolute;
left: 0;
margin: 0;
line-height: 1em;
display: inline-block;
font-size: 1em;
}
svg.icon-spinner {
@include transition(all 0.3s ease);
display: none;
}
&.button-longrunning-active svg.icon-spinner {
@include svg-icon();
transform: scale(1);
display: inline-block;
opacity: 0.8;
padding: 0;
margin-right: 0.5em;
}
&.button-longrunning-active .button-longrunning__icon {
display: none;
}
}
&:disabled,
&[disabled],
&.disabled {
background-color: $color-grey-3;
border-color: $color-grey-3;
color: $color-grey-2;
cursor: default;
}
&.button-secondary:disabled,
&.button-secondary[disabled],
&.button-secondary.disabled {
background-color: $color-white;
border-color: $color-grey-3;
color: $color-grey-3;
}
&.button-nostroke {
border: 0;
}
&.button--icon {
.icon {
@include svg-icon(1.5em);
}
}
&.button-strokeonhover {
border: 1px solid transparent;
&:hover {
border-color: $color-grey-2;
}
&.button-nobg:hover {
background-color: transparent;
}
}
&.text-notransform {
text-transform: initial;
}
&.button--icon {
.icon {
@include svg-icon(1.5em);
}
}
@include media-breakpoint-up(sm) {
font-size: 0.95em;
padding: 0 1.4em;
height: 3em;
&.bicolor {
padding-left: 3.7em;
&:before {
width: 2em;
line-height: 2.2em;
font-size: 1.1rem;
}
}
&.button-small.bicolor {
// line-height: 2.2em;
padding-left: 3em;
&:before {
width: 1.8em;
line-height: 1.65em;
}
}
}
}
.button-small {
padding: 0 0.8em;
height: 2em;
font-size: 0.95em;
}
.button-secondary {
color: $color-button;
background-color: transparent;
}
// Buttons which are only an icon
.button.icon.text-replace { // iconfont
font-size: 0; // unavoidable duplication of setting in icons.scss
width: 1.8rem;
height: 1.8rem;
&:before {
line-height: 1.7em;
}
@include media-breakpoint-up(sm) {
width: 2.2rem;
height: 2.2rem;
&:before {
line-height: 2.1em;
}
&.button-small {
height: 1.8rem;
width: 1.8rem;
// stylelint-disable-next-line max-nesting-depth
&:before {
line-height: 1.7em;
}
}
}
}
.button--icon.text-replace {
font-size: 0;
text-align: center;
.icon {
font-size: initial;
@include svg-icon(1rem, middle);
padding: 0.5em;
}
&.button-small {
line-height: 1.7rem;
.icon {
padding: 0.25em;
}
}
@include media-breakpoint-up(sm) {
width: 2.2rem;
height: 2.2rem;
&.button-small {
height: 1.8rem;
width: 1.8rem;
}
}
}
button.button.bicolor .icon-wrapper {
line-height: 1.65em; // work around differences in a and button elements
}
.button-neutral {
color: $color-grey-2;
&:hover {
color: $color-teal;
}
}
.yes {
background-color: $color-button-yes;
border: 1px solid $color-button-yes;
&.button-secondary {
border: 1px solid $color-button-yes;
color: $color-button-yes;
background-color: transparent;
}
&:hover {
color: $color-white;
border-color: transparent;
background-color: $color-button-yes-hover;
}
&.button-nobg:hover {
color: $color-button-yes;
background-color: transparent;
}
}
.no,
.serious {
background-color: $color-button-no;
border: 1px solid $color-button-no;
&.button-secondary {
border: 1px solid $color-button-no;
color: $color-button-no;
background-color: transparent;
}
&:hover {
color: $color-white;
border-color: transparent;
background-color: $color-button-no-hover;
}
&.button-nobg:hover {
color: $color-button-no;
background-color: transparent;
}
}
.button-nobg {
border: 0;
background-color: transparent;
}
.bicolor {
border: 0;
padding-left: 3.5em;
&:before {
font-size: 1rem;
position: absolute;
left: 0;
top: 0;
width: 2em;
line-height: 1.85em;
height: 100%;
text-align: center;
background-color: rgba(0, 0, 0, 0.2);
display: block;
}
}
.button-small.bicolor {
padding-left: 3.5em;
&:before {
width: 2em;
font-size: 0.8rem;
line-height: 1.65em;
}
}
a.button {
line-height: 2.4em;
height: auto;
&.button-small {
line-height: 1.85em;
}
@include media-breakpoint-up(sm) {
line-height: 2.9em;
}
}
// Special styles to counteract Firefox's completely unwarranted assumptions about button styles
input[type=submit],
input[type=reset],
input[type=button],
button {
padding: 0 1em;
@include media-breakpoint-up(sm) {
&.button-small {
height: 2em;
}
}
}
.button-group {
@include clearfix;
input[type=submit],
input[type=reset],
input[type=button],
.button,
button {
border-radius: 0;
float: left;
margin-right: 1px;
margin-left: 0;
&:only-child {
border-radius: 3px;
}
&:first-child {
border-radius: 3px 0 0 3px;
}
&:last-child {
border-radius: 0 3px 3px 0;
margin-right: 0;
}
}
&.button-group-square {
&,
input[type=submit],
input[type=reset],
input[type=button],
.button,
button {
border-radius: 0;
}
}
}
.multiple {
padding: 0;
max-width: 1024px - 50px;
overflow: hidden;
> li {
@include row();
border-radius: 2px;
position: relative;
overflow: hidden;
background-color: $color-white;
padding: 1em 10em 1em 1.5em; // 10em padding leaves room for controls
margin-bottom: 1em;
border: 1px solid lighten($color-grey-4, 3%); // really trying to avoid creating more greys, but this one is better than grey 4 or 5
}
&.moving {
position: relative;
}
li.moving {
position: absolute;
width: 100%;
}
fieldset {
padding-top: 0;
padding-bottom: 0;
}
// Object controls
.controls {
position: absolute;
z-index: 1;
right: 1em;
top: 1em;
color: $color-white;
li {
float: left;
margin-right: 1px;
&:last-child {
margin-right: 0;
}
}
.disabled {
display: none;
visibility: hidden;
}
}
}
// wrapper around add button for mutliple objects
.add {
font-weight: 700;
cursor: pointer;
margin-top: 0;
margin-bottom: 0;
padding-top: 1em;
padding-bottom: 2em;
clear: both;
}