git.roojs.org Git - bootswatch/blob - material-kit/sass/material-kit/_pagination.scss

   1 .pagination{
   2     > li > a,
   3     > li > span{
   4         border: 0;
   5         border-radius: 30px !important;
   6         transition: all .3s;
   7         padding: 0px 11px;
   8         margin: 0 3px;
   9         min-width: 30px;
  10         height: 30px;
  11         line-height: 30px;
  12         color: $gray-color;
  13         font-weight: $font-weight-default;
  14         font-size: $mdb-btn-font-size-base;
  15         text-transform: uppercase;
  16         background: transparent;
  17
  18         &:hover,
  19         &:focus{
  20             color: $gray-color;
  21         }
  22     }
  23
  24     > .active > a,
  25     > .active > span{
  26         color: $gray-color;
  27
  28         &,
  29         &:focus,
  30         &:hover{
  31             background-color: $brand-primary;
  32             border-color: $brand-primary;
  33             color: $white-color;
  34             @include shadow-4dp-color($brand-primary);
  35         }
  36
  37     }
  38
  39     // Colors
  40     &.pagination-info{
  41         > .active > a,
  42         > .active > span{
  43             &,
  44             &:focus,
  45             &:hover{
  46                 background-color: $brand-info;
  47                 border-color: $brand-info;
  48                 @include shadow-4dp-color($brand-info);
  49             }
  50         }
  51     }
  52
  53     &.pagination-success{
  54         > .active > a,
  55         > .active > span{
  56             &,
  57             &:focus,
  58             &:hover{
  59                 background-color: $brand-success;
  60                 border-color: $brand-success;
  61                 @include shadow-4dp-color($brand-success);
  62             }
  63         }
  64     }
  65
  66     &.pagination-warning{
  67         > .active > a,
  68         > .active > span{
  69             &,
  70             &:focus,
  71             &:hover{
  72                 background-color: $brand-warning;
  73                 border-color: $brand-warning;
  74                 @include shadow-4dp-color($brand-warning);
  75             }
  76         }
  77     }
  78
  79     &.pagination-danger{
  80         > .active > a,
  81         > .active > span{
  82             &,
  83             &:focus,
  84             &:hover{
  85                 background-color: $brand-danger;
  86                 border-color: $brand-danger;
  87                 @include shadow-4dp-color($brand-danger);
  88             }
  89         }
  90     }
  91 }