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                         ul {
  90                                 li {
  91                                         margin: 0;
  92                                 }
  93
  94                                 li a {
  95                                         text-transform: none;
  96                                         font-weight: normal;
  97                                 }
  98                         }
  99                 }
 100         }
 101 }
 102
 103 .content {
 104         -webkit-flex: 1;
 105         flex: 1;
 106
 107         h1, h2, h3, h4, h5, h6, p {
 108                 margin-left: 20px;
 109         }
 110
 111         p {
 112                 width: 338px;
 113         }
 114
 115         h1 {
 116                 margin-bottom: 0;
 117         }
 118
 119         .example {
 120                 display: -webkit-flex;
 121                 display: flex;
 122                 flex-wrap: wrap;
 123
 124                 pre {
 125                         -webkit-flex: initial;
 126                         flex: initial;
 127                         background: #f8f8f8;
 128                         padding: 20px;
 129                         color: #999;
 130                         word-wrap: break-word;
 131                         // word-wrap in pre not affecting Firefox, so add white-space.
 132                         white-space: pre-wrap;
 133                         float: left;
 134                         margin: 0;
 135                         margin-right: 22px;
 136                 }
 137
 138                 blockquote {
 139                         -webkit-flex: 1;
 140                         flex: 1;
 141                         display: block;
 142                         margin: 0;
 143                         margin-left: 20px;
 144
 145                         div {
 146                                 margin-bottom: 5px;
 147                         }
 148                 }
 149         }
 150 }
 151
 152 @media (min-width: 768px) {
 153         nav {
 154                 display: block;
 155                 width: 100px;
 156         }
 157
 158         @columnWidth: (768px - 100px ) / 2;
 159         .example {
 160                 pre,
 161                 blockquote {
 162                         width: @columnWidth;
 163                 }
 164         }
 165 }
 166
 167 @media (min-width: 980px) {
 168         nav {
 169                 width: auto;
 170         }
 171
 172         .content {
 173                 margin-left: 30px;
 174         }
 175
 176         .container {
 177                 width: 980px;
 178         }
 179
 180         .example {
 181                 pre {
 182                         width: 338px;
 183                 }
 184                 blockquote {
 185                         width: auto;
 186                 }
 187         }
 188 }