apps/wolnelektury_core/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
  12
  13 @mixin theme-hidden {
  14     width: 20px;
  15     height: 20px;
  16     overflow: hidden;
  17     margin-right: -20px;
  18     border: none;
  19     padding: 0;
  20
  21     &:before {
  22         content: "▲";
  23         color: #ccc;
  24         text-align:  center;
  25         display: block;
  26     }
  27
  28     @include min-screen(240px) {
  29         width: 30px;
  30         margin-right: -30px;
  31         &:before {
  32             font-size: 2em;
  33         }
  34     }
  35
  36     @include min-screen(320px) {
  37         width: 44px;
  38         margin-right: -44px;
  39         &:before {
  40             font-size: 3em;
  41         }
  42     }
  43
  44     &.showing {
  45         @include theme-showing;
  46     }
  47
  48 }
  49
  50 @mixin theme-showing {
  51     @include size(width, 120px);
  52     height: auto;
  53     overflow: visible;
  54     margin-left: 30px;
  55
  56     border-left: 1px solid #DDDDDD;
  57     color: #777;
  58     padding: 0 0 0 8px;
  59
  60     &:before {
  61         display: none;
  62     }
  63 }
  64
  65 .theme-begin {
  66     @include theme-hidden;
  67
  68     position: relative;
  69     float: right;
  70     margin-bottom: 8px;
  71     clear: both;
  72     line-height: 1.5em;
  73     text-align: left;
  74     z-index: 60000;
  75
  76     font-size: 16px;
  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 @include min-screen(600px) {
  96     .always-hide-themes {
  97         .theme-begin {
  98             @include theme-hidden;
  99         }
 100     }
 101 }