Skip to content

Instantly share code, notes, and snippets.

@borm

borm/_bootstrap-em.scss

Forked from neil-h/_bootstrap-em.scss
Created July 4, 2016 18:01
Show Gist options
  • Save borm/f0b75fc4ad92d71b3af4c4bfe7429944 to your computer and use it in GitHub Desktop.
Save borm/f0b75fc4ad92d71b3af4c4bfe7429944 to your computer and use it in GitHub Desktop.
Download ZIP
A Sass port of jasny/bootstrap-em.less
Raw
_bootstrap-em.scss
@function strip-units($number) {// From : http://stackoverflow.com/a/12335841/1339426
@return $number / ($number * 0 + 1);
}
/**
* Use em or rem font-size in Bootstrap 3
* Ported from Less version here: https://gist.github.com/jasny/9731895
*/
$font-size-root: 18px;
$font-unit: 1rem; // Pick em or rem here
// Convert all variables to em
$font-size-base: 1 * $font-unit;
$font-size-large: 1.25 * $font-unit;
$font-size-small: 0.85 * $font-unit;
$font-size-h1: 2.6 * $font-unit;
$font-size-h2: 2.15 * $font-unit;
$font-size-h3: 1.7 * $font-unit;
$font-size-h4: 1.25 * $font-unit;
$font-size-h5: $font-size-base;
$font-size-h6: 0.85 * $font-unit;
$line-height-computed: ($font-size-base * $line-height-base);
$padding-base-vertical: ((6px / $font-size-root) * $font-unit);
$padding-base-horizontal: ((12px / $font-size-root) * $font-unit);
$padding-large-vertical: ((10px / $font-size-root) * $font-unit);
$padding-large-horizontal: ((16px / $font-size-root) * $font-unit);
$padding-small-vertical: ((5px / $font-size-root) * $font-unit);
$padding-small-horizontal: ((10px / $font-size-root) * $font-unit);
$padding-xs-vertical: ((1px / $font-size-root) * $font-unit);
$padding-xs-horizontal: ((5px / $font-size-root) * $font-unit);
$border-radius-base: ((4px / $font-size-root) * $font-unit);
$border-radius-large: ((6px / $font-size-root) * $font-unit);
$border-radius-small: ((3px / $font-size-root) * $font-unit);
$caret-width-base: ((4px / $font-size-root) * $font-unit);
$caret-width-large: ((5px / $font-size-root) * $font-unit);
$table-cell-padding: ((8px / $font-size-root) * $font-unit);
$table-condensed-cell-padding: ((5px / $font-size-root) * $font-unit);
//** Default `.form-control` height
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2));
//** Large `.form-control` height
$input-height-large: (($font-size-large * $line-height-large) + ($padding-large-vertical * 2));
//** Small `.form-control` height
$input-height-small: (($font-size-small * $line-height-small) + ($padding-small-vertical * 2));
// Set root font size
html {
font-size: $font-size-root;
}
// Change styling for elements that mix pixels and ems
pre {
font-size: ( $font-size-base - ($font-unit / strip-units($font-size-root)));
}
.form-control-feedback {
width: calc($input-height-base + 2px);
height: calc($input-height-base + 2px);
}
.input-lg + .form-control-feedback {
width: calc($input-height-large + 2px);
height: calc($input-height-large + 2px);
}
.input-sm + .form-control-feedback {
width: calc($input-height-small + 2px);
height: calc($input-height-small + 2px);
}
.form-control {
height: calc($input-height-base + 2px);
}
.form-horizontal {
.radio, .checkbox, .radio-inline, .checkbox-inline {
padding: $padding-base-vertical;
border: 1px solid transparent;
}
.radio, .checkbox {
min-height: calc(($line-height-computed + $padding-base-vertical) + 1px);
}
.form-control-static {
padding-top: $padding-base-vertical;
border-top: 1px solid transparent;
padding-bottom: $padding-base-vertical;
border-bottom: 1px solid transparent;
}
@media (min-width: #{$screen-sm-min}) {
.control-label {
padding-top: $padding-base-vertical;
border-top: 1px solid transparent;
}
}
}
Raw
_nav-vertical-align.scss
// Navbar vertical align
//
// Vertically center elements in the navbar.
// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
//Modified to work with _bootstrap-em.scss
@mixin navbar-vertical-align($element-height) {
@if (unit($element-height) == unit($font-unit)) {
margin-top: (($navbar-height - (($element-height / $font-unit) * $font-size-root)) / 2);
margin-bottom: (($navbar-height - (($element-height / $font-unit) * $font-size-root)) / 2);
} @else {
margin-top: (($navbar-height - $element-height) / 2);
margin-bottom: (($navbar-height - $element-height) / 2);
}
}
Raw
_v2_bootstrap-em.scss
@function strip-units($number) {// From : http://stackoverflow.com/a/12335841/1339426
@return $number / ($number * 0 + 1);
}
/**
* Use em or rem font-size in Bootstrap 3
* Based on Less version here: https://gist.github.com/jasny/9731895
* Values pulled from _variables.scss
*/
$font-size-root: $font-size-base;
$font-unit: 1rem; // Pick em or rem here
// Convert all variables to em
$font-size-base: 1 * $font-unit;
$font-size-large: ($font-size-large / $font-size-root) * $font-unit;
$font-size-small: ($font-size-small / $font-size-root) * $font-unit;
$font-size-h1: ($font-size-h1 / $font-size-root) * $font-unit;
$font-size-h2: ($font-size-h2 / $font-size-root) * $font-unit;
$font-size-h3: ($font-size-h3 / $font-size-root) * $font-unit;
$font-size-h4: ($font-size-h4 / $font-size-root) * $font-unit;
$font-size-h5: ($font-size-h5 / $font-size-root) * $font-unit;
$font-size-h6: ($font-size-h6 / $font-size-root) * $font-unit;
$line-height-computed: ($font-size-base * $line-height-base);
$padding-base-vertical: (($padding-base-vertical / $font-size-root) * $font-unit);
$padding-base-horizontal: (($padding-base-horizontal / $font-size-root) * $font-unit);
$padding-large-vertical: (($padding-large-vertical / $font-size-root) * $font-unit);
$padding-large-horizontal: (($padding-large-horizontal / $font-size-root) * $font-unit);
$padding-small-vertical: (($padding-small-vertical/ $font-size-root) * $font-unit);
$padding-small-horizontal: (($padding-small-horizontal / $font-size-root) * $font-unit);
$padding-xs-vertical: (($padding-xs-vertical / $font-size-root) * $font-unit);
$padding-xs-horizontal: (($padding-xs-horizontal / $font-size-root) * $font-unit);
$border-radius-base: (($border-radius-base / $font-size-root) * $font-unit);
$border-radius-large: (($border-radius-large / $font-size-root) * $font-unit);
$border-radius-small: (($border-radius-small / $font-size-root) * $font-unit);
$caret-width-base: (($caret-width-base / $font-size-root) * $font-unit);
$caret-width-large: (($caret-width-large / $font-size-root) * $font-unit);
$table-cell-padding: (($table-cell-padding / $font-size-root) * $font-unit);
$table-condensed-cell-padding: (($table-condensed-cell-padding / $font-size-root) * $font-unit);
//** Default `.form-control` height
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2));
//** Large `.form-control` height
$input-height-large: (($font-size-large * $line-height-large) + ($padding-large-vertical * 2));
//** Small `.form-control` height
$input-height-small: (($font-size-small * $line-height-small) + ($padding-small-vertical * 2));
// Set root font size
html {
font-size: $font-size-root;
}
// Change styling for elements that mix pixels and ems
pre {
font-size: ( $font-size-base - ($font-unit / strip-units($font-size-root)));
}
.form-control-feedback {
width: calc($input-height-base + 2px);
height: calc($input-height-base + 2px);
}
.input-lg + .form-control-feedback {
width: calc($input-height-large + 2px);
height: calc($input-height-large + 2px);
}
.input-sm + .form-control-feedback {
width: calc($input-height-small + 2px);
height: calc($input-height-small + 2px);
}
.form-control {
height: calc($input-height-base + 2px);
}
.form-horizontal {
.radio, .checkbox, .radio-inline, .checkbox-inline {
padding: $padding-base-vertical;
border: 1px solid transparent;
}
.radio, .checkbox {
min-height: calc(($line-height-computed + $padding-base-vertical) + 1px);
}
.form-control-static {
padding-top: $padding-base-vertical;
border-top: 1px solid transparent;
padding-bottom: $padding-base-vertical;
border-bottom: 1px solid transparent;
}
@media (min-width: #{$screen-sm-min}) {
.control-label {
padding-top: $padding-base-vertical;
border-top: 1px solid transparent;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment