github.com/mattyr/nomad@v0.3.3-0.20160919021406-3485a065154a/website/source/assets/stylesheets/_utilities.scss (about)

     1  //
     2  // Utility classes
     3  // --------------------------------------------------
     4  
     5  
     6  //
     7  // -------------------------
     8  @mixin anti-alias() {
     9    text-rendering: optimizeLegibility;
    10    -webkit-font-smoothing: antialiased;
    11  }
    12  
    13  @mixin open-light() {
    14    font-family: $font-family-open-sans;
    15    font-weight: 300;
    16  }
    17  
    18  @mixin open() {
    19    font-family: $font-family-open-sans;
    20    font-weight: 400;
    21  }
    22  
    23  @mixin open-sb() {
    24    font-family: $font-family-open-sans;
    25    font-weight: 600;
    26  }
    27  
    28  @mixin open-bold() {
    29    font-family: $font-family-open-sans;
    30    font-weight: 700;
    31  }
    32  
    33  @mixin skewY($skew) {
    34    -webkit-transform: skewY($skew);
    35    -moz-transform: skewY($skew);
    36    -ms-transform: skewY($skew);
    37    -o-transform: skewY($skew);
    38    transform: skewY($skew);
    39  }
    40  
    41  @mixin v-nav-style-core{
    42    color: $gray-darker;
    43    font-family: $font-family-blanc-reg;
    44    font-size: 13px;
    45    text-transform: uppercase;
    46    letter-spacing: 0.0625em;
    47  }
    48  
    49  @mixin v-nav-style{
    50    margin: 0 15px;
    51    padding: 0;
    52    line-height: 22px;
    53    @include v-nav-style-core();
    54    @include transition( color 0.3s ease );
    55  
    56    &:hover{
    57      color: $green-dark;
    58      @include transition( color 0.3s ease );
    59      background-color: transparent;
    60    }
    61  }
    62  
    63  @mixin bez-1-transition{
    64    @include transition( all 300ms ease-in-out );
    65  }
    66  
    67  
    68  @keyframes press {
    69    0% {
    70      opacity: 1;
    71    }
    72    50% {
    73      opacity: .55
    74    }
    75    100% {
    76      opacity: 1;
    77    }
    78  }
    79  
    80  @-webkit-keyframes press {
    81    0% {
    82      opacity: 1;
    83    }
    84    50% {
    85      opacity: .55
    86    }
    87    100% {
    88      opacity: 1;
    89    }
    90  }
    91  
    92  #demo-app .loading-bar{
    93    display: block;
    94    -webkit-animation: shift-rightwards 2s ease-in-out infinite;
    95    -moz-animation: shift-rightwards 2s ease-in-out infinite;
    96    -ms-animation: shift-rightwards 2s ease-in-out infinite;
    97    -o-animation: shift-rightwards 2s ease-in-out infinite;
    98    animation: shift-rightwards 2s ease-in-out infinite;
    99    -webkit-animation-delay: .4s;
   100    -moz-animation-delay: .4s;
   101    -o-animation-delay: .4s;
   102    animation-delay: .4s;
   103  }
   104  
   105  .loading-bar{
   106    position: fixed;
   107    display: none;
   108    bottom: 0;
   109    left: 0;
   110    right: 0;
   111    height: 2px;
   112    z-index: 800;
   113    background: $blue;
   114    -webkit-transform: translateX(100%);
   115    -moz-transform: translateX(100%);
   116    -o-transform: translateX(100%);
   117    transform: translateX(100%);
   118  }
   119  
   120  @-webkit-keyframes shift-rightwards
   121  {
   122    0%
   123    {
   124      @include translate(-100%, 0);
   125    }
   126  
   127    40%
   128    {
   129      @include translate(0%, 0);
   130    }
   131  
   132    60%
   133    {
   134      @include translate(0%, 0);
   135    }
   136  
   137    100%
   138    {
   139      @include translate(100%, 0);
   140    }
   141  
   142  }
   143  @-moz-keyframes shift-rightwards
   144  {
   145    0%
   146    {
   147      @include translate(-100%, 0);
   148    }
   149  
   150    40%
   151    {
   152      @include translate(0%, 0);
   153    }
   154  
   155    60%
   156    {
   157      @include translate(0%, 0);
   158    }
   159  
   160    100%
   161    {
   162      @include translate(100%, 0);
   163    }
   164  
   165  }
   166  @-o-keyframes shift-rightwards
   167  {
   168    0%
   169    {
   170      @include translate(-100%, 0);
   171    }
   172  
   173    40%
   174    {
   175      @include translate(0%, 0);
   176    }
   177  
   178    60%
   179    {
   180      @include translate(0%, 0);
   181    }
   182  
   183    100%
   184    {
   185      @include translate(100%, 0);
   186    }
   187  
   188  }
   189  @keyframes shift-rightwards
   190  {
   191    0%
   192    {
   193      @include translate(-100%, 0);
   194    }
   195  
   196    40%
   197    {
   198      @include translate(0%, 0);
   199    }
   200  
   201    60%
   202    {
   203      @include translate(0%, 0);
   204    }
   205  
   206    100%
   207    {
   208      @include translate(100%, 0);
   209    }
   210  }