@use 'sass:math';
@use "sass:string";
@use "sass:map";
@import "../vars/grid";
.row{
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -.5);
margin-left: calc(var(--bs-gutter-x) * -.5);
&>*{
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
}
$__grid_containers:();
$__grid_containers:map.set($__grid_containers, "0", ".container");
@each $container-suffix, $container-default-size, $container-breakpoint, $container-size in $grid-containers{
$__grid_containers:map.set($__grid_containers, "#{$container-size}",".container#{$container-suffix}");
}
#{map-values($__grid_containers)}{
width:100%;
padding-right: #{$grid-gutter-width};
padding-left: #{$grid-gutter-width};
margin-right: auto;
margin-left: auto;
box-sizing: border-box;
}
@each $container-suffix, $container-default-size, $container-breakpoint, $container-size in $grid-containers{
@media (min-width: #{$container-breakpoint}){
.container#{$container-suffix}, .container{
width: #{$container-size};
}
}
}
@each $num_columns, $column_prefix, $column_min_width in $grid-columns{
@for $i from 1 through $num_columns{
$__grid__columns:map.set($__grid__columns, ".col#{$column_prefix}-#{$i}",".col#{$column_prefix}-#{$i}");
}
}
#{map-values($__grid__columns)}{
flex: 0 0 auto;
padding-left: #{$padding};
padding-right: #{$padding};
box-sizing: border-box;
}
@each $num_columns, $column_prefix, $column_min_width in $grid-columns{
@if($column_min_width == ""){
@for $i from 1 through $num_columns{
.col#{$column_prefix}-#{$i}{
width: #{math.div($i,$num_columns) * 100%};
}
}
}
@else{
@media (min-width:#{$column_min_width}) {
@for $i from 1 through $num_columns{
.col#{$column_prefix}-#{$i}{
width: #{math.div($i,$num_columns) * 100%};
}
}
}
}
}
@for $i from 1 through 24{
.grid-cols-#{$i}{
grid-template-columns:repeat(#{$i},minmax(0,#{$i}fr));
}
}
@each $dp in $general_display{
.#{$dp}-hover{
&:hover{
display: str-replace('display-', '',#{$dp});
}
}
}
@each $value in $flex-options{
.flex-#{$value}{
flex: #{$value};
}
}
@each $value in $flex-options{
.flex-#{$value}-hover{
&:hover{
flex: #{$value};
}
}
}
@each $value in $flex-grow-options{
@if $value == 1{
.flex-grow{
flex-grow: 1;
}
}
@else if $value == 0{
.flex-grow-none{
flex-grow: 0;
}
}
@else{
.flex-grow-#{$value}{
flex-grow: #{$value};
}
}
}
@each $value in $flex-grow-options{
@if $value == 1{
.flex-grow-hover{
&:hover{
flex-grow: 1;
}
}
}
@else if $value == 0{
.flex-grow-none-hover{
&:hover{
flex-grow: 0;
}
}
}
@else{
.flex-grow-#{$value}-hover{
&:hover{
flex-grow: #{$value};
}
}
}
}
.float-columns{
.row{
&::before,
&::after{
display: table;
content: " ";
clear:both;
width:100%;
}
width:100%;
&.expanded {
&{
max-width:none;
}
.row {
margin-right: auto;
margin-left: auto;
}
}
&:not(.expanded){
.row {
max-width: none;
}
}
.columns, .column, .small, .medium, .large, .xlarge, columns, column, col{
float: left;
clear: none;
}
}
@each $container-suffix, $container-default-size, $container-breakpoint, $container-size in $__float-containers{
@media (min-width: #{$container-breakpoint}){
.container{
width: #{$container-size};
}
}
}
@each $num_columns, $column_name, $column_min_width in $float__columns{
@if $column_min_width == "" {
@for $i from 1 through $num_columns{
.#{$column_name}{
width: #{math.div($i, $num_columns) *100%};
}
.#{$column_name}-offset-#{$i}{
margin-left: #{math.div($i, $num_columns) *100%};
}
}
}
@else{
@media (min-width:#{$column_min_width}){
@for $i from 1 through $num_columns{
.#{$column_name}{
width: #{math.div($i, $num_columns) *100%};
}
.#{$column_name}-offset-#{$i}{
margin-left: #{math.div($i, $num_columns) *100%};
}
}
}
}
}
}