src/wolnelektury/static/scss/main/tag.scss

   1 .tabbed-filter {
   2     position: relative;
   3     border-bottom: 1px solid #ddd;
   4     padding-bottom: 4em;
   5
   6     @media screen and (min-width: 375px) {
   7         padding-bottom: 2em;
   8     }
   9
  10     @media screen and (min-width: 1024px) {
  11         padding-bottom: 0;
  12     }
  13
  14
  15     .tabs {
  16         position: absolute;
  17         right: 0;
  18         bottom: 0;
  19         float: right;
  20         text-align: right;
  21
  22         .tab {
  23             cursor: pointer;
  24             display: inline-block;
  25             margin-bottom: -1px;
  26             box-shadow: none;
  27
  28             &.active {
  29                 border-bottom-color: white;
  30             }
  31         }
  32     }
  33 }
  34 .tabbed-filter-contents {
  35     margin-bottom: 2em;
  36     .tab-content {
  37         display: none;
  38         border-top: none;
  39
  40         ul {
  41             list-style: none;
  42             margin-left: 0;
  43             padding-left: 10px;
  44
  45             li {
  46                 display: inline-block;
  47                 margin-right: 1em;
  48                 border-radius: 1em;
  49                 padding: .5em;
  50
  51                 &.header {
  52                     width: 6em;
  53                 }
  54
  55                 &.active {
  56                     background: #0D7E85;
  57                     color: #ddd;
  58
  59                     a {
  60                         display: inline-block;
  61                         width: 1.5em;
  62                         text-align: center;
  63                         margin-left: .5em;
  64                         border-radius: 1em;
  65                         background: white;
  66                     }
  67                 }
  68
  69                 &.other {
  70                     a {
  71                         color: #ddd;
  72                     }
  73                 }
  74             }
  75         }
  76     }
  77 }
  78
  79
  80
  81 #tagged-object-list {
  82
  83
  84
  85
  86
  87     @media screen and (min-width: 62.5em) {
  88         .left-column, .right-column {
  89             @include size(width, 480px);
  90         }
  91     }
  92
  93     .see-also, .download {
  94         float: left;
  95         @include size(margin-top, 20px);
  96         @include size(margin-bottom, 20px);
  97
  98         h2 {
  99             @include mono;
 100             @include size(font-size, 11px);
 101             margin: 0;
 102         }
 103
 104         ul {
 105             @include size(font-size, 11px);
 106             list-style: none;
 107             padding: 0;
 108             margin: 0;
 109         }
 110     }
 111
 112     .see-also {
 113         @include size(margin-left, 80px);
 114         @include size(width, 143px);
 115     }
 116     .download {
 117         @include size(margin-left, 20px);
 118     }
 119
 120     .left-column .see-also {
 121         margin-left: 0;
 122     }
 123 }
 124
 125 #description {
 126     @include size(margin-bottom, 26px);
 127     cursor: pointer;
 128
 129     dl {
 130         margin-top: 0;
 131     }
 132     dt {
 133         display: inline;
 134         font-weight: bold;
 135         margin: 0;
 136     }
 137     dd {
 138         display: inline;
 139         margin: 0;
 140     }
 141     p {
 142         margin-top: 0;
 143     }
 144     #description .meta {
 145         list-style: none;
 146         padding: 0;
 147         margin: 0;
 148     }
 149     #description .meta li {
 150         text-align: right;
 151         color: #666;
 152         @include size(font-size, 11.7px);
 153     }
 154 }
 155
 156 .inline-tag-lists {
 157     @include size(font-size, 11px);
 158
 159     .inline-header {
 160         @include mono;
 161         display: inline-block;
 162         vertical-align: top;
 163         @include size(width, 77px);
 164     }
 165
 166     .inline-body {
 167         display: inline-block;
 168         vertical-align: top;
 169         @include size(margin-bottom, 5.5px);
 170         @include size(max-width, 385px);
 171
 172         ul {
 173             list-style: none;
 174             padding: 0;
 175             margin: 0;
 176
 177             li {
 178                 display: inline-block;
 179                 @include size(margin-right, 11px);
 180             }
 181         }
 182     }
 183 }