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

   1
   2 .container {
   3         width: 100%;
   4 }
   5
   6 nav {
   7         display: none;
   8 }
   9
  10 article {
  11         .example {
  12                 blockquote {
  13                         margin-top: 20px;
  14                 }
  15         }
  16 }
  17
  18 body {
  19         margin: 0;
  20         padding: 0;
  21         padding-top: 3px;
  22         padding-bottom: 40px;
  23
  24         // FIXME: Remove when typography module in mediawiki-ui
  25         font-family: "Nimbus Sans L", "Liberation Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  26 }
  27
  28 .content.kss-no-margin {
  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 article {
  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         article {
 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 }