init
This commit is contained in:
commit
ff6f6c80cd
1709 changed files with 840760 additions and 0 deletions
205
wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss
Normal file
205
wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
// Rem output with px fallback
|
||||
@mixin font-size($sizeValue: 1) {
|
||||
font-size: ($sizeValue * 16) * 1px;
|
||||
font-size: $sizeValue * 1rem;
|
||||
}
|
||||
|
||||
// Center block
|
||||
@mixin center-block {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Clearfix
|
||||
@mixin clearfix() {
|
||||
content: "";
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
// Clear after (not all clearfix need this also)
|
||||
@mixin clearfix-after() {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Column width with margin
|
||||
@mixin column-width($numberColumns: 3) {
|
||||
width: map-get($columns, $numberColumns) - (($columns__margin * ($numberColumns - 1)) / $numberColumns);
|
||||
}
|
||||
|
||||
@mixin filter-duotone {
|
||||
|
||||
&:before {
|
||||
background: $color__link;
|
||||
mix-blend-mode: screen;
|
||||
opacity: 0.1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $color__link;
|
||||
mix-blend-mode: multiply;
|
||||
opacity: .8;
|
||||
z-index: 3;
|
||||
|
||||
/* Browsers supporting mix-blend-mode don't need opacity < 1 */
|
||||
@supports (mix-blend-mode: multiply) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin filter-grayscale {
|
||||
|
||||
position: relative;
|
||||
filter: grayscale(100%);
|
||||
z-index: 1;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin post-section-dash {
|
||||
|
||||
&:before {
|
||||
background: $color__text-light;
|
||||
content: "\020";
|
||||
display: block;
|
||||
height: 2px;
|
||||
margin: $size__spacing-unit 0;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* If we add the border using a regular CSS border, it won't look good on non-retina devices,
|
||||
* since its edges can look jagged due to lack of antialiasing. In this case, we are several
|
||||
* layers of box-shadow to add the border visually, which will render the border smoother. */
|
||||
|
||||
@mixin box-shadow( $size ) {
|
||||
box-shadow:
|
||||
0 0 0 $size $color__text-light inset, // Original border.
|
||||
0 0 0 ($size + 1px) $color__text-light inset, // Antialiasing, inner edge.
|
||||
0 0 1px 0 rgba( $color__text-light, 0.7 ); // Antialiasing, outer edge.
|
||||
}
|
||||
|
||||
/* Fallback for non-latin fonts */
|
||||
|
||||
@mixin non-latin-fonts( $wrapper_classname: '.site' ) {
|
||||
|
||||
/* Arabic */
|
||||
html[lang="ar"] #{$wrapper_classname} *,
|
||||
html[lang="ary"] #{$wrapper_classname} *,
|
||||
html[lang="azb"] #{$wrapper_classname} *,
|
||||
html[lang="ckb"] #{$wrapper_classname} *,
|
||||
html[lang="fa-IR"] #{$wrapper_classname} *,
|
||||
html[lang="haz"] #{$wrapper_classname} *,
|
||||
html[lang="ps"] #{$wrapper_classname} * {
|
||||
font-family: Tahoma, Arial, sans-serif !important;
|
||||
}
|
||||
|
||||
/* Cyrillic */
|
||||
html[lang="be"] #{$wrapper_classname} *,
|
||||
html[lang="bg-BG"] #{$wrapper_classname} *,
|
||||
html[lang="kk"] #{$wrapper_classname} *,
|
||||
html[lang="mk-MK"] #{$wrapper_classname} *,
|
||||
html[lang="mn"] #{$wrapper_classname} *,
|
||||
html[lang="ru-RU"] #{$wrapper_classname} *,
|
||||
html[lang="sah"] #{$wrapper_classname} *,
|
||||
html[lang="sr-RS"] #{$wrapper_classname} *,
|
||||
html[lang="tt-RU"] #{$wrapper_classname} *,
|
||||
html[lang="uk"] #{$wrapper_classname} * {
|
||||
font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif !important;
|
||||
}
|
||||
|
||||
/* Chinese (Hong Kong) */
|
||||
html[lang="zh-HK"] #{$wrapper_classname} * {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important;
|
||||
}
|
||||
|
||||
/* Chinese (Taiwan) */
|
||||
html[lang="zh-TW"] #{$wrapper_classname} * {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important;
|
||||
}
|
||||
|
||||
/* Chinese (China) */
|
||||
html[lang="zh-CN"] #{$wrapper_classname} * {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important;
|
||||
}
|
||||
|
||||
/* Devanagari */
|
||||
html[lang="bn-BD"] #{$wrapper_classname} *,
|
||||
html[lang="hi-IN"] #{$wrapper_classname} *,
|
||||
html[lang="mr"] #{$wrapper_classname} *,
|
||||
html[lang="ne-NP"] #{$wrapper_classname} * {
|
||||
font-family: Arial, sans-serif !important;
|
||||
}
|
||||
|
||||
/* Greek */
|
||||
html[lang="el"] #{$wrapper_classname} * {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
|
||||
}
|
||||
|
||||
/* Gujarati */
|
||||
html[lang="gu"] #{$wrapper_classname} * {
|
||||
font-family: Arial, sans-serif !important;
|
||||
}
|
||||
|
||||
/* Hebrew */
|
||||
html[lang="he-IL"] #{$wrapper_classname} * {
|
||||
font-family: 'Arial Hebrew', Arial, sans-serif !important;
|
||||
}
|
||||
|
||||
/* Japanese */
|
||||
html[lang="ja"] #{$wrapper_classname} * {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif !important;
|
||||
}
|
||||
|
||||
/* Korean */
|
||||
html[lang="ko-KR"] #{$wrapper_classname} * {
|
||||
font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', Dotum, sans-serif !important;
|
||||
}
|
||||
|
||||
/* Thai */
|
||||
html[lang="th"] #{$wrapper_classname} * {
|
||||
font-family: 'Sukhumvit Set', 'Helvetica Neue', helvetica, arial, sans-serif !important;
|
||||
}
|
||||
|
||||
/* Vietnamese */
|
||||
html[lang="vi"] #{$wrapper_classname} * {
|
||||
font-family: 'Libre Franklin', sans-serif !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Calculates maximum width for post content */
|
||||
@mixin postContentMaxWidth() {
|
||||
|
||||
@include media(tablet) {
|
||||
max-width: $size__site-tablet-content;
|
||||
}
|
||||
|
||||
@include media(desktop) {
|
||||
max-width: $size__site-desktop-content;
|
||||
}
|
||||
}
|
||||
|
||||
/* Nested sub-menu padding: 10 levels deep */
|
||||
@mixin nestedSubMenuPadding() {
|
||||
|
||||
ul {
|
||||
counter-reset: submenu;
|
||||
}
|
||||
|
||||
ul > li > a::before {
|
||||
font-family: $font__body;
|
||||
font-weight: normal;
|
||||
content: "\2013\00a0" counters(submenu, "\2013\00a0", none);
|
||||
counter-increment: submenu
|
||||
}
|
||||
}
|
||||
|
||||
@import "utilities";
|
||||
51
wp-content/themes/twentynineteen/sass/mixins/_utilities.scss
Normal file
51
wp-content/themes/twentynineteen/sass/mixins/_utilities.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
@mixin media( $res ) {
|
||||
@if mobile == $res {
|
||||
@media only screen and (min-width: $mobile_width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if tablet == $res {
|
||||
@media only screen and (min-width: $tablet_width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if desktop == $res {
|
||||
@media only screen and (min-width: $desktop_width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@if wide == $res {
|
||||
@media only screen and (min-width: $wide_width) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin link-transition( $attr: color ) {
|
||||
transition: $attr $link_transition ease-in-out;
|
||||
}
|
||||
|
||||
@mixin button-transition() {
|
||||
transition: background $button_transition ease-in-out;
|
||||
}
|
||||
|
||||
@mixin button-all-transition() {
|
||||
transition: all $button_transition ease-in-out;
|
||||
}
|
||||
|
||||
@mixin background-transition() {
|
||||
transition: background $background_transition ease-in-out;
|
||||
}
|
||||
|
||||
@mixin selection {
|
||||
::-moz-selection {
|
||||
@content;
|
||||
}
|
||||
::selection {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue