Skip to content

Instantly share code, notes, and snippets.

@neil-h

neil-h/_bootstrap-em.scss

Forked from jasny/bootstrap-em.less
Last active November 17, 2017 16:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save neil-h/631c5e848ba1f2ae92d1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save neil-h/631c5e848ba1f2ae92d1 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;
}
}
}
@marksyzm
Copy link

marksyzm commented Aug 21, 2015

Great work - I do get $line-height-base missing as well as $line-height-large when I try and @import this before bootstrap-sass. I think this is perhaps because you've written it with the assumption that these variables are declared, but the current way with bootstrap-sass is to make use of their !default override behaviour. You'll notice in _variables.scss they use those:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss
You can override these values by @importing the gist you've written before @importing bootstrap-sass.

Sadly this does mean that your classes you've written then have to go after the inclusion of bootstrap-sass. This should all then allow the user to just drop in a line like this

@import "variables";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "bootstrappost";

But sadly... there are still issues with calculations. Worth looking into, though!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment