SCSS Mixins

The framework comes with some helpful SCSS mixins to re-use.

To use them, import this file:

@use '@natachah/vanilla-frontend/scss/abstracts/mixins';

Create an item

This mixin creates an element as an item with some default style properties:

• Color
• Background
• Border
• Border radius
• Padding
• State :hover, :focus, :active and :disabled

/// Create a basic item that can be interactive or not
///
/// @param {string} $name - Name of the component
/// @param {array} $states - List of interactions (can be: focus, hover, active, disabled)
/// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
/// @access public
///

@include as-item($name, $states: (), $properties: default.$item-properties)

The default properties are set inside the default.$item-properties variable of the file ./scss/variables/_setting.scss

In case that you want to customize the default:

@use "sass:map";
@use "@natachah/vanilla-frontend/scss/abstracts/default";
@use '@natachah/vanilla-frontend/scss/abstracts/mixins' as *;

// Change default properties
$submenuProperties: map.merge(default.$item-properties, (background: var(--color-body)));

#submenu {
    @include as-list('submenu', ('focus', 'hover', 'active', 'disabled'), $submenuProperties);                  
}

Create a list

This mixin transforms a <ul/ol/div> into a group list with all children as items.

/// Create a basic list group that can be interactive
///
/// @require {mixin} as-item
/// @param {string} $name - Name of the component
/// @param {array} $states - List of interactions (can be: focus, hover, active, disabled)
/// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
/// @access public
///

@include as-list($name, $states: (), $properties: default.$item-properties)

INFO

This mixin is used for the list and dropdown components.

Add header and footer to an item

This mixin will create a <header> and a <footer> with negative margin, some padding, and a divider border.

/// Create a basic item with an header and a footer style
///
/// @param {string} $name - Name of the component
/// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
/// @access public
///
@mixin with-header-and-footer($name, $properties: default.$item-properties)

INFO

This mixin is used in Dialog components.

Create a outline variation

This mixin will create the .outline class to transform an item to the outline variation.

/// Create a outline variation
///
/// @param {string} $name - Name of the component
/// @param {array} $states - List of interactions
/// @param {string} $color - The color of the item
/// @param {string} $contrast - The color contrast of the item
/// @access public
///

@include with-outline-variation($name, $states: (), $color: var(--color-font), $contrast: var(--color-body))

Create some color variations

This mixin will create the .COLOR classes to transform an item into multiple color variations.

/// Create some color variations
///
/// @param {string} $name - Name of the component
/// @param {array} $states - List of interactions
/// @param {array} $colors - List of colors
/// @param {boolean} $withOutline - Thit outline colored version
/// @access public
///

@include with-color-variations($name, $states: (), $colors: (), $withOutline: false)

Transform table to be responsive

This mixin will transform a <table> into a more responsive view. You must use this mixin inside a @media or a @container.

It also requires adding the attribute data-label="Name of the column" on each <td>.

By default the grid is set on 2 columns (15 characters and auto).

html

<table>
    <thead>
        <tr>
            <th>Header A</th>
            <th>Header B</th>
            <th>Header C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="Header A">Cell</td>
            <td data-label="Header B">Cell</td>
            <td data-label="Header C">Cell</td>
        </tr>
    </tbody>
</table>

scss

@container (max-width:800px) {
    table {
        @include as-responsive-table()
    }
}

css

--table-grid-template: 15ch 1fr;

Flex grid utilities

There two mixins to make it easier to change the offset and the width of a specific column when used with the grid component.

By default the flex-grid-wider-column parameter is 2, to have the width equal of two columns width.

By default the flex-grid-offset-column parameter is 1 to take the place of one column width.

html

<div class="flex-grid">
    <div>Flex 1</div>
    <div>Flex 2</div>
    <div>Flex 3</div>
    <div id="wider">Wider of 3</div>
    <div id="offset">Offset of 2</div>
</div>

scss

#wider {
    @include flex-grid-wider-column(3)
}

#offset {
    @include flex-grid-offset-column(2)
}

WARNING

This mixins only work with .flex-grid