diff options
author | Simo Sorce <simo@redhat.com> | 2014-11-06 14:01:04 -0500 |
---|---|---|
committer | Patrick Uiterwijk <puiterwijk@redhat.com> | 2014-11-12 23:48:02 +0100 |
commit | dc9f4a30a47cdce1e0070c18398351ea6c307305 (patch) | |
tree | 19ddbaa13ca9903098e48a8b9a7157ba3e0497e3 /less | |
parent | 0034ad1215de99fc13e9dc57bc652cfb8eeb58ae (diff) | |
download | ipsilon-dc9f4a30a47cdce1e0070c18398351ea6c307305.tar.gz ipsilon-dc9f4a30a47cdce1e0070c18398351ea6c307305.tar.xz ipsilon-dc9f4a30a47cdce1e0070c18398351ea6c307305.zip |
Add visual cues to configuration panels
Make it easier to recognize which plugins are enabled and which are
disabled. Also make it easier to recognize when a plugin has just changed
state, by flashing its row (help also realize it may have moved up/down)
Based on concept work by Petr Vobornik
Signed-off-by: Simo Sorce <simo@redhat.com>
Reviewed-by: Patrick Uiterwijk <puiterwijk@redhat.com>
Diffstat (limited to 'less')
-rw-r--r-- | less/admin.less | 8 | ||||
-rw-r--r-- | less/admin/variables.less | 9 | ||||
-rw-r--r-- | less/admin/widgets.less | 86 |
3 files changed, 100 insertions, 3 deletions
diff --git a/less/admin.less b/less/admin.less index 0b71139..f58f3ab 100644 --- a/less/admin.less +++ b/less/admin.less @@ -81,9 +81,11 @@ // Open Sans Fonts @import "font.less"; +// Admin Interface styles +@import "admin/variables.less"; +@import "admin/widgets.less"; + + // remove warnings @fa-var-angle-right: ">"; @fa-var-angle-down: "\f107"; - -// bigger default font -@font-size-base: 14px; diff --git a/less/admin/variables.less b/less/admin/variables.less new file mode 100644 index 0000000..e30fd6c --- /dev/null +++ b/less/admin/variables.less @@ -0,0 +1,9 @@ +// Copyright (C) 2014 Ipsilon project Contributors, for licensee see COPYING + +// Basic variables +@state-enabled-bg: #ffffff; +@state-disabled-bg: #ededed; + +// bigger default font +@font-size-base: 14px; + diff --git a/less/admin/widgets.less b/less/admin/widgets.less new file mode 100644 index 0000000..fd68fed --- /dev/null +++ b/less/admin/widgets.less @@ -0,0 +1,86 @@ +// Copyright (C) 2014 Ipsilon project Contributors, for licensee see COPYING + +// Widgets + +// imitate tables +.ipsilon-row { + + // reuse bootstrap colors + border-top: 1px solid @table-border-color; + padding: @table-cell-padding; + + // to have equal height - basically a hack, increase if default elements are + // larger. Proper equal height would have to be done in JavaScript. + min-height: @input-height-large; +} + + +.ipsilon-row:last-child { + border-bottom: 1px solid @table-border-color; +} + +// add to div with 'ipsilon-row' class to change background +.hl-enabled { + // ugly color + background-color: @state-enabled-bg; +} + +.hl-disabled { + background-color: @state-disabled-bg; + + strong { + color: #555; + } +} + +// animation +// https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations + +@keyframes bgfadein { + from { + background-color: @state-disabled-bg; + } + to { + background-color: @state-enabled-bg; + } +} + +@keyframes bgfadeout { + from { + background-color: @state-enabled-bg; + } + to { + background-color: @state-disabled-bg; + } +} + +// add these classes to rows to hightlight them on load +.hl-enabled-new { + animation-duration: 2s; + animation-name: bgfadein; + animation-fill-mode: both +} + +.hl-disabled-new { + animation-duration: 2s; + animation-name: bgfadeout; + animation-fill-mode: both +} + +@keyframes flashout { + 0% { + background-color: @state-enabled-bg; + } + 50% { + background-color: @state-info-bg; + } + 100% { + background-color: @state-enabled-bg; + } +} + +.hl-enabled-flash { + animation-duration: 1s; + animation-name: flashout; + animation-fill-mode: both +} |