##### SASS

settings Settings arrow_drop_down

- Access1
- Profile2
- Notifications

Media can be styled in different ways using Materialize.

#### Variables

When using Sass, you can change the color scheme of your site extremely quickly. Below is a very small sample of what you can change through sass in `_variables.scss`.

      $primary-color: color("materialize-red", "lighten-2") !default;
      $primary-color-light: false !default;
      $primary-color-dark: false !default;
      @if not $primary-color-light {
        $primary-color-light: lighten($primary-color, 15%);
      }
      @if not $primary-color-dark {
        $primary-color-dark: darken($primary-color, 15%);
      }
      $secondary-color: color("teal", "lighten-1") !default;
      $success-color: color("green", "base") !default;
      $error-color: color("red", "base") !default;
      $link-color: color("light-blue", "darken-1") !default;
      /*** More variables not shown here.. ***/

#### Media Queries

We have 3 media queries for the 3 standard screen sizes you can use in your custom Sass files. This also includes media query variables that will define the range.

#### CSS

Small screens are defined as having a max-width of 600px
Medium screens are defined as having a max-width of 992px
Large screen are defined as having a min-width of 992px

    /* These classes can be added to HTML Elements
     * to affect visibility on certain displays.
     */
    .hide-on-small-only
    .hide-on-small-and-down
    .hide-on-med-and-down
    .hide-on-med-and-up
    .hide-on-med-only
    .hide-on-large-only
    .show-on-large
    .show-on-medium
    .show-on-small
    .show-on-medium-and-up
    .show-on-medium-and-down

#### Sass

    @media #{$small-and-down} {
      // styles for small screens and down
    }
    @media #{$medium-and-up} {
      // styles for medium screens and larger
    }
    @media #{$medium-and-down} {
      // styles for medium screens and down
    }
    @media #{$large-and-up} {
      // styles for large screens and up
    }

#### Prefixer

One major goal of this framework is to be as adaptable as possible which includes cross browser compatibility. We have adapted a prefixer script to Sass which will automatically add all browser prefixes for certain CSS properties.

For Example: Using this Sass mixin

      @include transition(.3s);

Will Output This

    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;

Here is the full list of mixins

    animation($args)
    animation-delay($delay)
    animation-direction($direction)
    animation-duration($duration)
    animation-fill-mode($mode)
    animation-iteration-count($count)
    animation-name($name)
    animation-play-state($state)
    animation-timing-function($function)
    background-size($args)
    border-radius($args)
    box-shadow($args)
      inner-shadow($args)
    box-sizing($args)
      border-box()
      content-box()
    columns($args)
      column-count($count)
      column-gap($gap)
      column-rule($args)
      column-width($width)
    gradient($default,$start,$stop)
      linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])
      linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])
    opacity($factor)
    transform($args)
      transform-origin($args)
      transform-style($style)
      rotate($deg)
      scale($factor)
      translate($x,$y)
      translate3d($x,$y,$z)
      translateHardware($x,$y)
    text-shadow($args)
    transition($args)
      transition-delay($delay)
      transition-duration($duration)
      transition-property($property)
      transition-timing-function($function)

add

- help_outline
- widgets
- today
- mail_outline