[Summary view] [Print] [Text view]

   1  // com_cpanel
   2  
   3  .cpanel-add-module-icon,
   4  .com-cpanel {
   5    &-help,
   6    &-system {
   7  
   8      .list-group-item {
   9        padding: 0;
  10  
  11        a {
  12          display: block;
  13          padding: $list-group-item-padding-y $list-group-item-padding-x;
  14        }
  15      }
  16    }
  17  
  18    &-help {
  19  
  20      &__header {
  21        color: var(--template-special-color);
  22      }
  23  
  24      a {
  25        color: var(--template-link-color);
  26      }
  27  
  28      h2 {
  29        font-size: $h4-font-size;
  30      }
  31  
  32    }
  33  
  34    &-system {
  35      column-count: 4;
  36  
  37      &__category {
  38        margin-bottom: 1.5em;
  39        page-break-inside: avoid;
  40        break-inside: avoid;
  41      }
  42  
  43      &__header {
  44        color: var(--template-special-color);
  45  
  46        span {
  47          margin-right: 5px;
  48        }
  49      }
  50  
  51      a {
  52        color: var(--template-link-color);
  53      }
  54  
  55      h2 {
  56        font-size: $h4-font-size;
  57      }
  58  
  59  
  60      @include media-breakpoint-down(lg) {
  61        column-count: 2;
  62      }
  63  
  64      @include media-breakpoint-down(md) {
  65        column-count: 1;
  66      }
  67    }
  68  }
  69  
  70  .com_cpanel {
  71  
  72    .content {
  73      margin-top: 2rem;
  74    }
  75  
  76    .card {
  77      p:last-child {
  78        margin-bottom: 0;
  79      }
  80  
  81      .list-group,
  82      .table {
  83        padding: 0;
  84        margin-bottom: unset;
  85      }
  86  
  87    }
  88  
  89    .card-header {
  90      display: flex;
  91      align-items: center;
  92      padding: 1rem 1rem .75rem;
  93      font-weight: $font-weight-bold;
  94      color: var(--template-bg-dark);
  95      background: var(--card-bg);
  96  
  97      > [class^="icon-"],
  98      > img {
  99        margin-inline-end: .5rem;
 100      }
 101  
 102      .btn {
 103        margin-top: .25em;
 104        margin-bottom: .25em;
 105      }
 106    }
 107  
 108    .card-body {
 109      padding: 0;
 110      overflow: hidden;
 111      border-bottom-right-radius: $border-radius;
 112      border-bottom-left-radius: $border-radius;
 113    }
 114  
 115    .module-actions {
 116      order: 1;
 117      margin-inline-start: auto;
 118  
 119      > * {
 120        padding: 0;
 121        color: var(--template-bg-dark-70);
 122      }
 123    }
 124  
 125    .cpanel-add-module {
 126      display: flex;
 127      flex-direction: column;
 128      align-items: flex-start;
 129      justify-content: flex-end;
 130      width: 100%;
 131      min-height: 130px;
 132      padding: 0 1rem;
 133      font-size: .875rem;
 134      font-weight: 700;
 135      line-height: 1;
 136      color: hsl(var(--hue),30%,40%);
 137      background-color: hsl(var(--hue),35%,98%);
 138      border: 1px solid hsl(var(--hue),35%,88%);
 139      border-radius: $border-radius;
 140      transition: all .15s ease-in;
 141  
 142      &:hover,
 143      &:focus,
 144      &:active {
 145        color: #fff;
 146        text-decoration: none;
 147        background: var(--template-bg-dark);
 148      }
 149  
 150      > span {
 151        padding: .25rem 0 1rem;
 152      }
 153  
 154      .cpanel-add-module-icon {
 155        font-size: 2rem;
 156        color: hsl(var(--hue),30%,40%);
 157        margin-inline-end: .5rem;
 158      }
 159    }
 160  }
 161  
 162  .cpanel-modules {
 163    .list-group {
 164      border-top: 1px solid $list-group-border-color;
 165    }
 166  
 167    .list-group-item {
 168      &:hover {
 169        background: var(--toolbar-bg);
 170      }
 171  
 172      a {
 173        font-weight: 500;
 174        text-decoration: underline;
 175      }
 176  
 177      .btn {
 178        text-decoration: none;
 179      }
 180  
 181      .list-group-item a > span {
 182        &[class^="#{$jicon-css-prefix}-"],
 183        &[class*=" #{$jicon-css-prefix}-"],
 184        &[class^="#{$fa-css-prefix}-"],
 185        &[class*=" #{$fa-css-prefix}-"] {
 186          display: block;
 187          padding: .5rem;
 188          color: rgba(255, 255, 255, .9);
 189          background: var(--template-link-color);
 190          box-shadow: $atum-box-shadow;
 191  
 192          &:hover {
 193            background: var(--template-link-hover-color);
 194          }
 195        }
 196      }
 197    }
 198  
 199    .list-group-item span.home-image {
 200      &[class^="#{$jicon-css-prefix}-"],
 201      &[class*=" #{$jicon-css-prefix}-"],
 202      &[class^="#{$fa-css-prefix}-"],
 203      &[class*=" #{$fa-css-prefix}-"] {
 204        display: inline-block;
 205        padding: 0;
 206        margin: 0 .85rem;
 207        font-size: .9rem;
 208        color: rgba(1, 1, 1, 1);
 209        background: var(--white-offset);
 210        box-shadow: none;
 211        transform: scale(1.2);
 212      }
 213    }
 214  
 215    h2 {
 216      margin-bottom: 0;
 217      font-size: $h4-font-size;
 218    }
 219  
 220    .mod-custom {
 221      padding: 1rem;
 222    }
 223  }
 224  
 225  .sample-data {
 226    .list-group-item {
 227      padding: 1rem;
 228    }
 229  }
 230  
 231  .sample-data__title {
 232    font-weight: bold;
 233    color: var(--primary);
 234  }
 235  
 236  .sample-data__icon {
 237    width: 1.3rem;
 238    text-align: center;
 239  }
 240  
 241  .sample-data__desc {
 242    border-inline-start: 4px solid hsl(var(--hue),50%,93%);
 243    padding-inline-start: 1rem;
 244    margin-inline-start: 8px;
 245  }