quarante-douze-static/scss/_definitions.scss

/*
 *  1 - Definitions
 *  
 *  This part of the (s)css contain every definitions, mixins,
 *  and differents unilities that can be used everywhere in the code.
 *
*/


$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0);
$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);

$border-radius: 0px;
$border-size: 1px;

$color-primary: $color-red;
$color-secondary: $color-dark;
$color-link: $color-blue;
$color-selection: $color-blue;
$color-mark: $color-yellow;

$color-category: $color-blue;
$color-tag: $color-grey;

$color-font: #444;

@mixin borders() {
  border: $border-size solid rgba(0, 0, 0, 0.3)
}

@mixin border-radius() {
  border-radius: $border-radius $border-radius $border-radius $border-radius;
}

@mixin li-no-margin() {
  li {
    margin: 0;
  }
}

/* 1.1 - Utils */

.no-pills {
	list-style:none;
}

.align {
  &-center, &center {text-align: center;}
  &-left, &left {text-align: left;}
  &-right, &right {text-align: right;}
}

/* 1.2 - Background colors */

@mixin background-color($background-color, $text-color) {
  background-color: $background-color!important;
  color: $text-color;
}

.bg {
  &-blue { @include background-color($color-blue, #FFF); }
  &-violet { @include background-color($color-violet, #FFF); }
  &-purple { @include background-color($color-purple, #FFF); }
  &-red { @include background-color($color-red, #FFF); }
  &-orange { @include background-color($color-orange, #FFF); }
  &-green { @include background-color($color-green, #FFF); }
  &-skyblue { @include background-color($color-skyblue, #FFF); }
  &-dark { @include background-color($color-dark, #FFF); }
  &-light { @include background-color($color-light, #111); }
  &-turquoise { @include background-color($color-turquoise, #FFF); }
  &-yellow { @include background-color($color-yellow, #FFF); }
  &-brown { @include background-color($color-brown, #FFF); }
  &-grey { @include background-color($color-grey, #FFF); }  
  
  &-primary { @include background-color($color-primary, #FFF); }
  &-secondary { @include background-color($color-secondary, #FFF); }
  &-warning { @include background-color($color-warning, #FFF); }
  &-danger { @include background-color($color-danger, #FFF); }
  &-info { @include background-color($color-info, #FFF); }
  &-success { @include background-color($color-success, #FFF); }
}

/* 1.3 - Screen Reader */

@media screen {
  .screen-reader-text {
    display: none;
  }
}

/* 2. Forms elements */

select {
  @include borders();
  @include border-radius();
  
  display: block;
  width: 100%;
  height: calc(2.25rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5em;
  color: $color-font;
  background-color: #fff;
  background-clip: padding-box;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  margin-top: 0.75rem;
}

.input-group {
  border-color: $color-dark;
  &-prepend {
    background-color: $color-grey;
    @include borders();
    @include border-radius();
  }
  
  &-text {
    background-color: transparent;
    color: #FFF;
    border: none;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
  }
  
  .form-control {
    @include borders();
    @include border-radius();
    
    box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.1);
    &:focus {
      box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 2px lighten($color-primary, 20%) ;
    }
  }
}