docs/kss/styleguide-template/public/kss.less

   1 .container {
   2         width: 100%;
   3 }
   4
   5 nav {
   6         display: none;
   7 }
   8
   9 .content {
  10         .example {
  11                 blockquote {
  12                         margin-top: 20px;
  13                 }
  14         }
  15 }
  16
  17 body {
  18         margin: 0;
  19         padding: 0;
  20         padding-top: 3px;
  21         padding-bottom: 40px;
  22
  23         // FIXME: Remove when typography module in mediawiki-ui
  24         font-family: "Nimbus Sans L", "Liberation Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  25 }
  26
  27 .kss-no-margin {
  28         // FIXME: Is this being used anywhere? Remove if not.
  29         margin: 0;
  30 }
  31
  32 .container {
  33         margin: 0 auto;
  34         display: -webkit-flex;
  35         display: flex;
  36
  37 }
  38
  39 header {
  40         padding: 0;
  41         margin: 0;
  42         border-bottom: 1px solid #eee;
  43
  44         hgroup {
  45                 min-width: 149px;
  46
  47                 h1 {
  48                         padding: 16px 28px;
  49                         font-size: 15px;
  50                         text-transform: uppercase;
  51                         margin: 0;
  52                         width: 92px;
  53                         border-right: 1px solid #eee;
  54                 }
  55         }
  56 }
  57
  58 nav {
  59         -webkit-flex: initial;
  60         flex: initial;
  61         min-width: 139px;
  62         margin-top: 25px;
  63
  64         ul {
  65                 list-style: none;
  66                 padding: 0;
  67
  68                 li {
  69                         margin-left: 10px;
  70                         margin-bottom: 20px;
  71
  72                         a {
  73                                 text-transform: uppercase;
  74                                 color: #aaa;
  75                                 font-size: 12px;
  76                                 font-weight: bold;
  77                                 text-decoration: none;
  78
  79                                 &:hover {
  80                                         color: #538DF8;
  81                                 }
  82
  83                                 span {
  84                                         display: inline-block;
  85                                         width: 35px;
  86                                 }
  87                         }
  88                 }
  89         }
  90 }
  91
  92 .content {
  93         -webkit-flex: 1;
  94         flex: 1;
  95
  96         h1, h2, h3, h4, h5, h6, p {
  97                 margin-left: 20px;
  98         }
  99
 100         p {
 101                 width: 338px;
 102         }
 103
 104         h1 {
 105                 margin-bottom: 0;
 106         }
 107
 108         .example {
 109                 display: -webkit-flex;
 110                 display: flex;
 111                 flex-wrap: wrap;
 112
 113                 pre {
 114                         -webkit-flex: initial;
 115                         flex: initial;
 116                         background: #f8f8f8;
 117                         padding: 20px;
 118                         color: #999;
 119                         word-wrap: break-word;
 120                         // word-wrap in pre not affecting Firefox, so add white-space.
 121                         white-space: pre-wrap;
 122                         float: left;
 123                         margin: 0;
 124                         margin-right: 22px;
 125                 }
 126
 127                 blockquote {
 128                         -webkit-flex: 1;
 129                         flex: 1;
 130                         display: block;
 131                         margin: 0;
 132                         margin-left: 20px;
 133                 }
 134         }
 135 }
 136
 137 @media (min-width: 768px) {
 138         nav {
 139                 display: block;
 140                 width: 100px;
 141         }
 142
 143         @columnWidth: (768px - 100px ) / 2;
 144         .example {
 145                 pre,
 146                 blockquote {
 147                         width: @columnWidth;
 148                 }
 149         }
 150 }
 151
 152 @media (min-width: 980px) {
 153         nav {
 154                 width: auto;
 155         }
 156
 157         .content {
 158                 margin-left: 30px;
 159         }
 160
 161         .container {
 162                 width: 980px;
 163         }
 164
 165         .example {
 166                 pre {
 167                         width: 338px;
 168                 }
 169                 blockquote {
 170                         width: auto;
 171                 }
 172         }
 173 }