codeninjasllc/discourse
1
0
Fork 0
mirror of https://github.com/codeninjasllc/discourse.git synced 2024-11-27 17:46:05 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add color boxes on the theme chooser page

Browse source 
TODO: filter down to the colors actually used
This commit is contained in:
Kane York 2015-08-20 13:30:34 -07:00
parent 7147c0e8af
commit 3eb2668fcf
2 changed files with 141 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
app/assets/javascripts/admin/templates/customize_colors.hbs
View file

@ -40,6 +40,93 @@
</div>
</div>
<div class="greyexplain">
Various greys used throught the UI.
<div><div class="cboxcontainer primary">
<div class="cbox0"></div>
<div class="cbox5"></div>
<div class="cbox10"></div>
<div class="cbox15"></div>
<div class="cbox20"></div>
<div class="cbox25"></div>
<div class="cbox30"></div>
<div class="cbox40"></div>
<div class="cbox50"></div>
<div class="cbox60"></div>
<div class="cbox70"></div>
<div class="cbox75"></div>
<div class="cbox80"></div>
<div class="cbox85"></div>
<div class="cbox90"></div>
<div class="cbox95"></div>
<div class="cbox100"></div>
choose-grey()
</div></div>
<div><div class="cboxcontainer secondary">
<div class="cbox0"></div>
<div class="cbox5"></div>
<div class="cbox10"></div>
<div class="cbox15"></div>
<div class="cbox20"></div>
<div class="cbox25"></div>
<div class="cbox30"></div>
<div class="cbox40"></div>
<div class="cbox50"></div>
<div class="cbox60"></div>
<div class="cbox70"></div>
<div class="cbox75"></div>
<div class="cbox80"></div>
<div class="cbox85"></div>
<div class="cbox90"></div>
<div class="cbox95"></div>
<div class="cbox100"></div>
choose-grey()
</div></div>
<div><div class="cboxcontainer primary">
<div class="dbox100"></div>
<div class="dbox95"></div>
<div class="dbox90"></div>
<div class="dbox85"></div>
<div class="dbox80"></div>
<div class="dbox75"></div>
<div class="dbox70"></div>
<div class="dbox60"></div>
<div class="dbox50"></div>
<div class="dbox40"></div>
<div class="dbox30"></div>
<div class="dbox25"></div>
<div class="dbox20"></div>
<div class="dbox15"></div>
<div class="dbox10"></div>
<div class="dbox5"></div>
<div class="dbox0"></div>
dark-light-diff()
</div></div>
<div><div class="cboxcontainer secondary">
<div class="dbox100"></div>
<div class="dbox95"></div>
<div class="dbox90"></div>
<div class="dbox85"></div>
<div class="dbox80"></div>
<div class="dbox75"></div>
<div class="dbox70"></div>
<div class="dbox60"></div>
<div class="dbox50"></div>
<div class="dbox40"></div>
<div class="dbox30"></div>
<div class="dbox25"></div>
<div class="dbox20"></div>
<div class="dbox15"></div>
<div class="dbox10"></div>
<div class="dbox5"></div>
<div class="dbox0"></div>
dark-light-diff()
</div></div>
</div>
{{#if colors.length}}
<table class="table colors">
<thead>

54
app/assets/stylesheets/common/admin/admin_base.scss
View file

@ -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%); }