From: Spencer Kordecki Date: Wed, 3 Oct 2018 02:52:12 +0000 (-0400) Subject: adds table-container to colors, functions, mixins, and variables tables X-Git-Tag: 0.7.2~25 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=57808aebab00799ee1695e97f64192e354a117d9;p=thirdparty%2Fbulma.git adds table-container to colors, functions, mixins, and variables tables --- diff --git a/docs/documentation/customize/variables.html b/docs/documentation/customize/variables.html index 6520108a7..eb57aafef 100644 --- a/docs/documentation/customize/variables.html +++ b/docs/documentation/customize/variables.html @@ -72,14 +72,16 @@ breadcrumb:

- - - {% for variable_name in initial_variables.list %} - {% assign variable = initial_vars[variable_name] %} - {% include elements/variable-row.html variable=variable hide_computed =true%} - {% endfor %} - -
+
+ + + {% for variable_name in initial_variables.list %} + {% assign variable = initial_vars[variable_name] %} + {% include elements/variable-row.html variable=variable hide_computed =true%} + {% endfor %} + +
+
{% capture custom_message %} These are variables with a value that references another variable. diff --git a/docs/documentation/overview/colors.html b/docs/documentation/overview/colors.html index 52d7edc14..53f256728 100644 --- a/docs/documentation/overview/colors.html +++ b/docs/documentation/overview/colors.html @@ -39,54 +39,56 @@ shades:

- - - - - - - - - - - - - {% for color in page.colors %} - {% assign derivedColor = site.data.colors.derived | where: "id", color | first %} - {% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %} +
+
ColorVariableValueComputed valueInvert valueComputed invert value
+ - - - - - {% if derivedColor.invertValue %} + + + + + + + + + + {% for color in page.colors %} + {% assign derivedColor = site.data.colors.derived | where: "id", color | first %} + {% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %} + - {% elsif derivedColor.invertId %} - {% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %} - {% endif %} - - {% endfor %} - -
- {{ derivedColor.id | capitalize }} - - ${{ derivedColor.id }} - - ${{ initialColor.id }} - - {% include elements/color-square.html value=initialColor.value %} - ColorVariableValueComputed valueInvert valueComputed invert value
- {{ derivedColor.invertValue }} + {{ derivedColor.id | capitalize }} - {% include elements/color-square.html value=derivedColor.invertValue %} + ${{ derivedColor.id }} - ${{ derivedColor.invertId }} + ${{ initialColor.id }} - {% include elements/color-square.html value=invertColor.value %} + {% include elements/color-square.html value=initialColor.value %}
+ {% if derivedColor.invertValue %} + + {{ derivedColor.invertValue }} + + + {% include elements/color-square.html value=derivedColor.invertValue %} + + {% elsif derivedColor.invertId %} + {% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %} + + ${{ derivedColor.invertId }} + + + {% include elements/color-square.html value=invertColor.value %} + + {% endif %} + + {% endfor %} + + +

@@ -94,28 +96,30 @@ shades:

- - - - - - - - - - {% for shade in page.shades %} - {% assign initial_shade = site.data.colors.initial | where: "id", shade | first %} +
+
ColorVariableValue
+ - - - + + + - {% endfor %} - -
- {{ initial_shade.name | capitalize }} - - ${{ initial_shade.id }} - - {% include elements/color-square.html value=initial_shade.value %} - ColorVariableValue
+ + + {% for shade in page.shades %} + {% assign initial_shade = site.data.colors.initial | where: "id", shade | first %} + + + {{ initial_shade.name | capitalize }} + + + ${{ initial_shade.id }} + + + {% include elements/color-square.html value=initial_shade.value %} + + + {% endfor %} + + + diff --git a/docs/documentation/overview/functions.html b/docs/documentation/overview/functions.html index 596bc1ce0..91766fca0 100644 --- a/docs/documentation/overview/functions.html +++ b/docs/documentation/overview/functions.html @@ -28,203 +28,207 @@ breadcrumb:
  • otherwise, it outputs #fff

    • Its purpose is to guarantee a readable shade for the text when the input color is used as the background.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    colorcolor luminancefindColorInvert()result
    - - #00d1b2 - - 0.52831 - - - #fff - - - Button - -
    - - #3273dc - - 0.23119 - - - #fff - - - Button - -
    - - #23d160 - - 0.51067 - - - #fff - - - Button - -
    - - #ffdd57 - - 0.76863 - - - rgba(0, 0, 0, 0.7) - - - Button - -
    - - #ff3860 - - 0.27313 - - - #fff - - - Button - -
    - - #ffb3b3 - - 0.61796 - - - rgba(0,0,0,0.7) - - - Button - -
    - - #ffbc6b - - 0.63053 - - - rgba(0,0,0,0.7) - - - Button - -
    - - hsl(294, 71%, 79%) - - 0.5529 - - - rgba(0,0,0,0.7) - - - Button - -
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    colorcolor luminancefindColorInvert()result
    + + #00d1b2 + + 0.52831 + + + #fff + + + Button + +
    + + #3273dc + + 0.23119 + + + #fff + + + Button + +
    + + #23d160 + + 0.51067 + + + #fff + + + Button + +
    + + #ffdd57 + + 0.76863 + + + rgba(0, 0, 0, 0.7) + + + Button + +
    + + #ff3860 + + 0.27313 + + + #fff + + + Button + +
    + + #ffb3b3 + + 0.61796 + + + rgba(0,0,0,0.7) + + + Button + +
    + + #ffbc6b + + 0.63053 + + + rgba(0,0,0,0.7) + + + Button + +
    + + hsl(294, 71%, 79%) + + 0.5529 + + + rgba(0,0,0,0.7) + + + Button + +
    +

    For colors that have a luminance close to the 0.55 threshold, it can be useful to override the findColorInvert() function, and rather set the invert color manually.
    For example, this shade of purple has a color luminance of 0.5529. It can be preferable to set a color invert of white instead of transparent black:

    - - - - - - - - - - - - - - - -
    - with findColorInvert() - - $purple-invert: findColorInvert($purple) - - - rgba(0,0,0,0.7) - - - Button - -
    - with manual setting - - $purple-invert: #fff - - - #fff - - - Button - -
    +
    + + + + + + + + + + + + + + + +
    + with findColorInvert() + + $purple-invert: findColorInvert($purple) + + + rgba(0,0,0,0.7) + + + Button + +
    + with manual setting + + $purple-invert: #fff + + + #fff + + + Button + +
    +
    diff --git a/docs/documentation/overview/mixins.html b/docs/documentation/overview/mixins.html index b8aa78663..7dcf0a7ba 100644 --- a/docs/documentation/overview/mixins.html +++ b/docs/documentation/overview/mixins.html @@ -10,56 +10,58 @@ breadcrumb: - overview-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.
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    =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.