tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds styling to collection collor picker.

This commit is contained in:
mateuswetah 2019-02-27 12:15:21 -03:00
parent 3e894e781c
commit 8f0cde36d4
4 changed files with 75 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
src/assets/js/spectrum.css
View File

@ -53,7 +53,7 @@ License: MIT
top:0;
right:0;
bottom:0;
left:84%;
left: 87%;
height: 100%;
}
@ -225,9 +225,9 @@ License: MIT
.sp-fill { padding-top: 60%; }
}
.sp-dragger {
border-radius: 5px;
height: 5px;
width: 5px;
border-radius: 10px;
height: 6px;
width: 6px;
border: 1px solid #fff;
background: #000;
cursor: pointer;
@ -255,12 +255,12 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
.sp-container {
border-radius: 0;
background-color: #ECECEC;
border: solid 1px #f0c49B;
padding: 0;
background-color: white;
border: solid 1px #dbdbdb;
padding: 10px;
}
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font: normal 12px "Roboto", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
@ -270,7 +270,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
margin-bottom: 3px;
}
.sp-color, .sp-hue, .sp-clear {
border: solid 1px #666;
border: none;
}
/* Input */
@ -284,36 +284,38 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
}
.sp-input {
font-size: 12px !important;
border: 1px inset;
border: 1px solid #dbdbdb;
padding: 4px 5px;
margin: 0;
width: 100%;
background:transparent;
border-radius: 3px;
color: #222;
background: white;
color: #454647;
}
.sp-input:focus {
border: 1px solid orange;
border: 1px solid #cbcbcb;
box-shadow: none;
}
.sp-input.sp-validation-error {
border: 1px solid red;
background: #fdd;
border: 1px solid #a23939;
background: #eadadc
}
.sp-picker-container , .sp-palette-container {
float:left;
position: relative;
padding: 10px;
padding: 12px;
padding-bottom: 300px;
margin-bottom: -290px;
}
.sp-picker-container {
width: 172px;
border-left: solid 1px #fff;
margin-left: 12px;
}
/* Palettes */
.sp-palette-container {
border-right: solid 1px #ccc;
.sp-palette-container .sp-palette-row-selection {
margin-top: 12px;
border-top: 1px solid #dbdbdb;
padding-top: 10px;
}
.sp-palette-only .sp-palette-container {
@ -328,7 +330,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
height: 15px;
margin: 3px;
cursor: pointer;
border:solid 2px transparent;
border: none;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
border-color: orange;
@ -358,44 +360,49 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
/* Buttons */
.sp-palette-button-container,
.sp-button-container {
margin-top: 12px;
float: right;
}
.sp-button-container {
margin-top: 12px;
}
/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
margin:0;
overflow:hidden;
cursor:pointer;
padding: 4px;
padding: 0px;
display:inline-block;
*zoom: 1;
*display: inline;
border: solid 1px #91765d;
background: #eee;
border: none;
border-radius: 42px;
background: transparent;
color: #333;
vertical-align: middle;
}
.sp-replacer:hover, .sp-replacer.sp-active {
border-color: #F0C49B;
color: #111;
}
.sp-replacer.sp-disabled {
cursor:default;
border-color: silver;
color: silver;
}
.sp-dd {
padding: 2px 0;
padding: 9px 4px;
height: 16px;
line-height: 16px;
float:left;
font-size:10px;
color: #298596;
}
.sp-preview {
position:relative;
width:25px;
height: 20px;
border: solid 1px #222;
width:32px;
height: 32px;
border-radius: 42px;
border: none;
margin-right: 5px;
float:left;
z-index: 0;
@ -406,10 +413,11 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
max-width: 220px;
}
.sp-palette .sp-thumb-el {
width:16px;
height: 16px;
margin:2px 1px;
border: solid 1px #d0d0d0;
width: 32px;
height: 32px;
margin: 3px;
border: none;
border-radius: 42px;
}
.sp-container {
@ -419,57 +427,35 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
/* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-container button {
background-color: #eeeeee;
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
border: 1px solid #ccc;
border-bottom: 1px solid #bbb;
border-radius: 3px;
color: #333;
background-color: #25a189;
border: none;
border-radius: 4px;
color: white;
font-size: 14px;
line-height: 1;
padding: 5px 4px;
padding: 8px;
text-align: center;
text-shadow: 0 1px 0 #eee;
text-shadow: none;
vertical-align: middle;
}
.sp-container button:hover {
background-color: #dddddd;
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd;
}
.sp-container button:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.sp-cancel {
font-size: 11px;
color: #d93f3f !important;
margin:0;
padding:2px;
margin-right: 5px;
background-color: transparent;
border-radius: 4px;
color: #a23939 !important;
border: 1px solid #454647;
padding: 4px 8px;
font-size: 14px;
margin-right: 8px;
vertical-align: middle;
text-decoration:none;
text-decoration: none;
}
.sp-cancel:hover {
color: #d93f3f !important;
text-decoration: underline;
color: #a23939 !important;
cursor: pointer;
text-decoration: none;
}
@ -484,6 +470,7 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
display:block;
position:absolute;
border-radius: 42px;
top:0;left:0;bottom:0;right:0;
}

4
src/functions/class-tainacanthemecollectioncolor.php
View File

@ -66,7 +66,6 @@ class TainacanThemeCollectionColor {
</div>
</span>
<div class="control is-clearfix">
<p style="font-weight: 600;"><?php _e( 'Picker color', 'tainacan-interface' ); ?></p>
<input type="text" value="" id="colorpicker" name="<?php echo $this->tainacan_background_color; ?>">
</div>
</div>
@ -94,7 +93,8 @@ class TainacanThemeCollectionColor {
value="#fff"
name="<?php echo $this->tainacan_text_color; ?>"
id="white" checked>
<label for="white" id="color-white" class="color-text"><?php _e( 'White', 'tainacan-interface' ); ?></label>
<label for="white" id="color-white" class="color-text">
<?php _e( 'White', 'tainacan-interface' ); ?></label>
<input
type="radio"
value="#000"

6
src/functions/collection-color.css
View File

@ -45,6 +45,9 @@
color: #fff;
margin-right: 1rem;
padding: 0.8rem;
border-radius: 3px;
padding: 0.7rem 1.25rem;
font-size: 0.875rem;
}
.tainacan-collection--change-text-color .color-text[for="black"] {
@ -52,4 +55,7 @@
color: #000;
margin-right: 1rem;
padding: 0.8rem;
border-radius: 3px;
padding: 0.7rem 1.25rem;
font-size: 0.875rem;
}

10
src/functions/collection-color.js
View File

@ -1,6 +1,9 @@
jQuery( document ).on( 'tainacan-collection-hook-reload', function() {
jQuery( "#colorpicker" ).spectrum({
showPalette: true,
showInput: true,
showButtons: false,
preferredFormat: "hex",
cancelText: tainacan_colorPickerVars.cancelText,
chooseText: tainacan_colorPickerVars.chooseText,
togglePaletteMoreText: tainacan_colorPickerVars.togglePaletteMoreText,
@ -8,9 +11,10 @@ jQuery( document ).on( 'tainacan-collection-hook-reload', function() {
clearText: tainacan_colorPickerVars.clearText,
noColorSelectedText: tainacan_colorPickerVars.noColorSelectedText,
palette: [
['#298596', '#a55032', '#af2e48', '#c58738', '#4ebfa7'],
['#288698', '#2db4c1', '#499dd6', '#4751a3', '#955ba5'],
['#2c2d2d']
['#754E24', '#8c442c', '#A12B42', '#955ba5', '#4751a3'],
['#D3A978', '#D88C74', '#DB7B8F', '#BE9BCA', '#A5ACDA'],
['#1D5C86', '#185F6D', '#205E6F', '#255F56', '#2c2d2d'],
['#6CADDF', '#6ECBDE', '#7CCED0', '#7ECDC4', '#cbcbcb']
],
move: function( color ) {
jQuery( '.color-text' ).css( 'background-color', color.toHexString() );