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 -.25em 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
 170         > li {
 171             @include bubble;
 172             display: inline-block;
 173             background-color: #5e6165;
 174             color: white;
 175             width: 188*$px;
 176             position: relative;
 177             vertical-align: top;
 178
 179             .subjects {
 180                 @include list-plain;
 181                 min-height: 45*$px;
 182                 position: relative;
 183                 margin: 8*$px -11*$px -8*$px -11*$px;
 184                 padding: 8*$px 11*$px;
 185
 186                 .placeholder {
 187                     @include bubble;
 188                     position: absolute;
 189                     top: 0;
 190                     bottom: 0;
 191                     left: 0;
 192                     right: 0;
 193                     margin: 0;
 194                     z-index: -1;
 195                     text-align: right;
 196                 }
 197                 .placeholder.dragover {
 198                     z-index: 1;
 199                 }
 200                 .placeholder:after {
 201                     content: "upuść tutaj";
 202                     text-style: italic;
 203                 }
 204             }
 205         }
 206         .comment {
 207         }
 208     }
 209     .subject {
 210         @include list-plain;
 211     }
 212
 213 }
 214
 215
 216 .prawdafalsz .question {
 217     li.question-piece {
 218         position: relative;
 219         padding-left: 11em;
 220     }
 221
 222     .buttons {
 223         margin-top: 0;
 224         top: 0;
 225         left: 0;
 226         position: absolute;
 227
 228         background-color: #d4d6d8;
 229         color: #363a3e;
 230         display: inline-block;
 231
 232         a {
 233             color: #363a3e;
 234             text-transform: uppercase;
 235             font-weight: bold;
 236             display: inline-block;
 237             padding: 0 11*$px;
 238         }
 239         a.chosen {
 240             background: #ed7831;
 241             color: white;
 242         }
 243     }
 244 }
 245
 246 .wybor .question {
 247     .lista {
 248         list-style: none;
 249         padding: 0;
 250         li {
 251             margin: 0;
 252         }
 253     }
 254 }