Line 40: | Line 40: | ||
.bg-3 { | .bg-3 { | ||
background: transparent; | background: transparent; | ||
− | color: | + | color: transparent; |
} | } | ||
Line 50: | Line 50: | ||
display: block; | display: block; | ||
margin: 1em; | margin: 1em; | ||
− | padding: 1em | + | padding: 1em; |
border: none; | border: none; | ||
background: none; | background: none; | ||
Line 69: | Line 69: | ||
/* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */ | /* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */ | ||
.bg-3 .button { | .bg-3 .button { | ||
− | color: | + | color: transparent; |
border-color: #fff; | border-color: #fff; | ||
} | } | ||
Line 126: | Line 126: | ||
} | } | ||
.button--rayen.button--inverted { | .button--rayen.button--inverted { | ||
− | color: | + | color: white; |
} | } | ||
.button--rayen::before { | .button--rayen::before { | ||
Line 134: | Line 134: | ||
left: 0; | left: 0; | ||
width: 100%; | width: 100%; | ||
− | height: | + | height: auto; |
background: #b6553b; | background: #b6553b; | ||
-webkit-transform: translate3d(-100%, 0, 0); | -webkit-transform: translate3d(-100%, 0, 0); |
Revision as of 09:24, 20 October 2019
.notebook-boxborder{
background: none; border: 0; box-sizing: border-box; box-shadow: inset 0 0 0 2px #b63b4d; font-size: inherit; font-weight: 700; margin: 1em; padding: 1em 2em; text-align: center; text-transform: capitalize; position: relative; vertical-align: middle; display: block;
} .notebook-boxborder .icon{
background: none; border: 0; box-sizing: border-box; box-shadow: inset 0 0 0 2px #b63b4d; margin-right: 5px; width: 50px; height: 50px; display: inline-block; alignment: center;
} .notebook-boxborder a{
text-align: center; text-align: -webkit-center; vertical-align: bottom; text-decoration-line: underline; line-height: 40px; font-size: 30px; color: #b63b4d; font-weight: bold; display: initial;
}
/* Box colors */ .bg-3 {
background: transparent; color: transparent;
}
/* Common button styles */ .button {
float: left; min-width: 150px; max-width: 250px; display: block; margin: 1em; padding: 1em; border: none; background: none; color: inherit; vertical-align: middle; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale;
} .button:focus {
outline: none;
} .button > span {
vertical-align: middle;
}
/* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */ .bg-3 .button {
color: transparent; border-color: #fff;
}
/* Sizes */ .button--size-s {
font-size: 20px;
} .button--size-m {
font-size: 22px;
} .button--size-l {
font-size: 24px;
}
/* Typography and Roundedness */ .button--text-upper {
letter-spacing: 2px; text-transform: uppercase;
} .button--text-thin {
font-weight: 300;
} .button--text-medium {
font-weight: 500;
} .button--text-thick {
font-weight: 600;
} .button--round-s {
border-radius: 5px;
} .button--round-m {
border-radius: 15px;
} .button--round-l {
border-radius: 40px;
}
/* Borders */ .button--border-thin {
border: 3px solid;
} .button--border-medium {
border: 4px solid;
} .button--border-thick {
border: 5px solid;
}
/* Rayen */ .button--rayen {
overflow: hidden; padding: 0; width: 230px;
} .button--rayen.button--inverted {
color: white;
} .button--rayen::before {
content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: auto; background: #b6553b; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
} .button--rayen.button--inverted::before {
background: #fff; color: #37474f;
} .button--rayen > span {
display: block;
} .button--rayen::before, .button--rayen > span {
padding: 0.5em; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1); transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
} .button--rayen:hover::before {
-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} .button--rayen:hover > span {
-webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
} .box {
padding: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center;
}