From aaaa9d7902b1226de29b27fc2943d65da221e9e7 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Wed, 4 Jan 2017 14:30:52 +0100 Subject: [PATCH] Explain mixins --- docs/_includes/footer.html | 4 +- docs/_includes/subnav-overview.html | 9 ++-- docs/_layouts/default.html | 1 + docs/bulma-docs.sass | 5 ++ docs/css/bulma-docs.css | 5 ++ docs/documentation/overview/mixins.html | 71 +++++++++++++++++++++++++ docs/index.html | 2 +- sass/utilities/mixins.sass | 12 ----- 8 files changed, 92 insertions(+), 17 deletions(-) create mode 100644 docs/documentation/overview/mixins.html diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html index 1e905667..3ff4ff64 100644 --- a/docs/_includes/footer.html +++ b/docs/_includes/footer.html @@ -14,7 +14,9 @@
- + + +
diff --git a/docs/_includes/subnav-overview.html b/docs/_includes/subnav-overview.html index 92b30702..c4de1e9e 100644 --- a/docs/_includes/subnav-overview.html +++ b/docs/_includes/subnav-overview.html @@ -10,15 +10,18 @@ Modular - - Variables - Responsiveness Functions + + Variables + + + Mixins +
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 410384d3..dc9a5de9 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -3,5 +3,6 @@ {% include head.html %} {{ content }} + {% include footer.html %} diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass index 75016141..368dc640 100644 --- a/docs/bulma-docs.sass +++ b/docs/bulma-docs.sass @@ -187,10 +187,15 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1) animation-delay: 1.2s #npm + align-items: center animation: fadeIn 500ms both animation-delay: 1.4s + background: none + display: flex + justify-content: center margin: -10px 0 20px code + background: $background border-radius: $radius color: $primary display: inline-block diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index d67a5242..55898986 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -6525,12 +6525,17 @@ svg { } #npm { + align-items: center; animation: fadeIn 500ms both; animation-delay: 1.4s; + background: none; + display: flex; + justify-content: center; margin: -10px 0 20px; } #npm code { + background: whitesmoke; border-radius: 3px; color: #00d1b2; display: inline-block; diff --git a/docs/documentation/overview/mixins.html b/docs/documentation/overview/mixins.html new file mode 100644 index 00000000..5edcb686 --- /dev/null +++ b/docs/documentation/overview/mixins.html @@ -0,0 +1,71 @@ +--- +layout: documentation +doc-tab: overview +doc-subtab: mixins +--- + +{% include subnav-overview.html %} + +
+
+

Mixins

+

Utility mixins for custom elements and responsive helpers

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
=arrow($color)Creates a CSS-only down arrow. Used for the dropdown select.
=blockDefines a margin-bottom of 1.5rem, expect 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/docs/index.html b/docs/index.html index b866c81a..b9654a17 100644 --- a/docs/index.html +++ b/docs/index.html @@ -24,7 +24,7 @@ route: index 
npm install bulma
- +
{% include carbon.html %} diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass index b246fadc..8fe5702d 100644 --- a/sass/utilities/mixins.sass +++ b/sass/utilities/mixins.sass @@ -163,18 +163,6 @@ &:#{$placeholder}-placeholder @content -=replace($background, $width, $height) - background-color: $background - background-position: center center - background-repeat: no-repeat - background-size: $width $height - display: block - height: $height - outline: none - overflow: hidden - text-indent: -290486px - width: $width - =unselectable -webkit-touch-callout: none -webkit-user-select: none