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 @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     margin-left: 30px;
  53     font-size: .9em;
  54
  55     border-left: 1px solid #DDDDDD;
  56     color: #777;
  57     padding: 0 0 0 8px;
  58
  59     &:before {
  60         display: none;
  61     }
  62 }
  63
  64 .theme-begin {
  65     @include theme-hidden;
  66
  67     font-size: .9em;
  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: 60;
  75
  76     font-style: normal;
  77     font-weight: normal;
  78     font-variant: normal;
  79     letter-spacing: 0;
  80     text-transform: none;
  81     text-decoration: none;
  82
  83     @include min-screen(600px) {
  84         @include theme-showing;
  85         margin-right: -160px;
  86     }
  87
  88     &.showing {
  89         @include theme-showing;
  90     }
  91 }
  92
  93
  94 .always-hide-themes {
  95     .theme-begin {
  96         @include theme-hidden;
  97     }
  98 }
  99
 100 .with-other-text {
 101     .theme-begin {
 102         @include theme-hidden;
 103
 104         @include min-screen(1200px) {
 105             @include theme-showing;
 106             margin-right: -160px;
 107         }
 108     }
 109 }