ffoodd

Improved .sr-only

Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.

A Pen by ffoodd on CodePen.

License.

ffoodd

//----------------------------------*\
// TRIGONOMETRY FUNCTIONS
//----------------------------------*/

// # Trigonometry in CSS
// 
// - Through Taylor/Maclaurin polynomial representation: http://people.math.sc.edu/girardi/m142/handouts/10sTaylorPolySeries.pdf
// - Useful if you don't want to use JS.
// - With CSS Variables.
// - `calc()` can't do power (x ^ y) so I used multiplication instead.

ffoodd

(function($) {

  $.fn.fSelect = function(options) {

    if ('string' === typeof options) {
      var settings = options;
    }
    else {
      var settings = $.extend({
        placeholder: 'Select some options',

ffoodd

@function add($value1, $value2, $return-calc: true) {
  @if $value1 == null {
    @return $value2;
  }

  @if $value2 == null {
    @return $value1;
  }

  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {

ffoodd

@function add($value1, $value2, $return-calc: true) {
  @if $value1 == null {
    @return $value2;
  }

  @if $value2 == null {
    @return $value1;
  }

  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {

ffoodd

@function add($value1, $value2, $return-calc: true) {
  @if $value1 == null {
    @return $value2;
  }

  @if $value2 == null {
    @return $value1;
  }
    
  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {

ffoodd

@function add($value1, $value2, $return-calc: true) {
  @if $value1 == null {
    @return $value2;
  }

  @if $value2 == null {
    @return $value1;
  }
    
  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {

ffoodd

$theme-colors: (
  "primary": #0d6efd
);
$list-group-color: #911;


@each $state, $value in $theme-colors {
  $list-group-color: $value;

  .list-group-inside { color: $list-group-color; }

ffoodd

$theme-colors: (
  "primary": #0d6efd
);
$list-group-color: #911;


@each $state, $value in $theme-colors {
  $list-group-color: $value;

  .list-group-inside { color: $list-group-color; }

ffoodd

$primary: #0d6efd;

@function shade-color($color, $weight) {
  @return mix(black, $color, $weight);
}

a {
    color: darken($primary, 20%);
}