Merge the color schemes component from MP6. Introduces Light, Blue, and Midnight.

Color scheme selection on your own profile page gives you a preview and autosaves the selection.

Also introduces the usage of a preprocessor for core files, namely Sass. For 3.8, we will not expand its implementation past the color schemes. This does require Ruby as well as Sass 3.3.0+ due to the usage of the sourcemap option.

Note that only the default color scheme is available when running out of src. Use build to test the rest as well as the color picker.

props ryelle, melchoyce, tillkruess, drw158, littlethingsstudio, helen. see #25858, #22862.


git-svn-id: https://develop.svn.wordpress.org/trunk@26137 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi
2013-11-13 19:37:10 +00:00
parent d4802f6c82
commit e84e1e8791
8 changed files with 311 additions and 45 deletions

View File

@@ -5636,12 +5636,6 @@ span.imgedit-scale-warn {
width: auto;
}
.form-table div.color-option {
display: block;
clear: both;
margin-top: 12px;
}
.form-table input.tog {
margin-top: 2px;
margin-right: 2px;
@@ -5653,21 +5647,6 @@ span.imgedit-scale-warn {
margin-bottom: 0;
}
.form-table table.color-palette {
vertical-align: bottom;
float: left;
margin: -12px 3px 11px;
}
.form-table .color-palette td {
border-width: 1px 1px 0;
border-style: solid solid none;
height: 10px;
line-height: 20px;
width: 10px;
}
.form-table td fieldset label {
margin: 0.25em 0 0.5em !important;
display: inline-block;
@@ -6330,6 +6309,120 @@ h2 .nav-tab {
width: 25em;
}
.picker-dropdown {
background: #fcfcfc;
border: 1px solid #dedede;
margin-right: 12%;
max-width: 270px;
position: relative;
width: auto;
}
.picker-dropdown.dropdown-current {
padding: 20px;
margin-bottom: 15px;
cursor: pointer;
}
.picker-dropdown.dropdown-container {
display: none;
position: absolute;
width: 340px;
border-top: none;
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.picker-expanded .picker-dropdown.dropdown-container {
display: block;
}
.picker-dropdown.dropdown-container:before,
.picker-dropdown.dropdown-container:after {
content: "\0020";
display: block;
position: absolute;
top: -10px;
left: 150px;
z-index: 2;
width: 0;
height: 0;
overflow: hidden;
border: solid 11px transparent;
border-top: 0;
border-bottom-color: #fefefe;
}
.picker-dropdown.dropdown-container:before {
top: -11px;
z-index: 1;
border-bottom-color: #dedede;
}
.picker-dropdown-arrow {
position: absolute;
top: -1px;
right: -42px;
display: block;
width: 40px;
height: 100%;
background: white;
text-align: center;
border: 1px solid #dedede;
border-left-width: 0;
cursor: pointer;
}
.picker-dropdown-arrow:before {
font: 20px/91px dashicons;
content: '\f140';
}
.picker-expanded .picker-dropdown-arrow:before {
content: '\f142';
}
.color-option {
display: block;
padding: 20px;
border-top: 1px solid #dedede;
}
.color-option:hover,
.color-option.selected {
background: #f2f8fa;
}
.color-palette {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
.color-palette td {
height: 20px;
padding: 0;
border: none;
}
.color-option {
cursor: pointer;
}
.no-js .dropdown-current {
display: none;
}
.no-js .dropdown-container {
display: block;
position: static;
}
.no-js .dropdown-container:before,
.no-js .dropdown-container:after {
display: none;
}
/*------------------------------------------------------------------------------
19.0 - Tools
------------------------------------------------------------------------------*/