edumed/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
 120
 121 .exercise, .exercise-wtem {
 122     .instruction {
 123         display: block;
 124         margin: .3em;
 125         color: green;
 126         font-size: .9em;
 127     }
 128     .instruction:before {
 129         content: "☞ ";
 130     }
 131 }
 132
 133
 134 .luki {
 135     .question-piece {
 136         @include bubble-drag;
 137         @include bubble-inline;
 138         max-width: 608*$px;
 139     }
 140     .question-piece.disabled {
 141         @include bubble-drag-disabled;
 142     }
 143
 144     .placeholder {
 145         @include bubble;
 146         @include bubble-inline;
 147
 148         width: 4em;
 149         background-color: #eee;
 150         z-index: 1;
 151     }
 152     .placeholder:after {
 153         content: "\0000a0";
 154     }
 155 }
 156
 157
 158 .zastap {
 159     .question-piece {
 160         @include bubble-drag;
 161         @include bubble-inline;
 162     }
 163     .question-piece.disabled {
 164         @include bubble-drag-disabled;
 165     }
 166     .question-piece.placeholder {
 167         @include un-bubble-drag;
 168         @include un-bubble-inline;
 169     }
 170 }
 171
 172 .uporzadkuj {
 173     .question-piece {
 174         @include bubble-drag;
 175     }
 176     .question-piece.disabled {
 177         @include bubble-drag-disabled;
 178     }
 179     .lista {
 180         @include list-plain;
 181         counter-reset: answer;
 182         li {
 183             counter-increment: answer;
 184             padding-right: 3em;
 185             background-image: url(/static/img/ornaments/draggable.png);
 186             background-repeat: no-repeat;
 187             background-position: 100% 50%;
 188         }
 189         li:before {
 190             @include bubble;
 191             @include bubble-drag;
 192             content: counter(answer);
 193             float: left;
 194             margin: -.5em 0 0 -3em;
 195         }
 196         li.ui-sortable-placeholder {
 197             counter-increment: answer 0;
 198         }
 199         li.ui-sortable-helper:before {
 200             content: none;
 201         }
 202     }
 203 }
 204
 205 .przyporzadkuj {
 206     .question-piece {
 207         @include bubble-drag;
 208         width: 618*$px;
 209     }
 210     .question-piece.short {
 211         display: inline-block;
 212         margin: .2em .1em;
 213         width: auto;
 214     }
 215     span.question-piece {
 216         display: inline-block;
 217         margin: .1em;
 218         width: auto;
 219     }
 220     .question-piece.disabled {
 221         @include bubble-drag-disabled;
 222     }
 223     .predicate {
 224         @include list-plain;
 225
 226         > li {
 227             @include bubble;
 228             display: inline-block;
 229             background-color: #5e6165;
 230             color: white;
 231             width: 188*$px;
 232             position: relative;
 233             vertical-align: top;
 234
 235             .subjects {
 236                 @include list-plain;
 237                 min-height: 45*$px;
 238                 position: relative;
 239                 margin: 8*$px -11*$px -8*$px -11*$px;
 240                 padding: 8*$px 11*$px;
 241
 242                 li {
 243                     width: auto;
 244                 }
 245
 246                 .placeholder {
 247                     @include bubble;
 248                     text-align: right;
 249                     position:relative;
 250                     padding: 8*$px 11*$px;
 251                     margin: 0 -11*$px;
 252                 }
 253                 .multiple {
 254                     position: absolute;
 255                     z-index: -1;
 256                     top: 0;
 257                     bottom: 0;
 258                     left: 0;
 259                     right: 0;
 260                     margin: 0;
 261                 }
 262
 263                 .placeholder.dragover {
 264                     z-index: 1;
 265                 }
 266                 .placeholder:after {
 267                     content: "upuść tutaj";
 268                     text-style: italic;
 269                 }
 270             }
 271         }
 272         .comment {
 273         }
 274     }
 275     .subject {
 276         @include list-plain;
 277     }
 278
 279 }
 280
 281
 282 .prawdafalsz .question {
 283     li.question-piece {
 284         position: relative;
 285         padding-left: 11em;
 286     }
 287
 288     .buttons {
 289         margin-top: 0;
 290         top: 0;
 291         left: 0;
 292         position: absolute;
 293
 294         background-color: #d4d6d8;
 295         color: #363a3e;
 296         display: inline-block;
 297
 298         a {
 299             color: #363a3e;
 300             text-transform: uppercase;
 301             font-weight: bold;
 302             display: inline-block;
 303             padding: 0 11*$px;
 304         }
 305         a.chosen {
 306             background: #ed7831;
 307             color: white;
 308         }
 309     }
 310 }
 311
 312 .wybor .question {
 313     .lista {
 314         list-style: none;
 315         padding: 0;
 316         li {
 317             margin: 0;
 318         }
 319     }
 320 }