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