Commit 87f3033c authored by Florent Torregrosa's avatar Florent Torregrosa Committed by Florent Torregrosa
Browse files

Issue #3274223 by Grimreaper: Improve UI Styles library

parent 4c3b6471

ui_suite_zurb_foundation.ui_styles.yml

+75 −0
Original line number Diff line number Diff line 
# https://get.foundation/sites/docs/global.html#colors.

global_colors:

  label: 'Color'

  description: 'Foundation has an accessible default color palette. The primary color is used for interactive elements, such as links and buttons. The secondary, success, warning, and alert colors are used to give more context to UI elements and actions.'

  options:

    primary: 'Primary'

    secondary: 'Secondary'
@@ -16,12 +17,17 @@ prototyping_component_styling_border_radius: 
  options:

    radius: 'Radius'

    rounded: 'Rounded'

  previewed_with:

    - bordered

    - padding-1

# https://get.foundation/sites/docs/prototyping-utilities.html#border-none.

prototyping_component_styling_border:

  label: 'Border'

  options:

    border-none: 'None'

    bordered: 'Bordered'

  previewed_with:

    - padding-1

prototyping_component_styling_shadow:

  label: 'Shadow'

  options:
@@ -30,15 +36,18 @@ prototyping_component_styling_shadow: 
# https://get.foundation/sites/docs/prototyping-utilities.html#arrow-utility.

prototyping_arrow_utility:

  label: 'Arrow utility'

  description: 'Mostly used as dropdown arrows for navigation.'

  options:

    arrow-up: 'Arrow up'

    arrow-right: 'Arrow right'

    arrow-down: 'Arrow down'

    arrow-left: 'Arrow left'

  previewed_as: 'aside'



# https://get.foundation/sites/docs/prototyping-utilities.html#separator.

prototyping_separator:

  label: 'Separator'

  description: 'This creates a tiny separator below the heading of an element and is usually used within the heading of a section.'

  options:

    separator-left: 'Left'

    separator-center: 'Centered'
@@ -62,6 +71,7 @@ prototyping_font_styling_font_style: 
# https://get.foundation/sites/docs/prototyping-utilities.html#list-styling.

prototyping_list_styling:

  label: 'List styling'

  description: 'Please note that `.no-bullet` is enabled by default for both ordered and unordered lists.'

  options:

    no-bullet: 'No bullet'

    list-disc: 'Unordered: disc'
@@ -80,6 +90,7 @@ prototyping_text_hide: 
  label: 'Image replacement (text hide)'

  options:

    text-hide: 'Text hide'

  previewed_as: 'aside'



# https://get.foundation/sites/docs/prototyping-utilities.html#text-transformation.

prototyping_text_transformation:
@@ -110,11 +121,14 @@ prototyping_text_overflow: 
# https://get.foundation/sites/docs/prototyping-utilities.html#margin-helpers.

prototyping_margin:

  label: 'Margin'

  description: 'Generate spacing around elements with these easy to use margin classes.'

  options:

    margin-0: '0'

    margin-1: '1'

    margin-2: '2'

    margin-3: '3'

  previewed_with:

    - bordered

prototyping_margin_top:

  label: 'Margin top'

  options:
@@ -122,6 +136,8 @@ prototyping_margin_top: 
    margin-top-1: '1'

    margin-top-2: '2'

    margin-top-3: '3'

  previewed_with:

    - bordered

prototyping_margin_right:

  label: 'Margin right'

  options:
@@ -129,6 +145,8 @@ prototyping_margin_right: 
    margin-right-1: '1'

    margin-right-2: '2'

    margin-right-3: '3'

  previewed_with:

    - bordered

prototyping_margin_bottom:

  label: 'Margin bottom'

  options:
@@ -136,6 +154,8 @@ prototyping_margin_bottom: 
    margin-bottom-1: '1'

    margin-bottom-2: '2'

    margin-bottom-3: '3'

  previewed_with:

    - bordered

prototyping_margin_left:

  label: 'Margin left'

  options:
@@ -143,6 +163,8 @@ prototyping_margin_left: 
    margin-left-1: '1'

    margin-left-2: '2'

    margin-left-3: '3'

  previewed_with:

    - bordered

prototyping_margin_horizontal:

  label: 'Margin horizontal'

  options:
@@ -150,6 +172,8 @@ prototyping_margin_horizontal: 
    margin-horizontal-1: '1'

    margin-horizontal-2: '2'

    margin-horizontal-3: '3'

  previewed_with:

    - bordered

prototyping_margin_vertical:

  label: 'Margin vertical'

  options:
@@ -157,15 +181,20 @@ prototyping_margin_vertical: 
    margin-vertical-1: '1'

    margin-vertical-2: '2'

    margin-vertical-3: '3'

  previewed_with:

    - bordered



# https://get.foundation/sites/docs/prototyping-utilities.html#padding-helpers.

prototyping_padding:

  label: 'Padding'

  description: 'Generate spaces around the content with these easy to use padding classes.'

  options:

    padding-0: '0'

    padding-1: '1'

    padding-2: '2'

    padding-3: '3'

  previewed_with:

    - bordered

prototyping_padding_top:

  label: 'Padding top'

  options:
@@ -173,6 +202,8 @@ prototyping_padding_top: 
    padding-top-1: '1'

    padding-top-2: '2'

    padding-top-3: '3'

  previewed_with:

    - bordered

prototyping_padding_right:

  label: 'Padding right'

  options:
@@ -180,6 +211,8 @@ prototyping_padding_right: 
    padding-right-1: '1'

    padding-right-2: '2'

    padding-right-3: '3'

  previewed_with:

    - bordered

prototyping_padding_bottom:

  label: 'Padding bottom'

  options:
@@ -187,6 +220,8 @@ prototyping_padding_bottom: 
    padding-bottom-1: '1'

    padding-bottom-2: '2'

    padding-bottom-3: '3'

  previewed_with:

    - bordered

prototyping_padding_left:

  label: 'Padding left'

  options:
@@ -194,6 +229,8 @@ prototyping_padding_left: 
    padding-left-1: '1'

    padding-left-2: '2'

    padding-left-3: '3'

  previewed_with:

    - bordered

prototyping_padding_horizontal:

  label: 'Padding horizontal'

  options:
@@ -201,6 +238,8 @@ prototyping_padding_horizontal: 
    padding-horizontal-1: '1'

    padding-horizontal-2: '2'

    padding-horizontal-3: '3'

  previewed_with:

    - bordered

prototyping_padding_vertical:

  label: 'Padding vertical'

  options:
@@ -208,6 +247,8 @@ prototyping_padding_vertical: 
    padding-vertical-1: '1'

    padding-vertical-2: '2'

    padding-vertical-3: '3'

  previewed_with:

    - bordered



# https://get.foundation/sites/docs/prototyping-utilities.html#sizing.

prototyping_sizing_width:
@@ -218,6 +259,8 @@ prototyping_sizing_width: 
    width-75: 'Width 75%'

    width-100: 'Width 100%'

    max-width-100: 'Max width 100%'

  previewed_with:

    - bordered

prototyping_sizing_height:

  label: 'Sizing: height'

  options:
@@ -226,26 +269,33 @@ prototyping_sizing_height: 
    height-75: 'Height 75%'

    height-100: 'Height 100%'

    max-height-100: 'Max height 100%'

  previewed_with:

    - bordered



# https://get.foundation/sites/docs/prototyping-utilities.html#border-box.

prototyping_border_box:

  label: 'Border box'

  description: 'Border box lets you only add the content, padding and border, but not the margin within the width and height CSS properties.'

  options:

    border-box: 'Border box'



# https://get.foundation/sites/docs/prototyping-utilities.html#display-classes.

prototyping_display_classes:

  label: 'Display'

  description: 'Display classes allow you to change the display property of any element.'

  options:

    display-inline: 'Inline'

    display-inline-block: 'Inline block'

    display-block: 'Block'

    display-table: 'Table'

    display-table-cell: 'Table cell'

  previewed_with:

    - bordered



# https://get.foundation/sites/docs/prototyping-utilities.html#positioning.

prototyping_positioning:

  label: 'Positioning'

  description: "Positioning classes help you change an element's position value. By default, an element's position value is static."

  options:

    position-relative: 'Relative'

    position-absolute: 'Absolute'
@@ -253,10 +303,12 @@ prototyping_positioning: 
    position-fixed-top: 'Fixed top'

    position-fixed-bottom: 'Fixed bottom'

    position-static: 'Static'

  previewed_as: 'aside'



# https://get.foundation/sites/docs/prototyping-utilities.html#overflow.

prototyping_overflow:

  label: 'Overflow (all sides)'

  description: 'These overflow classes helps you to clip content, render scrollbars or simply just display the content when it overflows its block level container.'

  options:

    overflow-visible: 'Visible'

    overflow-hidden: 'Hidden'
@@ -319,6 +371,7 @@ visibility_generic: 
    hide: 'Hide'

    invisible: 'Invisible'

    visible: 'Visible'

  previewed_as: 'aside'



# https://get.foundation/sites/docs/visibility.html#show-by-screen-size.

visibility_show_screen_size:
@@ -333,6 +386,7 @@ visibility_show_screen_size: 
    show-for-large-only: 'Large only'

    show-for-xlarge-only: 'Extra large only'

    show-for-xxlarge-only: 'Extra extra large only'

  previewed_as: 'aside'



# https://get.foundation/sites/docs/visibility.html#hide-by-screen-size.

visibility_hide_screen_size:
@@ -347,6 +401,7 @@ visibility_hide_screen_size: 
    hide-for-large-only: 'Large only'

    hide-for-xlarge-only: 'Extra large only'

    hide-for-xxlarge-only: 'Extra extra large only'

  previewed_as: 'aside'



# https://get.foundation/sites/docs/visibility.html#orientation-detection.

visibility_orientation:
@@ -354,12 +409,14 @@ visibility_orientation: 
  options:

    show-for-landscape: 'Landscape'

    show-for-portrait: 'Portrait'

  previewed_as: 'aside'



# https://get.foundation/sites/docs/visibility.html#accessibility.

visibility_screen_readers:

  label: 'Show for screen readers'

  options:

    show-for-sr: 'Show for screen readers'

  previewed_as: 'aside'



# https://get.foundation/sites/docs/visibility.html#ie10-detection.

visibility_ie:
@@ -367,6 +424,7 @@ visibility_ie: 
  options:

    show-for-ie: 'Show'

    hide-for-ie: 'Hide'

  previewed_as: 'aside'



# https://get.foundation/sites/docs/visibility.html#dark-mode-detection.

visibility_dark_mode:
@@ -374,6 +432,7 @@ visibility_dark_mode: 
  options:

    show-for-dark-mode: 'Show'

    hide-for-dark-mode: 'Hide'

  previewed_as: 'aside'



# https://get.foundation/sites/docs/visibility.html#sticky-mode-detection.

visibility_sticky:
@@ -381,6 +440,7 @@ visibility_sticky: 
  options:

    show-for-sticky: 'Show'

    hide-for-sticky: 'Hide'

  previewed_as: 'aside'



# https://get.foundation/sites/docs/float-classes.html.

float:
@@ -403,18 +463,21 @@ typography_text_alignment: 
# https://get.foundation/sites/docs/typography-helpers.html#subheader.

typography_subheader:

  label: 'Subheader'

  description: 'Lighten up your headers by adding a class of .subheader to any header element.'

  options:

    subheader: 'Subheader'



# https://get.foundation/sites/docs/typography-helpers.html#lead-paragraph.

typography_lead_paragraph:

  label: 'Lead paragraph'

  description: 'A slightly-larger-than-normal block of text, useful for decks, blurbs, or other descriptive text.'

  options:

    lead: 'Lead'



# https://get.foundation/sites/docs/typography-helpers.html#typescale.

typography_typescale:

  label: 'Typescale'

  description: "Adjust font-size by overriding an element’s default size. This can be useful to size a 'p' or 'h1' through 'h6' using Foundation's existing header sizes."

  options:

    h1: 'h1'

    h2: 'h2'
@@ -426,6 +489,7 @@ typography_typescale: 
# https://get.foundation/sites/docs/typography-helpers.html#statistics.

typography_statistics:

  label: 'Statistics'

  description: "If you're building a dashboard, you might need to display some important numbers real big. Just add the .stat class to any element to amp up the font size."

  options:

    stat: 'Statistics'
@@ -438,10 +502,13 @@ button: 
# https://get.foundation/sites/docs/button.html#sizing.

button_sizing:

  label: 'Button size'

  description: 'Additional classes can be added to your button to change its size and shape.'

  options:

    tiny: 'Tiny'

    small: 'Small'

    large: 'Large'

  previewed_with:

    - button



# https://get.foundation/sites/docs/button.html#responsive-expanded-buttons.

button_sizing_expanded:
@@ -459,6 +526,8 @@ button_sizing_expanded: 
    large-only-expanded: 'Large only'

    xlarge-only-expanded: 'Extra large only'

    xxlarge-only-expanded: 'Extra extra large only'

  previewed_with:

    - button



# https://get.foundation/sites/docs/button.html#hollow-style.

# https://get.foundation/sites/docs/button.html#clear-style.
@@ -467,15 +536,21 @@ button_style: 
  options:

    hollow: 'Hollow'

    clear: 'Clear'

  previewed_with:

    - button



# https://get.foundation/sites/docs/button.html#disabled-buttons.

button_disable:

  label: 'Button disabled'

  options:

    disabled: 'Disabled'

  previewed_with:

    - button



# https://get.foundation/sites/docs/button.html#dropdown-arrows.

button_dropdown:

  label: 'Button dropdown'

  options:

    dropdown: 'Dropdown'

  previewed_with:

    - button