catalogue/static/catalogue/css/exercise.scss

   1 $px: 0.0625em;
   2 $oranji: #ed7831;
   3 $ciemny: #363a3e;
   4 $zielony: #16a487;
   5
   6
   7 @mixin bubble {
   8     border-radius: 11*$px;
   9     padding: 8*$px 11*$px;
  10 }
  11 @mixin bubble-drag {
  12     background-color: #d4d6d8;
  13     color: #363a3e;
  14     cursor: pointer;
  15     z-index: 2;
  16 }
  17 @mixin bubble-drag-disabled {
  18     background-color: #eee;
  19     color: #d4d6d8;
  20 }
  21 @mixin un-bubble-drag {
  22     background-color: inherit;
  23     color: inherit;
  24     cursor: inherit;
  25     z-index: inherit;
  26 }
  27
  28 @mixin bubble-inline {
  29     display: inline-block;
  30     margin: 5*$px;
  31     z-index: 2;
  32 }
  33 @mixin un-bubble-inline {
  34     display: inline;
  35     margin: 0;
  36     padding: 0;
  37     z-index: inherit;
  38     border-radius: 0;
  39 }
  40 @mixin list-plain {
  41     list-style: none;
  42     margin: 0;
  43     padding: 0;
  44 }
  45
  46
  47 .exercise {
  48     img {
  49         vertical-align: top;
  50     }
  51
  52     .question-piece {
  53         @include bubble;
  54     }
  55     .lista.punkt {
  56         @include list-plain;
  57     }
  58     .lista {
  59         li {
  60             margin: 5*$px 0;
  61         }
  62     }
  63
  64     .question-piece.correct {
  65         background-color: #16a487;
  66         color: white;
  67     }
  68     .question-piece.incorrect {
  69         background-color: #f00;
  70         color: white;
  71     }
  72
  73     .placeholder.dragover {
  74          background: #ed7831 !important;
  75     }
  76
  77     .remove {
  78         float: right;
  79         display: inline-block;
  80         border-radius: 8*$px;
  81         padding: 4*$px 8*$px;
  82         margin: -4*$px -8*$px -.25em 8*$px;
  83         background: #ed7831;
  84         color: white;
  85     }
  86
  87     .buttons {
  88         background: #5e6165;
  89         border-radius: 9*$px;
  90         height: 30*$px;
  91         line-height: 30*$px;
  92         overflow: hidden;
  93         color: white;
  94         margin-top: 30*$px;
  95
  96         input {
  97             height: 100%;
  98             border: 0;
  99             background: #8e9093;
 100             color: white;
 101             text-transform: uppercase;
 102             font-weight: bold;
 103         }
 104         .message {
 105             float: right;
 106             padding: 0 20*$px;
 107             background: red;
 108         }
 109         .maxscore {
 110             background: #16a487;
 111         }
 112
 113         input.check {
 114             background: #ed7831;
 115
 116         }
 117     }
 118
 119     .instruction {
 120         display: block;
 121         margin: .3em;
 122         color: green;
 123         font-size: .9em;
 124     }
 125     .instruction:before {
 126         content: "☞ ";
 127     }
 128 }
 129
 130
 131 .luki {
 132     .question-piece {
 133         @include bubble-drag;
 134         @include bubble-inline;
 135         max-width: 608*$px;
 136     }
 137     .question-piece.disabled {
 138         @include bubble-drag-disabled;
 139     }
 140
 141     .placeholder {
 142         @include bubble;
 143         @include bubble-inline;
 144
 145         width: 4em;
 146         background-color: #eee;
 147         z-index: 1;
 148     }
 149     .placeholder:after {
 150         content: "\0000a0";
 151     }
 152 }
 153
 154
 155 .zastap {
 156     .question-piece {
 157         @include bubble-drag;
 158         @include bubble-inline;
 159     }
 160     .question-piece.disabled {
 161         @include bubble-drag-disabled;
 162     }
 163     .question-piece.placeholder {
 164         @include un-bubble-drag;
 165         @include un-bubble-inline;
 166     }
 167 }
 168
 169 .uporzadkuj {
 170     .question-piece {
 171         @include bubble-drag;
 172     }
 173     .question-piece.disabled {
 174         @include bubble-drag-disabled;
 175     }
 176     .lista {
 177         @include list-plain;
 178         counter-reset: answer;
 179         li {
 180             counter-increment: answer;
 181             padding-right: 3em;
 182             background-image: url(/static/img/ornaments/draggable.png);
 183             background-repeat: no-repeat;
 184             background-position: 100% 50%;
 185         }
 186         li:before {
 187             @include bubble;
 188             @include bubble-drag;
 189             content: counter(answer);
 190             float: left;
 191             margin: -.5em 0 0 -3em;
 192         }
 193         li.ui-sortable-placeholder {
 194             counter-increment: answer 0;
 195         }
 196         li.ui-sortable-helper:before {
 197             content: none;
 198         }
 199     }
 200 }
 201
 202 .przyporzadkuj {
 203     .question-piece {
 204         @include bubble-drag;
 205         width: 618*$px;
 206     }
 207     .question-piece.short {
 208         display: inline-block;
 209         margin: .2em .1em;
 210         width: auto;
 211     }
 212     span.question-piece {
 213         display: inline-block;
 214         margin: .1em;
 215         width: auto;
 216     }
 217     .question-piece.disabled {
 218         @include bubble-drag-disabled;
 219     }
 220     .predicate {
 221         @include list-plain;
 222
 223         > li {
 224             @include bubble;
 225             display: inline-block;
 226             background-color: #5e6165;
 227             color: white;
 228             width: 188*$px;
 229             position: relative;
 230             vertical-align: top;
 231
 232             .subjects {
 233                 @include list-plain;
 234                 min-height: 45*$px;
 235                 position: relative;
 236                 margin: 8*$px -11*$px -8*$px -11*$px;
 237                 padding: 8*$px 11*$px;
 238
 239                 li {
 240                     width: auto;
 241                 }
 242
 243                 .placeholder {
 244                     @include bubble;
 245                     text-align: right;
 246                     position:relative;
 247                     padding: 8*$px 11*$px;
 248                     margin: 0 -11*$px;
 249                 }
 250                 .multiple {
 251                     position: absolute;
 252                     z-index: -1;
 253                     top: 0;
 254                     bottom: 0;
 255                     left: 0;
 256                     right: 0;
 257                     margin: 0;
 258                 }
 259
 260                 .placeholder.dragover {
 261                     z-index: 1;
 262                 }
 263                 .placeholder:after {
 264                     content: "upuść tutaj";
 265                     text-style: italic;
 266                 }
 267             }
 268         }
 269         .comment {
 270         }
 271     }
 272     .subject {
 273         @include list-plain;
 274     }
 275
 276 }
 277
 278
 279 .prawdafalsz .question {
 280     li.question-piece {
 281         position: relative;
 282         padding-left: 11em;
 283     }
 284
 285     .buttons {
 286         margin-top: 0;
 287         top: 0;
 288         left: 0;
 289         position: absolute;
 290
 291         background-color: #d4d6d8;
 292         color: #363a3e;
 293         display: inline-block;
 294
 295         a {
 296             color: #363a3e;
 297             text-transform: uppercase;
 298             font-weight: bold;
 299             display: inline-block;
 300             padding: 0 11*$px;
 301         }
 302         a.chosen {
 303             background: #ed7831;
 304             color: white;
 305         }
 306     }
 307 }
 308
 309 .wybor .question {
 310     .lista {
 311         list-style: none;
 312         padding: 0;
 313         li {
 314             margin: 0;
 315         }
 316     }
 317 }