github.com/bosssauce/ponzu@v0.11.1-0.20200102001432-9bc41b703131/system/admin/static/editor/sass/components/_buttons.scss (about)

     1  // shared styles
     2  .btn, .btn-flat {
     3    border: none;
     4    border-radius: 2px;
     5    display: inline-block;
     6    height: $button-height;
     7    line-height: $button-line-height;
     8    // margin-bottom: 15px;
     9    outline: 0;
    10    padding: 0 2rem;
    11    text-transform: uppercase;
    12    vertical-align: middle;
    13    // Gets rid of tap active state
    14    -webkit-tap-highlight-color: transparent;
    15  }
    16  // Disabled shared style
    17  .btn.disabled, .btn-floating.disabled, .btn-large.disabled, .btn:disabled, .btn-large:disabled, .btn-floating:disabled {
    18    background-color: $button-bg-color-disabled !important;
    19    box-shadow: none;
    20    color: $button-color-disabled !important;
    21    cursor: default;
    22    * {
    23      pointer-events: none;
    24    }
    25  
    26    &:hover {
    27      background-color: $button-bg-color-disabled;
    28      color: $button-color-disabled;
    29    }
    30  }
    31  // Shared icon styles
    32  .btn, .btn-floating, .btn-large, .btn-flat {
    33    i {
    34      font-size: $button-font-size-shared;
    35      line-height: inherit;
    36    }
    37  }
    38  
    39  // Raised Button
    40  .btn {
    41    text-decoration:none;
    42    color: $button-color-raised;
    43    background-color: $button-color;
    44    text-align: center;
    45    letter-spacing: .5px;
    46    @extend .z-depth-1;
    47    @include transition(.2s ease-out);
    48    cursor: pointer;
    49  
    50    &:hover {
    51      background-color: lighten($button-color, 5%);
    52      @extend .z-depth-1-half;
    53    }
    54  }
    55  
    56  // Floating button
    57  .btn-floating {
    58    display: inline-block;
    59    color: $button-color-raised;
    60    position: relative;
    61    overflow: hidden;
    62    z-index: 1;
    63    width: $button-floating-size;
    64    height: $button-floating-size;
    65    line-height: $button-floating-size;
    66    padding: 0;
    67    background-color: $button-color;
    68    border-radius: 50%;
    69    @extend .z-depth-1;
    70    transition: .3s;
    71    cursor: pointer;
    72    vertical-align: middle;
    73  
    74    i {
    75      width: inherit;
    76      display: inline-block;
    77      text-align: center;
    78      color: $button-color-raised;
    79      font-size: $button-large-icon-font-size;
    80      line-height: $button-floating-size;
    81    }
    82  
    83    &:hover {
    84      @extend .z-depth-1-half;
    85    }
    86    &:before {
    87      border-radius: 0;
    88    }
    89    &.btn-large {
    90      width: $button-floating-size * 1.5;
    91      height: $button-floating-size * 1.5;
    92      i{
    93        line-height: $button-floating-size * 1.5;
    94      }
    95    }
    96  
    97  }
    98  // button fix
    99  button.btn-floating {
   100    border: none;
   101  }
   102  
   103  // Fixed Action Button
   104  .fixed-action-btn {
   105    position: fixed;
   106    right: 23px;
   107    bottom: 23px;
   108    padding-top: 15px;
   109    margin-bottom: 0;
   110    z-index: 998;
   111  
   112    ul {
   113      left: 0;
   114      right: 0;
   115      text-align: center;
   116      position: absolute;
   117      bottom: 64px;
   118      margin: 0;
   119  
   120      li {
   121        margin-bottom: 15px;
   122      }
   123  
   124      a.btn-floating {
   125        opacity: 0;
   126      }
   127    }
   128  }
   129  
   130  // Flat button
   131  .btn-flat {
   132    box-shadow: none;
   133    background-color: transparent;
   134    color: $button-color-flat;
   135    cursor: pointer;
   136  
   137    &.disabled {
   138      color: lighten(#999, 10%);
   139      cursor: default;
   140    }
   141  }
   142  
   143  // Large button
   144  .btn-large {
   145    @extend .btn;
   146    height: $button-height * 1.5;
   147    line-height: 56px;
   148  
   149    i {
   150      font-size: $button-large-icon-font-size;
   151    }
   152  }
   153  
   154  // Block button
   155  .btn-block {
   156    display: block;
   157  }