From 3eb2668fcf617518baab17dd7d0078f0a4b2a530 Mon Sep 17 00:00:00 2001 From: Kane York Date: Thu, 20 Aug 2015 13:30:34 -0700 Subject: [PATCH] Add color boxes on the theme chooser page TODO: filter down to the colors actually used --- .../admin/templates/customize_colors.hbs | 87 +++++++++++++++++++ .../stylesheets/common/admin/admin_base.scss | 54 ++++++++++++ 2 files changed, 141 insertions(+) diff --git a/app/assets/javascripts/admin/templates/customize_colors.hbs b/app/assets/javascripts/admin/templates/customize_colors.hbs index 85fc27abb..439e819f4 100644 --- a/app/assets/javascripts/admin/templates/customize_colors.hbs +++ b/app/assets/javascripts/admin/templates/customize_colors.hbs @@ -40,6 +40,93 @@ +
+ Various greys used throught the UI. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ choose-grey() +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ choose-grey() +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ dark-light-diff() +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ dark-light-diff() +
+
+ {{#if colors.length}} diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss index a988f5438..7043a1349 100644 --- a/app/assets/stylesheets/common/admin/admin_base.scss +++ b/app/assets/stylesheets/common/admin/admin_base.scss @@ -1663,3 +1663,57 @@ table#user-badges { .mobile-view .full-width { margin: 0; } + +.cboxcontainer { + display: inline-block; + padding: 8px; + padding-bottom: 4px; + + * { + width: 20px; + height: 20px; + display: inline-block; + border: 1px solid $tertiary; + } + &.primary { + background: $primary; + } + &.secondary { + background: $secondary; + } +} +.cbox0 { background: choose-grey(0%); } +.cbox10 { background: choose-grey(10%); } +.cbox20 { background: choose-grey(20%); } +.cbox30 { background: choose-grey(30%); } +.cbox40 { background: choose-grey(40%); } +.cbox50 { background: choose-grey(50%); } +.cbox60 { background: choose-grey(60%); } +.cbox70 { background: choose-grey(70%); } +.cbox80 { background: choose-grey(80%); } +.cbox90 { background: choose-grey(90%); } +.cbox100 { background: choose-grey(100%); } +.cbox5 { background: choose-grey(5%); } +.cbox15 { background: choose-grey(15%); } +.cbox25 { background: choose-grey(25%); } +.cbox95 { background: choose-grey(95%); } +.cbox85 { background: choose-grey(85%); } +.cbox75 { background: choose-grey(75%); } + +.dbox0 { background: dark-light-diff($primary, $secondary, 0%, -0%); } +.dbox10 { background: dark-light-diff($primary, $secondary, 10%, -10%); } +.dbox20 { background: dark-light-diff($primary, $secondary, 20%, -20%); } +.dbox30 { background: dark-light-diff($primary, $secondary, 30%, -30%); } +.dbox40 { background: dark-light-diff($primary, $secondary, 40%, -40%); } +.dbox50 { background: dark-light-diff($primary, $secondary, 50%, -50%); } +.dbox60 { background: dark-light-diff($primary, $secondary, 60%, -60%); } +.dbox70 { background: dark-light-diff($primary, $secondary, 70%, -70%); } +.dbox80 { background: dark-light-diff($primary, $secondary, 80%, -80%); } +.dbox90 { background: dark-light-diff($primary, $secondary, 90%, -90%); } +.dbox100 { background: dark-light-diff($primary, $secondary, 100%, -100%); } +.dbox5 { background: dark-light-diff($primary, $secondary, 5%, -5%); } +.dbox15 { background: dark-light-diff($primary, $secondary, 15%, -15%); } +.dbox25 { background: dark-light-diff($primary, $secondary, 25%, -25%); } +.dbox95 { background: dark-light-diff($primary, $secondary, 95%, -95%); } +.dbox85 { background: dark-light-diff($primary, $secondary, 85%, -85%); } +.dbox75 { background: dark-light-diff($primary, $secondary, 75%, -75%); }