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