Skip to content

Instantly share code, notes, and snippets.

@niquepa
Forked from alalfakawma/helper.scss
Created March 10, 2020 19:17
Show Gist options
  • Save niquepa/3ea2341e51885beaed55bb8884e94e8b to your computer and use it in GitHub Desktop.
Save niquepa/3ea2341e51885beaed55bb8884e94e8b to your computer and use it in GitHub Desktop.
Bulma SCSS Table column width helper
/*
Author: Aseem Lalfakawma <alalfakawma.github.io>
This SCSS mixin will allow sizing of table columns in Bulma CSS Framework.
The Bulma framework does not support this yet, this small code snippet fixes this.
USAGE:
* Should be applied on TH element, it controls all the columns under it *
The class should be "is-#",
is-1 will give the first widthamount, is-2 will give the second.
Eg. The code below shows the widthAmounts as (1, 2.5, 3, 4 , 5, 6, 7)
When typing <th class="is-2">, the width will be 2.5em, as the second value in widthAmounts array is 2.5
*/
$widthAmounts: (1, 2.5, 3, 4 , 5, 6, 7); // Just add the numbers here, you can use points too.
$widthUnit: "em"; // Add the unit here (rem|em|px|%)
@each $width in $widthAmounts {
$i: index($widthAmounts, $width);
.table thead th.is-#{$i} {
width: #{$width}#{$widthUnit} !important;
}
}
/*
Variation
*/
$widthValues: (
'half': 50,
'full': 100,
'one-third': 33,
'two-thirds': 66,
'one-quarter': 25,
'three-quarters': 75,
'one-fifth': 20,
'two-fifths': 40,
'three-fifths': 60,
'four-fifths': 80,
'1': 8.33333,
'2': 16.66666,
'3': 24.99999,
); // Just add the numbers here, you can use points too.
$widthUnit: "%"; // Add the unit here (rem|em|px|%)
@each $name, $value in $widthValues {
.table thead th.is-#{$name} {
width: #{$value}#{$widthUnit} !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment