aboutsummaryrefslogtreecommitdiff
path: root/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins
diff options
context:
space:
mode:
authorCharles <sircharlesaze@gmail.com>2020-01-07 13:06:14 +0100
committerCharles <sircharlesaze@gmail.com>2020-01-07 13:06:14 +0100
commit7086111ad4dd997e12a3220e1ee60c9b9bcf0bb8 (patch)
treef7453d7dd5cbaaab246e23810b02d3edf1e451be /srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins
parentc59bdcf77c50cbe89b4a93782cdd6d9e7532080e (diff)
downloadft_server-7086111ad4dd997e12a3220e1ee60c9b9bcf0bb8.tar.gz
ft_server-7086111ad4dd997e12a3220e1ee60c9b9bcf0bb8.tar.bz2
ft_server-7086111ad4dd997e12a3220e1ee60c9b9bcf0bb8.zip
Added wordpress
Diffstat (limited to 'srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins')
-rw-r--r--srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss132
-rw-r--r--srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss51
2 files changed, 183 insertions, 0 deletions
diff --git a/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss
new file mode 100644
index 0000000..16065f9
--- /dev/null
+++ b/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss
@@ -0,0 +1,132 @@
+// 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.
+}
+
+/* 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
+ }
+}
+
+/* Ensure all font family declarations come with non-latin fallbacks */
+@mixin font-family( $font_family: $font__body ) {
+ font-family: $font_family;
+ @extend %non-latin-fonts;
+}
+
+/* Build our non-latin font styles */
+%non-latin-fonts {
+ @each $lang, $font__fallback in $font__fallbacks {
+ &:lang(#{$lang}) {
+ font-family: unquote( $font__fallback );
+ }
+ }
+}
+
+@import "utilities";
diff --git a/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss b/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss
new file mode 100644
index 0000000..c753fe2
--- /dev/null
+++ b/srcs/wordpress/wp-content/themes/twentynineteen/sass/mixins/_utilities.scss
@@ -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;
+ }
+}