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