Difference between revisions of "Template:SMMU-China/CSS Notebook"
| (One intermediate revision by the same user not shown) | |||
| Line 38: | Line 38: | ||
/* Box colors */ | /* Box colors */ | ||
| − | . | + | .notebook_bg { |
background: transparent; | background: transparent; | ||
| − | color: | + | color: #fff; |
} | } | ||
/* Common button styles */ | /* Common button styles */ | ||
| − | . | + | .notebook_button { |
float: left; | float: left; | ||
| + | height: auto; | ||
min-width: 150px; | min-width: 150px; | ||
max-width: 250px; | max-width: 250px; | ||
display: block; | display: block; | ||
margin: 1em; | margin: 1em; | ||
| − | padding: 1em; | + | padding: 1em 2em; |
border: none; | border: none; | ||
background: none; | background: none; | ||
| Line 60: | Line 61: | ||
-moz-osx-font-smoothing: grayscale; | -moz-osx-font-smoothing: grayscale; | ||
} | } | ||
| − | . | + | .notebook_button:focus { |
outline: none; | outline: none; | ||
} | } | ||
| − | . | + | .notebook_button > span { |
vertical-align: middle; | vertical-align: middle; | ||
} | } | ||
/* 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) */ | ||
| − | . | + | .notebook_bg .notebook_button { |
| − | color: | + | color: #fff; |
border-color: #fff; | border-color: #fff; | ||
} | } | ||
| Line 126: | Line 127: | ||
} | } | ||
.button--rayen.button--inverted { | .button--rayen.button--inverted { | ||
| − | color: | + | color: #fff; |
} | } | ||
.button--rayen::before { | .button--rayen::before { | ||
| Line 134: | Line 135: | ||
left: 0; | left: 0; | ||
width: 100%; | width: 100%; | ||
| − | height: | + | height: 100%; |
background: #b6553b; | background: #b6553b; | ||
-webkit-transform: translate3d(-100%, 0, 0); | -webkit-transform: translate3d(-100%, 0, 0); | ||
| Line 162: | Line 163: | ||
transform: translate3d(0, 100%, 0); | transform: translate3d(0, 100%, 0); | ||
} | } | ||
| − | . | + | .notebook_box { |
padding: 0; | padding: 0; | ||
display: -webkit-flex; | display: -webkit-flex; | ||
Latest revision as of 09:37, 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 */ .notebook_bg {
background: transparent; color: #fff;
}
/* Common button styles */ .notebook_button {
float: left; height: auto; min-width: 150px; max-width: 250px; display: block; margin: 1em; padding: 1em 2em; border: none; background: none; color: inherit; vertical-align: middle; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale;
} .notebook_button:focus {
outline: none;
} .notebook_button > span {
vertical-align: middle;
}
/* Text color adjustments (we could stick to the "inherit" but that does not work well in Safari) */ .notebook_bg .notebook_button {
color: #fff; 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: #fff;
} .button--rayen::before {
content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; 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);
} .notebook_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;
}