
Add a bootstrap css based theme to groups portal, and match the design elements and layout of new openstack.org site. This patch will not enable the theme by default, just add the bootstrap module and the openstack subtheme. The subtheme is based on the sass version of bootstrap with a bundle compass support. Change-Id: Iae976151e87d4d2edd6e913a5aea16d9c13dc051
82 lines
2.3 KiB
SCSS
82 lines
2.3 KiB
SCSS
// Framework grid generation
|
|
//
|
|
// Used only by Bootstrap to generate the correct number of grid classes given
|
|
// any value of `$grid-columns`.
|
|
|
|
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
|
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
|
|
@for $i from (1 + 1) through $grid-columns {
|
|
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
|
|
}
|
|
#{$list} {
|
|
position: relative;
|
|
// Prevent columns from collapsing when empty
|
|
min-height: 1px;
|
|
// Inner gutter via padding
|
|
padding-left: ($grid-gutter-width / 2);
|
|
padding-right: ($grid-gutter-width / 2);
|
|
}
|
|
}
|
|
|
|
|
|
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
|
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
|
|
@for $i from (1 + 1) through $grid-columns {
|
|
$list: "#{$list}, .col-#{$class}-#{$i}";
|
|
}
|
|
#{$list} {
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
|
|
@mixin calc-grid-column($index, $class, $type) {
|
|
@if ($type == width) and ($index > 0) {
|
|
.col-#{$class}-#{$index} {
|
|
width: percentage(($index / $grid-columns));
|
|
}
|
|
}
|
|
@if ($type == push) and ($index > 0) {
|
|
.col-#{$class}-push-#{$index} {
|
|
left: percentage(($index / $grid-columns));
|
|
}
|
|
}
|
|
@if ($type == push) and ($index == 0) {
|
|
.col-#{$class}-push-0 {
|
|
left: auto;
|
|
}
|
|
}
|
|
@if ($type == pull) and ($index > 0) {
|
|
.col-#{$class}-pull-#{$index} {
|
|
right: percentage(($index / $grid-columns));
|
|
}
|
|
}
|
|
@if ($type == pull) and ($index == 0) {
|
|
.col-#{$class}-pull-0 {
|
|
right: auto;
|
|
}
|
|
}
|
|
@if ($type == offset) {
|
|
.col-#{$class}-offset-#{$index} {
|
|
margin-left: percentage(($index / $grid-columns));
|
|
}
|
|
}
|
|
}
|
|
|
|
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
|
@mixin loop-grid-columns($columns, $class, $type) {
|
|
@for $i from 0 through $columns {
|
|
@include calc-grid-column($i, $class, $type);
|
|
}
|
|
}
|
|
|
|
|
|
// Create grid for specific class
|
|
@mixin make-grid($class) {
|
|
@include float-grid-columns($class);
|
|
@include loop-grid-columns($grid-columns, $class, width);
|
|
@include loop-grid-columns($grid-columns, $class, pull);
|
|
@include loop-grid-columns($grid-columns, $class, push);
|
|
@include loop-grid-columns($grid-columns, $class, offset);
|
|
}
|