[Summary view] [Print] [Text view]

   1  // Quick Icons
   2  
   3  .quick-icons {
   4    background-color: $white;
   5  
   6    .nav {
   7      display: grid;
   8      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
   9      grid-gap: 1rem;
  10    }
  11  
  12    a {
  13      text-decoration: none;
  14    }
  15  
  16    ul {
  17      padding: 0;
  18    }
  19  
  20    .quickicon {
  21      --text-color: hsl(var(--hue), 30%, 40%);
  22      --bg-color: hsl(var(--hue), 60%, 97%);
  23      --icon-color: hsl(var(--hue), 30%, 40%);
  24      --bg-color-hvr: var(--template-bg-dark);
  25  
  26      display: flex;
  27      flex-grow: 1;
  28  
  29      a {
  30        display: flex;
  31        flex-direction: column;
  32        flex-grow: 1;
  33        justify-content: flex-end;
  34        padding: 0 1rem;
  35        color: var(--text-color);
  36        background-color: var(--bg-color);
  37        transition: all .25s ease;
  38  
  39        .quickicon-icon {
  40          margin-top: .5rem;
  41          margin-inline-start: .2rem;
  42  
  43          > * {
  44            font-size: $quickicon-icon-size;
  45            color: var(--icon-color);
  46          }
  47        }
  48  
  49        .quickicon-name {
  50          padding: .125rem 0 .6rem;
  51          font-size: $display2-size;
  52          font-weight: bold;
  53        }
  54  
  55        .quickicon-amount {
  56          padding: .25rem .5rem;
  57          font-weight: $bold-weight;
  58          line-height: 1rem;
  59          background: hsl(var(--hue),50%,93%);
  60          border-radius: $border-radius;
  61          transition: all .25s ease;
  62          margin-inline-start: .5rem;
  63        }
  64  
  65        .j-links-link {
  66          display: block;
  67          padding: 0 .2rem;
  68          line-height: 1.1;
  69        }
  70  
  71        &:hover,
  72        &:focus,
  73        &:active {
  74          color: $white;
  75          text-decoration: none;
  76          background: var(--bg-color-hvr);
  77  
  78          .quickicon-amount {
  79            background: var(--icon-color);
  80          }
  81        }
  82  
  83        &.warning,
  84        &.danger {
  85          --text-color: var(--danger);
  86          --bg-color: #f4f0f0;
  87          --icon-color: #ce8484;
  88          --bg-color-hvr: var(--danger);
  89        }
  90  
  91        &.success {
  92          --text-color: var(--success);
  93          --bg-color: #f3f9f3;
  94          --icon-color: #55a258;
  95          --bg-color-hvr: var(--success);
  96        }
  97      }
  98    }
  99  
 100    .quickicon-info {
 101      display: flex;
 102      align-items: flex-end;
 103    }
 104  
 105    .quickicon-linkadd {
 106      width: 2.5rem;
 107      font-size: 1.2rem;
 108      background: hsl(var(--hue),50%,93%);
 109      transition: all .25s ease;
 110  
 111      a {
 112        align-items: flex-end;
 113        justify-content: center;
 114        width: 100%;
 115  
 116        > * {
 117          margin-bottom: 10px;
 118          color: hsl(var(--hue), 30%, 40%);
 119        }
 120  
 121        &:hover,
 122        &:focus,
 123        &:active {
 124          background: var(--template-bg-dark);
 125  
 126          * {
 127            color: $white;
 128          }
 129        }
 130      }
 131    }
 132  
 133    .quickicon-single,
 134    .quickicon-group {
 135      display: flex;
 136      min-height: 6rem;
 137      overflow: hidden;
 138      border: 1px solid hsl(var(--hue),50%,93%);
 139      border-radius: 4px;
 140    }
 141  }
 142  
 143  #content .menu-quicktask {
 144    position: absolute;
 145    inset-inline-end: 1.25rem;
 146  }