From e145c9d68092e0b266cb0a31295928d316cc9ca0 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 19 Sep 2021 18:08:24 +0100 Subject: [PATCH] Finish direction mixins --- docs/_includes/elements/anchor-bis.html | 8 + docs/_includes/index/beautified.html | 2 +- docs/_sass/components/content.scss | 5 + docs/_sass/examples/mixins.scss | 138 ++++++ docs/css/bulma-docs.css | 161 +++++++ docs/documentation/utilities/mixins.html | 428 ++++++++++++++++-- .../utilities/responsive-mixins.html | 63 +-- sass/utilities/mixins.sass | 1 - 8 files changed, 702 insertions(+), 104 deletions(-) create mode 100644 docs/_includes/elements/anchor-bis.html diff --git a/docs/_includes/elements/anchor-bis.html b/docs/_includes/elements/anchor-bis.html new file mode 100644 index 00000000..c22e6909 --- /dev/null +++ b/docs/_includes/elements/anchor-bis.html @@ -0,0 +1,8 @@ +

+ + {{ include.name }} + + + # + +

diff --git a/docs/_includes/index/beautified.html b/docs/_includes/index/beautified.html index a835ffdf..91e86dab 100644 --- a/docs/_includes/index/beautified.html +++ b/docs/_includes/index/beautified.html @@ -9,7 +9,7 @@
- See what Bulma developers are bulding + See what Bulma developers are building
diff --git a/docs/_sass/components/content.scss b/docs/_sass/components/content.scss index 7d46166a..4d953c50 100644 --- a/docs/_sass/components/content.scss +++ b/docs/_sass/components/content.scss @@ -32,6 +32,11 @@ &.title { font-size: 1.5em; + + &.is-5 { + font-size: 1.25em; + margin-top: 0 !important; + } } @include until($widescreen) { diff --git a/docs/_sass/examples/mixins.scss b/docs/_sass/examples/mixins.scss index a328582e..07328603 100644 --- a/docs/_sass/examples/mixins.scss +++ b/docs/_sass/examples/mixins.scss @@ -22,3 +22,141 @@ @include fa(1rem, 2rem); background-color: lavender; } + +.bulma-overlay-mixin-parent { + background-image: url(https://source.unsplash.com/La2kOu2dmH4/640x320); + background-size: cover; + border-radius: 0.5em; + position: relative; + height: 11.25rem; + width: 20rem; +} + +.bulma-overlay-mixin { + @include overlay(1.5rem); + background-color: darkorange; + border-radius: 0.25em; + color: white; + opacity: 0.9; + padding: 1em; +} + +.bulma-placeholder-mixin { + @include placeholder { + color: lightblue; + } + + border-color: hsl(195deg, 53%, 79%); + + &:hover { + border-color: hsl(195deg, 83%, 66%); + } + + &:focus, + &:active { + border-color: hsl(195deg, 100%, 56%) !important; + box-shadow: 0 0 0 0.125em hsla(195deg, 100%, 56%, 0.25) !important; + } +} + +.bulma-clearfix-mixin { + @include clearfix; + + img { + border-radius: 0.25em; + margin-right: 0.5em; + } +} + +.bulma-center-mixin-parent { + background-image: url(https://source.unsplash.com/xo3Bd2tYeqg/640x320); + background-size: cover; + border-radius: 0.5em; + position: relative; + height: 11.25rem; + width: 20rem; +} + +.bulma-center-mixin { + @include center(96px); + border-radius: 8px; + height: 96px; + width: 96px; +} + +.bulma-reset-mixin { + @include reset; +} + +.bulma-unselectable-mixin { + @include unselectable; +} + +.bulma-ltr-rtl-mixin { + background-color: lightgreen; + padding: 0.5em 1em; + border: 1px solid seagreen; + margin-right: -1px; + + &:first-child { + @include ltr { + border-bottom-left-radius: 0.5em; + border-top-left-radius: 0.5em; + } + + @include rtl { + border-bottom-right-radius: 0.5em; + border-top-right-radius: 0.5em; + } + } + + &:last-child { + @include ltr { + border-bottom-right-radius: 0.5em; + border-top-right-radius: 0.5em; + } + + @include rtl { + border-bottom-left-radius: 0.5em; + border-top-left-radius: 0.5em; + } + } +} + +.bulma-ltr-position-mixin-parent { + background-color: beige; + border-radius: 0.5em; + padding: 1rem; + padding-left: 5rem; + position: relative; + + p { + margin-top: -0.25rem; + } +} + +.bulma-ltr-position-mixin { + @include ltr-position(1rem, false); + border-radius: 0.25em; + position: absolute; + top: 1rem; +} + +.bulma-ltr-property-mixin-parent { + align-items: flex-start; + background-color: midnightblue; + border-radius: 0.5em; + color: lightskyblue; + display: flex; + padding: 1.5rem; + position: relative; + + p { + margin-top: -0.25rem; + } +} + +.bulma-ltr-property-mixin { + @include ltr-property("margin", 1rem, false); + border-radius: 0.25em; +} diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 240a8390..ae72e638 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -17887,6 +17887,11 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { font-size: 1.5em; } +.bd-anchor-title.title.is-5 { + font-size: 1.25em; + margin-top: 0 !important; +} + @media screen and (max-width: 1215px) { .bd-anchor-title { padding-left: 1em; @@ -22390,3 +22395,159 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus { width: 2rem; background-color: lavender; } + +.bulma-overlay-mixin-parent { + background-image: url(https://source.unsplash.com/La2kOu2dmH4/640x320); + background-size: cover; + border-radius: 0.5em; + position: relative; + height: 11.25rem; + width: 20rem; +} + +.bulma-overlay-mixin { + bottom: 1.5rem; + left: 1.5rem; + position: absolute; + right: 1.5rem; + top: 1.5rem; + background-color: darkorange; + border-radius: 0.25em; + color: white; + opacity: 0.9; + padding: 1em; +} + +.bulma-placeholder-mixin { + border-color: lightblue; +} + +.bulma-placeholder-mixin::-moz-placeholder { + color: lightblue; +} + +.bulma-placeholder-mixin::-webkit-input-placeholder { + color: lightblue; +} + +.bulma-placeholder-mixin:-moz-placeholder { + color: lightblue; +} + +.bulma-placeholder-mixin:-ms-input-placeholder { + color: lightblue; +} + +.bulma-placeholder-mixin:hover { + border-color: #60ccf0; +} + +.bulma-placeholder-mixin:focus, .bulma-placeholder-mixin:active { + border-color: #1fc7ff !important; + box-shadow: 0 0 0 0.125em rgba(31, 199, 255, 0.25) !important; +} + +.bulma-clearfix-mixin::after { + clear: both; + content: " "; + display: table; +} + +.bulma-clearfix-mixin img { + border-radius: 0.25em; + margin-right: 0.5em; +} + +.bulma-center-mixin-parent { + background-image: url(https://source.unsplash.com/xo3Bd2tYeqg/640x320); + background-size: cover; + border-radius: 0.5em; + position: relative; + height: 11.25rem; + width: 20rem; +} + +.bulma-center-mixin { + position: absolute; + left: calc(50% - (96px * 0.5)); + top: calc(50% - (96px * 0.5)); + border-radius: 8px; + height: 96px; + width: 96px; +} + +.bulma-reset-mixin { + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background: none; + border: none; + color: currentColor; + font-family: inherit; + font-size: 1em; + margin: 0; + padding: 0; +} + +.bulma-unselectable-mixin { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.bulma-ltr-rtl-mixin { + background-color: lightgreen; + padding: 0.5em 1em; + border: 1px solid seagreen; + margin-right: -1px; +} + +.bulma-ltr-rtl-mixin:first-child { + border-bottom-left-radius: 0.5em; + border-top-left-radius: 0.5em; +} + +.bulma-ltr-rtl-mixin:last-child { + border-bottom-right-radius: 0.5em; + border-top-right-radius: 0.5em; +} + +.bulma-ltr-position-mixin-parent { + background-color: beige; + border-radius: 0.5em; + padding: 1rem; + padding-left: 5rem; + position: relative; +} + +.bulma-ltr-position-mixin-parent p { + margin-top: -0.25rem; +} + +.bulma-ltr-position-mixin { + left: 1rem; + border-radius: 0.25em; + position: absolute; + top: 1rem; +} + +.bulma-ltr-property-mixin-parent { + align-items: flex-start; + background-color: midnightblue; + border-radius: 0.5em; + color: lightskyblue; + display: flex; + padding: 1.5rem; + position: relative; +} + +.bulma-ltr-property-mixin-parent p { + margin-top: -0.25rem; +} + +.bulma-ltr-property-mixin { + margin-left: 1rem; + border-radius: 0.25em; +} diff --git a/docs/documentation/utilities/mixins.html b/docs/documentation/utilities/mixins.html index cecb47b7..99ecf7f5 100644 --- a/docs/documentation/utilities/mixins.html +++ b/docs/documentation/utilities/mixins.html @@ -18,7 +18,11 @@ breadcrumb: {% include elements/anchor.html name="Element Mixins" %} -

Arrow

+

+ These mixins create a visual HTML element. +

+ +{% include elements/anchor-bis.html name="Arrow" %}

@@ -38,7 +42,7 @@ breadcrumb: -

Hamburger

+{% include elements/anchor-bis.html name="Hamburger" %}

@@ -62,7 +66,7 @@ breadcrumb: -

Delete

+{% include elements/anchor-bis.html name="Delete" %}

@@ -85,7 +89,7 @@ breadcrumb: -

Loader

+{% include elements/anchor-bis.html name="Loader" %}

@@ -105,31 +109,7 @@ breadcrumb: -

Block

- -
-

- The block() mixin adds spacing below an element, but only if it's not the last child. -
- The $spacing parameter defines the value of the margin-bottom. -

-
- -{% highlight sass %}.bulma-block-mixin { - @include block(1rem); -}{% endhighlight %} - -{% capture block %} -

This element has a margin-bottom.

-

This element too.

-

Not this one because it's the last child.

-{% endcapture %} - -{% include elements/snippet.html content=block %} - - - -

Font Awesome container

+{% include elements/anchor-bis.html name="Font Awesome container" %}

@@ -156,29 +136,393 @@ breadcrumb: -@include overlay($offset: 0) +{% include elements/anchor.html name="CSS Mixins" %} -@include placeholder +

+ These mixins add CSS rules to the element. +

-// Tools + -@include clearfix +{% include elements/anchor-bis.html name="Block" %} -@include center($width, $height: 0) +
+

+ The block() mixin adds spacing below an element, but only if it's not the last child. +
+ The $spacing parameter defines the value of the margin-bottom. +

+
-@include overflow-touch +{% highlight sass %}.bulma-block-mixin { + @include block(1rem); +}{% endhighlight %} -@include reset +{% capture block %} +

This element has a margin-bottom.

+

This element too.

+

Not this one because it's the last child.

+{% endcapture %} -@include unselectable +{% include elements/snippet.html content=block %} -// RTL + -@include ltr +{% include elements/anchor-bis.html name="Overlay" %} -@include rtl +
+

+ The overlay() mixin makes the element cover its closest positioned ancestor. +
+ The $offset parameter defines how far inside the element is positioned from each edge (top, bottom, left and right). +

+
-@include ltr-property($property, $spacing, $right: true) +{% highlight sass %}.bulma-overlay-mixin { + @include overlay(1.5rem); + background-color: darkorange; + border-radius: 0.25em; + color: white; + opacity: 0.9; + padding: 1em; +}{% endhighlight %} -@include ltr-position($spacing, $right: true) +{% capture overlay %} +
+
Overlay element
+
+{% endcapture %} +{% include elements/snippet.html content=overlay %} + + + +{% include elements/anchor-bis.html name="Center" %} + +
+

+ The center() mixin allows you to absolutely position an element with fixed dimensions at the center of its closest positioned ancestor. +
+ The value of the $width parameter should be the width of the element the mixin is applied on. +
+ Unless the element has square dimensions, the second parameter $height is required and its value should be the height of the element the mixin is applied on. +

+
+ +{% highlight sass %}.bulma-center-mixin { + @include center; +}{% endhighlight %} + +{% capture center %} +
+ +
+{% endcapture %} + +{% include elements/snippet.html content=center %} + + + +{% include elements/anchor-bis.html name="Placeholder" %} + +
+

+ The placeholder() mixin allows you to change the style of an input's placeholder. +
+ The $offset parameter defines how far inside the element is positioned from each edge (top, bottom, left and right). +

+
+ +{% highlight sass %}.bulma-placeholder-mixin { + @include placeholder { + color: lightblue; + } +}{% endhighlight %} + +{% capture placeholder %} + +{% endcapture %} + +{% include elements/snippet.html content=placeholder %} + + + +{% include elements/anchor-bis.html name="Clearfix" %} + +
+

+ The clearfix() mixin adds a ::after pseudo-element with a clear: both rule. +

+
+ +{% highlight sass %}.bulma-clearfix-mixin { + @include clearfix; +}{% endhighlight %} + +{% capture clearfix %} +
+ +

This is a short image description.

+
+ +

This text is following the clearfix element and is correctly placed after.

+{% endcapture %} + +{% include elements/snippet.html content=clearfix %} + + + +{% include elements/anchor-bis.html name="Reset" %} + +
+

+ The reset() mixin applies a soft style reset. This is especially useful for <button> elements. +

+
+ +{% highlight sass %}.bulma-reset-mixin { + @include reset; +}{% endhighlight %} + +{% capture reset %} + + +{% endcapture %} + +{% include elements/snippet.html content=reset %} + + + +{% include elements/anchor-bis.html name="Unselectable" %} + +
+

+ The unselectable() mixin makes an element not selectable. This is to prevent the text to be selected when double-clicked. +

+
+ +{% highlight sass %}.bulma-unselectable-mixin { + @include unselectable; +}{% endhighlight %} + +{% capture unselectable %} +

This text is selectable.

+

This text is not selectable.

+{% endcapture %} + +{% include elements/snippet.html content=unselectable %} + + + +{% include elements/anchor-bis.html name="Overflow Touch" %} + +
+

+ The overflow-touch() mixin add the -webkit-overflow-scrolling: touch; rule to the element. +

+
+ + + +{% include elements/anchor.html name="Direction Mixins" %} + +{% include elements/anchor-bis.html name="Left-to-right and Right-to-left Mixins" %} + +
+

+ Bulma has a global $rtl flag, which allows the framework to output a Right-to-left version of the CSS. By default, this flag's value is set to false. This means the framework output a Left-to-right version. +

+ +

+ The mixins @mixin ltr and @mixin rtl are here to output CSS rules based on the value of $rtl: +

+ +
    +
  • + if $rtl: true, @include ltr outputs nothing +
    • +
  • + if $rtl: false, @include rtl outputs nothing +
    • +
+ +

+ This is useful for properties that are specific to the side of an element. +

+
+ +{% highlight sass %}.bulma-ltr-rtl-mixin { + background-color: lightgreen; + padding: 0.5em 1em; + border: 1px solid seagreen; + margin-right: -1px; + + &:first-child { + @include ltr { + border-bottom-left-radius: 0.5em; + border-top-left-radius: 0.5em; + } + + @include rtl { + border-bottom-right-radius: 0.5em; + border-top-right-radius: 0.5em; + } + } + + &:last-child { + @include ltr { + border-bottom-right-radius: 0.5em; + border-top-right-radius: 0.5em; + } + + @include rtl { + border-bottom-left-radius: 0.5em; + border-top-left-radius: 0.5em; + } + } +}{% endhighlight %} + +{% capture ltr-rtl %} +
+ One + Two + Three +
+{% endcapture %} + +{% include elements/snippet.html content=ltr-rtl %} + + + +{% include elements/anchor-bis.html name="LTR Position" %} + +
+

+ The ltr-position() mixin is a quick way to switch between left and right CSS properties when dealing with positioned elements. +
+ The first $spacing parameter defines the value of the offset, whether it's right or left. +
+ The second $right parameter defines if the property outputs right (default) or left. +

+ +

+ Here is what the output looks like with a $spacing parameter set to 1rem: +

+ + + + + + + + + + + + + + + + + + + + + +
Flag →$rtl: false;$rtl: true;
@include ltr-position(1rem, true)right: 1remleft: 1rem
@include ltr-position(1rem, false)left: 1remright: 1rem
+
+ +

Sass source

+ +{% highlight sass %}.bulma-ltr-position-mixin { + @include ltr-position(1rem, false); + border-radius: 0.25em; + position: absolute; + top: 1rem; +}{% endhighlight %} + +

CSS output

+ +{% highlight css %}.bulma-ltr-position-mixin { + left: 1rem; + border-radius: 0.25em; + position: absolute; + top: 1rem; +}{% endhighlight %} + +{% capture ltr-position %} +
+ +

Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.

+
+{% endcapture %} + +{% include elements/snippet.html content=ltr-position %} + + +{% include elements/anchor-bis.html name="LTR Property" %} + +
+

+ The ltr-property() mixin works like the ltr-position() mixin but allows you to choose which CSS property to set. The mixin will append -right or -left to that property. This is especially useful for margin and padding. +
+ The first $property parameter which property you want to "flip" left and right. +
+ The second $spacing parameter defines the value of the offset, whether it's right or left. +
+ The third $right parameter defines if the property outputs right (default) or left. +

+ +

+ Here is what the output looks like with a $spacing parameter set to 1rem: +

+ + + + + + + + + + + + + + + + + + + + + +
Flag →$rtl: false;$rtl: true;
@include ltr-property("margin", 1rem, true)margin-right: 1remmargin-left: 1rem
@include ltr-property("margin", 1rem, false)margin-left: 1remmargin-right: 1rem
+
+ +

Sass source

+ +{% highlight sass %}.bulma-ltr-property-mixin { + @include ltr-property("margin", 1rem, false); + border-radius: 0.25em; +}{% endhighlight %} + +

CSS output

+ +{% highlight css %}.bulma-ltr-property-mixin { + margin-left: 1rem; + border-radius: 0.25em; +}{% endhighlight %} + +{% capture ltr-property %} +
+

Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.

+ +
+{% endcapture %} + +{% include elements/snippet.html content=ltr-property %} diff --git a/docs/documentation/utilities/responsive-mixins.html b/docs/documentation/utilities/responsive-mixins.html index 7dcf0a7b..15af10b9 100644 --- a/docs/documentation/utilities/responsive-mixins.html +++ b/docs/documentation/utilities/responsive-mixins.html @@ -1,68 +1,11 @@ --- title: Mixins layout: documentation -doc-tab: overview +doc-tab: utilities doc-subtab: mixins breadcrumb: - home - documentation -- overview -- overview-mixins +- utilities +- utilities-responsive-mixins --- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
=arrow($color)Creates a CSS-only down arrow. Used for the dropdown select.
=blockDefines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.
=clearfixAdds a clearfix at the end of the element. Used for the "is-clearfix" helper.
=center($size)Positions an element in the exact center of its parent. Used for the spinner in a loading button.
=deleteCreates a CSS-only cross. Used for the delete element in modals, messages, tags...
=fa($size, $dimensions)Sets the style of a Font Awesome icon container.
=hamburger($dimensions)Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".
=loaderCreates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.
=overflow-touchSets the style of a container so that it keeps momentum when scrolling on iOS devices.
=overlay($offset: 0)Makes the element overlay its parent container, like the transparent modal background.
=placeholderSets the styles of an input placeholder.
=unselectableTurns the element unselectable. Used for buttons to prevent selection when clicking.
-
- -
-

These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.

-
diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass index 248d2827..4d2e5b53 100644 --- a/sass/utilities/mixins.sass +++ b/sass/utilities/mixins.sass @@ -282,4 +282,3 @@ position: absolute right: $offset top: $offset -