assets/main/sass/components/_list.scss

   1 ///
   2 /// Massively by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* List */
   8
   9         ol {
  10                 list-style: decimal;
  11                 margin: 0 0 _size(element-margin) 0;
  12                 padding-left: 1.25rem;
  13
  14                 li {
  15                         padding-left: 0.25rem;
  16                 }
  17         }
  18
  19         ul {
  20                 list-style: disc;
  21                 margin: 0 0 _size(element-margin) 0;
  22                 padding-left: 1rem;
  23
  24                 li {
  25                         padding-left: 0.5rem;
  26                 }
  27
  28                 &.divided {
  29                         list-style: none;
  30                         padding-left: 0;
  31
  32                         li {
  33                                 border-top: solid 1px;
  34                                 padding: 0.5rem 0;
  35
  36                                 &:first-child {
  37                                         border-top: 0;
  38                                         padding-top: 0;
  39                                 }
  40                         }
  41                 }
  42         }
  43
  44         dl {
  45                 margin: 0 0 _size(element-margin) 0;
  46
  47                 dt {
  48                         display: block;
  49                         font-weight: _font(weight-bold);
  50                         margin: 0 0 (_size(element-margin) * 0.5) 0;
  51                 }
  52
  53                 dd {
  54                         margin-left: _size(element-margin);
  55                 }
  56         }
  57
  58         @mixin color-list($p: null) {
  59                 ul {
  60                         &.divided {
  61                                 li {
  62                                         border-top-color: _palette($p, border);
  63                                 }
  64                         }
  65
  66                         &.icons {
  67                                 li {
  68                                         a.icon {
  69                                                 &:hover {
  70                                                         &:before {
  71                                                                 color: _palette($p, accent);
  72                                                         }
  73                                                 }
  74                                         }
  75                                 }
  76
  77                                 &.alt {
  78                                         li {
  79                                                 .icon {
  80                                                         &:before {
  81                                                                 box-shadow: inset 0 0 0 2px _palette($p, border);
  82                                                         }
  83                                                 }
  84
  85                                                 a.icon {
  86                                                         &:hover {
  87                                                                 &:before {
  88                                                                         box-shadow: inset 0 0 0 2px _palette($p, accent);
  89                                                                 }
  90                                                         }
  91                                                 }
  92                                         }
  93                                 }
  94                         }
  95                 }
  96         }
  97
  98         @include color-list;