UX: Category colorpicker restyle
This commit is contained in:
Kris
parent
3faa022c6f
commit
ab1e5732d7
Binary file not shown.
|
Before Width: | Height: | Size: 716 B |
|
|
@ -44,16 +44,20 @@
|
|||
|
||||
<div class='input-prepend input-append' style="margin-top: 10px;">
|
||||
<span class='color-title'>{{i18n 'category.background_color'}}:</span>
|
||||
<div class="colorpicker-wrapper">
|
||||
<span class='add-on'>#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}}
|
||||
{{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='input-prepend input-append'>
|
||||
<span class='color-title'>{{i18n 'category.foreground_color'}}:</span>
|
||||
<div class="colorpicker-wrapper">
|
||||
<span class='add-on'>#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
|
||||
{{color-picker colors=foregroundColors value=category.text_color id='edit-text-color'}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{/unless}}
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -2,29 +2,49 @@
|
|||
|
||||
.category-color-editor {
|
||||
input {
|
||||
width: 70px;
|
||||
margin-right: 10px;
|
||||
width: 5.5em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.color-title {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
display: block;
|
||||
margin: 1em 0 0.25em;
|
||||
}
|
||||
|
||||
.colorpicker-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input,
|
||||
.add-on {
|
||||
align-self: flex-start;
|
||||
margin-bottom: 0.125em;
|
||||
}
|
||||
}
|
||||
|
||||
.colors-container {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-top: 4px;
|
||||
max-width: 240px;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.colorpicker {
|
||||
border: 1px solid $primary-low;
|
||||
margin-right: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 0.286em;
|
||||
&.used-color {
|
||||
background: image-url("chosen-sprite.png") -19px 13px;
|
||||
position: relative;
|
||||
margin: 0 0.125em 0.25em;
|
||||
border: 1px solid $primary-medium;
|
||||
width: 1.25em;
|
||||
height: 1.2em;
|
||||
padding: 0;
|
||||
flex: 0 0 auto;
|
||||
&.used-color:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: fontawesome;
|
||||
content: "\f00c";
|
||||
height: 100%;
|
||||
width: calc(1.25em - 2px);
|
||||
color: rgba($secondary, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -211,6 +211,52 @@ input {
|
|||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
&-prepend,
|
||||
&-append {
|
||||
margin-bottom: 5px;
|
||||
input[class*="span"] {
|
||||
display: inline-block;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
border-radius: 0;
|
||||
&:focus {
|
||||
z-index: z("base") + 1;
|
||||
}
|
||||
}
|
||||
.add-on {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
padding: 0 0.5em;
|
||||
height: 28px;
|
||||
background-color: $primary-low;
|
||||
border: 1px solid $primary-medium;
|
||||
}
|
||||
.add-on,
|
||||
.btn {
|
||||
&:first-child {
|
||||
margin-right: -1px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-left: -1px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-prepend {
|
||||
.add-on,
|
||||
.btn {
|
||||
margin-right: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
background-color: $secondary;
|
||||
|
|
|
|||
|
|
@ -103,6 +103,7 @@
|
|||
background-color: $secondary;
|
||||
background-clip: padding-box;
|
||||
box-shadow: shadow("modal");
|
||||
padding: 1px;
|
||||
|
||||
@media screen and (min-width: 475px) {
|
||||
min-width: 475px;
|
||||
|
|
|
|||
|
|
@ -124,101 +124,6 @@ input {
|
|||
&-xxlarge {
|
||||
width: 530px;
|
||||
}
|
||||
|
||||
&-prepend,
|
||||
&-append {
|
||||
margin-bottom: 5px;
|
||||
|
||||
input[class*="span"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
&:focus {
|
||||
z-index: z("base") + 1;
|
||||
}
|
||||
}
|
||||
|
||||
.add-on {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: 18px;
|
||||
min-width: 16px;
|
||||
padding: 4px 5px;
|
||||
font-weight: normal;
|
||||
line-height: $line-height-medium;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background-color: $secondary;
|
||||
border: 1px solid $primary-low;
|
||||
}
|
||||
|
||||
.add-on,
|
||||
.btn {
|
||||
margin-left: -1px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $danger-medium;
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
&-prepend {
|
||||
.add-on,
|
||||
.btn {
|
||||
margin-right: -1px;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-append {
|
||||
input,
|
||||
select {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.add-on,
|
||||
.btn {
|
||||
&:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-prepend.input-append {
|
||||
input,
|
||||
select {
|
||||
border-radius: 0;
|
||||
background-color: $primary-low;
|
||||
border-color: $primary-low;
|
||||
}
|
||||
|
||||
.add-on,
|
||||
.btn {
|
||||
&:first-child {
|
||||
margin-right: -1px;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-on,
|
||||
.btn {
|
||||
&:last-child {
|
||||
margin-left: -1px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls-dropdown {
|
||||
|
|
|
|||
Loading…
Reference in New Issue