catalogue/static/catalogue/css/exercise.scss

   1 $px: 0.0625em;
   2
   3
   4 @mixin bubble {
   5     border-radius: 11*$px;
   6     padding: 8*$px 11*$px;
   7 }
   8 @mixin bubble-drag {
   9     background-color: #d4d6d8;
  10     color: #363a3e;
  11     cursor: pointer;
  12     z-index: 2;
  13 }
  14 @mixin bubble-drag-disabled {
  15     background-color: #eee;
  16     color: #d4d6d8;
  17 }
  18 @mixin un-bubble-drag {
  19     background-color: inherit;
  20     color: inherit;
  21     cursor: inherit;
  22     z-index: inherit;
  23 }
  24
  25 @mixin bubble-inline {
  26     display: inline-block;
  27     margin: 5*$px;
  28     z-index: 2;
  29 }
  30 @mixin un-bubble-inline {
  31     display: inline;
  32     margin: 0;
  33     padding: 0;
  34     z-index: inherit;
  35     border-radius: 0;
  36 }
  37 @mixin list-plain {
  38     list-style: none;
  39     margin: 0;
  40     padding: 0;
  41 }
  42
  43
  44 .exercise {
  45     .question-piece {
  46         @include bubble;
  47     }
  48     .lista.punkt {
  49         @include list-plain;
  50     }
  51     .lista {
  52         li {
  53             margin: 5*$px 0;
  54         }
  55     }
  56
  57     .question-piece.correct {
  58         background-color: #16a487;
  59         color: white;
  60     }
  61     .question-piece.incorrect {
  62         background-color: #f00;
  63         color: white;
  64     }
  65
  66     .placeholder.dragover {
  67          background: #ed7831 !important;
  68     }
  69
  70     .remove {
  71         float: right;
  72         display: inline-block;
  73         border-radius: 8*$px;
  74         padding: 4*$px 8*$px;
  75         margin: -4*$px -8*$px -1em 8*$px;
  76         background: #ed7831;
  77         color: white;
  78     }
  79
  80     .buttons {
  81         background: #5e6165;
  82         border-radius: 9*$px;
  83         height: 30*$px;
  84         line-height: 30*$px;
  85         overflow: hidden;
  86         color: white;
  87         margin-top: 30*$px;
  88
  89         input {
  90             height: 100%;
  91             border: 0;
  92             background: #8e9093;
  93             color: white;
  94             text-transform: uppercase;
  95             font-weight: bold;
  96         }
  97         .message {
  98             float: right;
  99             margin-right: 20*$px;
 100         }
 101
 102         input.check {
 103             background: #ed7831;
 104
 105         }
 106     }
 107
 108 }
 109
 110
 111 .luki {
 112     .question-piece {
 113         @include bubble-drag;
 114         @include bubble-inline;
 115     }
 116     .question-piece.disabled {
 117         @include bubble-drag-disabled;
 118     }
 119
 120     .placeholder {
 121         @include bubble;
 122         @include bubble-inline;
 123
 124         width: 4em;
 125         background-color: #eee;
 126         z-index: 1;
 127     }
 128     .placeholder:after {
 129         content: "\0000a0";
 130     }
 131 }
 132
 133
 134 .zastap {
 135     .question-piece {
 136         @include bubble-drag;
 137         @include bubble-inline;
 138     }
 139     .question-piece.disabled {
 140         @include bubble-drag-disabled;
 141     }
 142     .question-piece.placeholder {
 143         @include un-bubble-drag;
 144         @include un-bubble-inline;
 145     }
 146 }
 147
 148 .uporzadkuj {
 149     .question-piece {
 150         @include bubble-drag;
 151     }
 152     .question-piece.disabled {
 153         @include bubble-drag-disabled;
 154     }
 155     .lista {
 156         @include list-plain;
 157     }
 158 }
 159
 160 .przyporzadkuj {
 161     .question-piece {
 162         @include bubble-drag;
 163     }
 164     .question-piece.disabled {
 165         @include bubble-drag-disabled;
 166     }
 167     .predicate {
 168         @include list-plain;
 169         white-space: nowrap;
 170
 171         > li {
 172             white-space: normal;
 173             @include bubble;
 174             display: inline-block;
 175             background-color: #5e6165;
 176             color: white;
 177             width: 180*$px;
 178             position: relative;
 179             vertical-align: top;
 180
 181             .subjects {
 182                 @include list-plain;
 183                 min-height: 45*$px;
 184                 position: relative;
 185                 margin: 8*$px -11*$px -8*$px -11*$px;
 186                 padding: 8*$px 11*$px;
 187
 188                 .placeholder {
 189                     @include bubble;
 190                     position: absolute;
 191                     top: 0;
 192                     bottom: 0;
 193                     left: 0;
 194                     right: 0;
 195                     margin: 0;
 196                     z-index: -1;
 197                     text-align: right;
 198                 }
 199                 .placeholder.dragover {
 200                     z-index: 1;
 201                 }
 202                 .placeholder:after {
 203                     content: "upuść tutaj";
 204                     text-style: italic;
 205                 }
 206             }
 207         }
 208         .comment {
 209             white-space: normal;
 210         }
 211     }
 212     .subject {
 213         @include list-plain;
 214     }
 215
 216 }
 217
 218
 219 .prawdafalsz .question {
 220     li.question-piece {
 221         position: relative;
 222         padding-left: 11em;
 223     }
 224
 225     .buttons {
 226         margin-top: 0;
 227         top: 0;
 228         left: 0;
 229         position: absolute;
 230
 231         background-color: #d4d6d8;
 232         color: #363a3e;
 233         display: inline-block;
 234
 235         a {
 236             color: #363a3e;
 237             text-transform: uppercase;
 238             font-weight: bold;
 239             display: inline-block;
 240             padding: 0 11*$px;
 241         }
 242         a.chosen {
 243             background: #ed7831;
 244             color: white;
 245         }
 246     }
 247 }