src/wolnelektury/static/scss/book_text/themes.scss

   1 nav #menu-themes {
   2     display: none;
   3 }
   4
   5 /* Add a missing header. */
   6 #themes:before {
   7     content: "Motywy";
   8 }
   9
  10
  11 @mixin theme-hidden {
  12     width: 20px;
  13     height: 20px;
  14     overflow: hidden;
  15     margin-right: -20px;
  16     border: none;
  17     padding: 0;
  18
  19     &:before {
  20         content: "▲";
  21         color: #ccc;
  22         text-align: center;
  23         display: block;
  24     }
  25
  26     @include min-screen(240px) {
  27         width: 30px;
  28         margin-right: -30px;
  29         &:before {
  30             font-size: 2em;
  31         }
  32     }
  33
  34     @include min-screen(320px) {
  35         width: 44px;
  36         margin-right: -44px;
  37         &:before {
  38             font-size: 2.5em;
  39         }
  40     }
  41
  42     &.showing {
  43         @include theme-showing;
  44     }
  45
  46 }
  47
  48 @mixin theme-showing {
  49     @include size(width, 120px);
  50     height: auto;
  51     overflow: visible;
  52     @include size(margin-left, 30px);
  53     @include size(font-size, 14.4px);
  54     text-indent: 0;
  55
  56     @include size(border-left, 1px solid #DDDDDD);
  57     color: #777;
  58     @include size(padding, 0 0 0 8px);
  59
  60     &:before {
  61         display: none;
  62     }
  63 }
  64
  65 .theme-begin {
  66     @include theme-hidden;
  67
  68     font-size: .9em;
  69     position: relative;
  70     float: right;
  71     margin-bottom: 8px;
  72     clear: both;
  73     line-height: 1.5em;
  74     text-align: left;
  75     z-index: 60;
  76
  77     font-style: normal;
  78     font-weight: normal;
  79     font-variant: normal;
  80     letter-spacing: 0;
  81     text-transform: none;
  82     text-decoration: none;
  83
  84     @include min-screen(600px) {
  85         @include theme-showing;
  86         margin-right: -160px;
  87     }
  88
  89     &.showing {
  90         @include theme-showing;
  91     }
  92 }
  93
  94
  95 .always-hide-themes {
  96     .theme-begin {
  97         @include theme-hidden;
  98     }
  99 }
 100
 101 .with-other-text {
 102     .theme-begin {
 103         @include theme-hidden;
 104
 105         @include min-screen(1200px) {
 106             @include theme-showing;
 107             margin-right: -160px;
 108         }
 109     }
 110 }