You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
3.1 KiB
125 lines
3.1 KiB
6 years ago
|
/**
|
||
|
|
* @file
|
||
|
|
* Styles for Magazine+'s buttons.
|
||
|
|
*/
|
||
|
|
a.button,
|
||
|
|
.button > a,
|
||
|
|
input[type="submit"],
|
||
|
|
input[type="reset"],
|
||
|
|
input[type="button"] {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 400;
|
||
|
|
padding: 15px 30px;
|
||
|
|
color: #ffffff;
|
||
|
|
display: inline-block;
|
||
|
|
line-height: 1;
|
||
|
|
-webkit-transition: all 0.2s ease-in-out;
|
||
|
|
-moz-transition: all 0.2s ease-in-out;
|
||
|
|
-ms-transition: all 0.2s ease-in-out;
|
||
|
|
-o-transition: all 0.2s ease-in-out;
|
||
|
|
transition: all 0.2s ease-in-out;
|
||
|
|
margin: 10px 0;
|
||
|
|
text-align: center;
|
||
|
|
border-width: 1px;
|
||
|
|
border-style: solid;
|
||
|
|
border-color: transparent;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
.headings-wide-spacing-enabled a.button,
|
||
|
|
.headings-wide-spacing-enabled .button > a,
|
||
|
|
.headings-wide-spacing-enabled input[type="submit"],
|
||
|
|
.headings-wide-spacing-enabled input[type="reset"],
|
||
|
|
.headings-wide-spacing-enabled input[type="button"] {
|
||
|
|
letter-spacing: 0.25em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
input[type="submit"] + input[type="submit"],
|
||
|
|
.button + .button {
|
||
|
|
margin-left: 20px;
|
||
|
|
}
|
||
|
|
@media (max-width: 767px) {
|
||
|
|
.text-center .button + .button {
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
.text-center .button {
|
||
|
|
margin-right: 5px;
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
a.button:hover,
|
||
|
|
a.button:focus,
|
||
|
|
.button > a:hover,
|
||
|
|
.button > a:focus,
|
||
|
|
input[type="submit"]:hover,
|
||
|
|
input[type="submit"]:focus,
|
||
|
|
input[type="reset"]:hover,
|
||
|
|
input[type="reset"]:focus,
|
||
|
|
input[type="button"]:hover,
|
||
|
|
input[type="button"]:focus {
|
||
|
|
color: #ffffff;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
span.button-operator {
|
||
|
|
margin: 0 10px 0 5px;
|
||
|
|
}
|
||
|
|
a.button i {
|
||
|
|
padding-right: 10px;
|
||
|
|
}
|
||
|
|
a.button--no-margins {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*Buttons hover style 2*/
|
||
|
|
a.button.button--hover-style-2,
|
||
|
|
.button.button--hover-style-2 > a {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
a.button.button--hover-style-2:before,
|
||
|
|
.button.button--hover-style-2 > a:before {
|
||
|
|
content:"";
|
||
|
|
position: absolute;
|
||
|
|
z-index: -1;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
transform: scaleX(0);
|
||
|
|
border-radius: 0px;
|
||
|
|
-webkit-transition: all 0.2s ease-in-out;
|
||
|
|
-moz-transition: all 0.2s ease-in-out;
|
||
|
|
-ms-transition: all 0.2s ease-in-out;
|
||
|
|
-o-transition: all 0.2s ease-in-out;
|
||
|
|
transition: all 0.2s ease-in-out;
|
||
|
|
}
|
||
|
|
a.button.button--hover-style-2:hover:before,
|
||
|
|
a.button.button--hover-style-2:focus:before,
|
||
|
|
.button.button--hover-style-2 > a:hover:before,
|
||
|
|
.button.button--hover-style-2 > a:focus:before {
|
||
|
|
transform: scaleX(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/*Colored Regions*/
|
||
|
|
.region--light-typography a.button,
|
||
|
|
.region--light-typography .button > a,
|
||
|
|
.region--light-typography input[type="submit"],
|
||
|
|
.region--light-typography input[type="reset"],
|
||
|
|
.region--light-typography input[type="button"] {
|
||
|
|
color: #ffffff;
|
||
|
|
text-decoration: none;
|
||
|
|
background-color: transparent;
|
||
|
|
border-style: solid;
|
||
|
|
border-width: 1px;
|
||
|
|
border-color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*Colored Regions style 2*/
|
||
|
|
.region--colored-background a.button.button--hover-style-2:hover,
|
||
|
|
.region--dark-background a.button.button--hover-style-2:hover,
|
||
|
|
.region--black-background a.button.button--hover-style-2:hover,
|
||
|
|
.region--colored-background .button.button--hover-style-2 > a:hover,
|
||
|
|
.region--dark-background .button.button--hover-style-2 > a:hover,
|
||
|
|
.region--black-background .button.button--hover-style-2 > a:hover {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|