Sha256: 9faf780c131a10091d55834e7af7d92df2419e468179cc76be95fa943440b634
Contents?: true
Size: 1.71 KB
Versions: 143
Compression:
Stored size: 1.71 KB
Contents
////
/// @group helpers
////
/// Grid width percentage
///
/// @param {String} $key - Name of grid width (e.g. two-thirds)
/// @return {Number} Percentage width
/// @throw if `$key` is not a valid grid width
/// @access public
@function govuk-grid-width($key) {
@if map-has-key($govuk-grid-widths, $key) {
@return map-get($govuk-grid-widths, $key);
}
@error "Unknown grid width `#{$key}`";
}
/// Generate grid column styles
///
/// Creates a grid column with standard gutter between the columns.
///
/// Grid widths are defined in the `$govuk-grid-widths` map.
///
/// By default the column width changes from 100% to specified width at the
/// 'tablet' breakpoint, but other breakpoints can be specified using the `$at`
/// parameter.
///
/// @param {String} $width [full] name of a grid width from $govuk-grid-widths
/// @param {String} $float [left] left | right
/// @param {String} $at [tablet] - mobile | tablet | desktop | any custom breakpoint
///
/// @example scss - Default
/// .govuk-grid-column-two-thirds {
/// @include govuk-grid-column(two-thirds)
/// }
///
/// @example scss - Customising the breakpoint where width percentage is applied
/// .govuk-grid-column-one-half-at-desktop {
/// @include govuk-grid-column(one-half, $at: desktop);
/// }
///
/// @example scss - Customising the float direction
/// .govuk-grid-column-one-half-right {
/// @include govuk-grid-column(two-thirds, $float: right);
///
/// @access public
@mixin govuk-grid-column($width: full, $float: left, $at: tablet) {
box-sizing: border-box;
@if $at != desktop {
width: 100%;
}
padding: 0 $govuk-gutter-half;
@include govuk-media-query($from: $at) {
width: govuk-grid-width($width);
float: $float;
}
}
Version data entries
143 entries across 143 versions & 3 rubygems