less/admin/widgets.less

   1 // Copyright (C) 2014 Ipsilon project Contributors, for license see COPYING
   2
   3 // Widgets
   4
   5 // imitate tables
   6 .ipsilon-row {
   7
   8     // reuse bootstrap colors
   9     border-top: 1px solid @table-border-color;
  10     padding: @table-cell-padding;
  11
  12     // to have equal height - basically a hack, increase if default elements are
  13     // larger. Proper equal height would have to be done in JavaScript.
  14     min-height: @input-height-large;
  15 }
  16
  17
  18 .ipsilon-row:last-child {
  19     border-bottom: 1px solid @table-border-color;
  20 }
  21
  22 // add to div with 'ipsilon-row' class to change background
  23 .hl-enabled {
  24     // ugly color
  25     background-color: @state-enabled-bg;
  26 }
  27
  28 .hl-disabled {
  29     background-color: @state-disabled-bg;
  30
  31     strong {
  32         color: #555;
  33     }
  34 }
  35
  36 // animation
  37 // https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
  38
  39 @keyframes bgfadein {
  40     from {
  41         background-color: @state-disabled-bg;
  42     }
  43     to {
  44         background-color: @state-enabled-bg;
  45     }
  46 }
  47
  48 @keyframes bgfadeout {
  49     from {
  50         background-color: @state-enabled-bg;
  51     }
  52     to {
  53         background-color: @state-disabled-bg;
  54     }
  55 }
  56
  57 // add these classes to rows to hightlight them on load
  58 .hl-enabled-new {
  59     animation-duration: 2s;
  60     animation-name: bgfadein;
  61     animation-fill-mode: both
  62 }
  63
  64 .hl-disabled-new {
  65     animation-duration: 2s;
  66     animation-name: bgfadeout;
  67     animation-fill-mode: both
  68 }
  69
  70 @keyframes flashout {
  71     0% {
  72         background-color: @state-enabled-bg;
  73     }
  74     50% {
  75         background-color: @state-info-bg;
  76     }
  77     100% {
  78         background-color: @state-enabled-bg;
  79     }
  80 }
  81
  82 .hl-enabled-flash {
  83     animation-duration: 1s;
  84     animation-name: flashout;
  85     animation-fill-mode: both
  86 }