Skip to content

Commit d9d131a

Browse files
author
shin
committed
upd: ui styles
1 parent fc4a674 commit d9d131a

File tree

12 files changed

+230
-145
lines changed

12 files changed

+230
-145
lines changed

‎cherry-core.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?php
22
/**
33
* Class Cherry Core
4-
* Version: 1.5.4.1
4+
* Version: 1.5.5
55
*
66
* @package Cherry_Framework
77
* @subpackage Class

‎modules/cherry-ui-elements/inc/ui-elements/ui-colorpicker/assets/min/ui-colorpicker.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎modules/cherry-ui-elements/inc/ui-elements/ui-colorpicker/assets/ui-colorpicker.scss

Lines changed: 33 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -3,95 +3,55 @@
33
@import "../../../../assets/sass/lock";
44

55
$font_size: 14px;
6-
.cherry-ui-elements-lock{
6+
7+
.cherry-ui-elements-lock {
78
opacity: 0.5;
89
cursor: no-drop;
910
pointer-events: none;
1011
filter: grayscale( 100% );
1112
}
12-
.cherry-ui-container{
13+
14+
.cherry-ui-container {
1315
margin: 10px 0 20px 0;
1416
}
15-
label.cherry-label{
17+
18+
label.cherry-label {
1619
margin: 0 0 5px 0;
1720
display: block;
1821
}
19-
.cherry-ui-colorpicker-wrapper{
20-
background-color: $grey_color_3;
21-
padding: 5px;
22-
max-width: 230px;
23-
height: 46px;
24-
box-sizing: border-box;
25-
}
26-
.cherry-ui-colorpicker-wrapper, .customize-control-content{
27-
& .wp-picker-container{
28-
display: block;
2922

30-
position: relative;
31-
z-index: 1000;
32-
&:active{
33-
display: block;
34-
}
35-
> .wp-color-result{
36-
margin: 0;
37-
border-radius: $border_radius_extra_small;
38-
display: block;
23+
.cherry-ui-colorpicker-wrapper {
24+
25+
.wp-picker-container {
26+
padding: 3px;
27+
border-radius: 3px;
28+
29+
.wp-color-result {
30+
width: 48px;
31+
height: 25px;
32+
padding: 0;
3933
border: none;
40-
box-shadow: none;
41-
height: auto;
42-
padding-left: 35px;
43-
&:after{
44-
padding:7px 0px;
45-
font-size: $font_size;
46-
border-left: none;
47-
};
48-
&:focus, &:active{
34+
margin: 0;
35+
box-shadow: inset 0 0 0 3px white;
36+
border: 1px solid #d5dadf;
37+
38+
&:focus {
39+
border: 1px solid #9ba7b3;
4940
outline: none;
50-
border: 1px solid rgba(41, 143, 252, .6);
51-
box-shadow: 0px 0px 2px rgba(41,143,252,0.6);
52-
}
53-
}
54-
> .wp-picker-input-wrap{
55-
display: none;
56-
display: flex;
57-
width: calc(100% - 40px);
58-
max-width: calc(100% - 40px);
59-
float: right;
60-
&:after{
61-
content: '.';
62-
clear: both;
63-
visibility: hidden;
64-
height: 0;
65-
};
66-
input[type="text"]{
67-
padding: 8px 10px 9px;
68-
font-size: $font_size;
69-
max-width: 100%;
70-
flex-grow: 1;
7141
}
72-
input[type="button"]{
73-
height: auto;
74-
border: none;
75-
border-radius: $border_radius_extra_small;
76-
box-shadow: none;
77-
padding: 6px 10px 7px;
78-
font-size: $font_size;
79-
margin-left: 5px;
80-
flex-shrink: 0;
42+
43+
&:after {
44+
display: none;
8145
}
8246
}
83-
&.wp-picker-active{
84-
> .wp-color-result{
85-
height: 35px;
86-
width: 0;
87-
display: inline-block;
88-
margin-right: 5px;
89-
&:after{
90-
display: none;
91-
}
92-
}
93-
> .wp-picker-input-wrap{
94-
display: inline-flex;
47+
48+
.wp-picker-input-wrap {
49+
margin: 1px 0;
50+
}
51+
52+
&.wp-picker-active {
53+
.wp-color-result {
54+
margin-right: 6px;
9555
}
9656
}
9757
}

‎modules/cherry-ui-elements/inc/ui-elements/ui-dimensions/assets/min/ui-dimensions.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎modules/cherry-ui-elements/inc/ui-elements/ui-dimensions/assets/ui-dimensions.scss

Lines changed: 96 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,100 @@ label.cherry-label{
1515
margin: 0 0 5px 0;
1616
display: block;
1717
}
18-
input.cherry-ui-text{
19-
@include input();
18+
19+
.cherry-ui-dimensions {
20+
max-width: 300px;
21+
22+
&__units {
23+
margin-right: 20%;
24+
display: flex;
25+
justify-content: flex-end;
26+
}
27+
28+
&__unit {
29+
color: #c2cbd2;
30+
cursor: pointer;
31+
font-size: 9px;
32+
text-transform: uppercase;
33+
margin: 0 2px;
34+
35+
&.is-active {
36+
color: #6d7882;
37+
text-decoration: underline;
38+
}
39+
40+
}
41+
42+
&__values {
43+
display: flex;
44+
border: 1px solid #a4afb7;
45+
border-radius: 3px;
46+
}
47+
48+
&__value-item {
49+
position: relative;
50+
width: 20%;
51+
52+
input {
53+
width: 100%;
54+
margin: 0;
55+
border: none;
56+
box-shadow: none;
57+
border-right: 1px solid #a4afb7;
58+
59+
&:first-child {
60+
border-radius: 3px 0 0 3px;
61+
}
62+
63+
&:focus {
64+
border-color: none;
65+
}
66+
}
67+
}
68+
69+
&__value-label {
70+
width: 100%;
71+
display: block;
72+
position: absolute;
73+
bottom: -18px;
74+
font-size: 9px;
75+
text-transform: uppercase;
76+
text-align: center;
77+
color: #d5dadf;
78+
}
79+
80+
&__is-linked {
81+
width: 20%;
82+
height: 28px;
83+
background-color: white;
84+
text-align: center;
85+
color: #a4afb7;
86+
cursor: pointer;
87+
display: flex;
88+
align-items: center;
89+
justify-content: center;
90+
border-radius: 0 3px 3px 0;
91+
92+
.link-icon {
93+
display: none;
94+
}
95+
96+
.unlink-icon {
97+
display: block;
98+
}
99+
100+
&.is-linked {
101+
color: white;
102+
background-color: #a4afb7;
103+
104+
.link-icon {
105+
display: block;
106+
}
107+
108+
.unlink-icon {
109+
display: none;
110+
}
111+
}
112+
}
113+
20114
}

‎modules/cherry-ui-elements/inc/ui-elements/ui-dimensions/ui-dimensions.php

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,17 @@ class UI_Dimensions extends UI_Element implements I_UI {
4040
'step' => 1,
4141
),
4242
),
43-
'label' => '',
44-
'class' => '',
45-
'master' => '',
46-
'required' => false,
47-
'lock' => false,
43+
'label' => '',
44+
'dimension_labels' => array(
45+
'top' => 'Top',
46+
'right' => 'Right',
47+
'bottom' => 'Bottom',
48+
'left' => 'Left',
49+
),
50+
'class' => '',
51+
'master' => '',
52+
'required' => false,
53+
'lock' => false,
4854
);
4955

5056
protected $default_value = array(
@@ -137,7 +143,7 @@ public function render() {
137143
public function get_fields() {
138144

139145
$hidden = '<input type="hidden" name="%1$s" id="%3$s" value="%2$s">';
140-
$number = '<input type="number" name="%1$s" id="%3$s" value="%2$s" min="%4$s" max="%5$s" step="%6$s" class="cherry-ui-dimensions__val%7$s">';
146+
$number = '<div class="cherry-ui-dimensions__value-item"><input type="number" name="%1$s" id="%3$s" value="%2$s" min="%4$s" max="%5$s" step="%6$s" class="cherry-ui-dimensions__val%7$s"><span class="cherry-ui-dimensions__value-label">%8$s</span></div>';
141147

142148
$value = $this->settings['value'];
143149

@@ -171,11 +177,12 @@ public function get_fields() {
171177
$this->settings['range'][ $value['units'] ]['min'],
172178
$this->settings['range'][ $value['units'] ]['max'],
173179
$this->settings['range'][ $value['units'] ]['step'],
174-
( true === $value['is_linked'] ? ' is-linked' : '' )
180+
( true === $value['is_linked'] ? ' is-linked' : '' ),
181+
$this->settings['dimension_labels'][ $field ]
175182
);
176183
}
177184
$result .= sprintf(
178-
'<span class="cherry-ui-dimensions__is-linked%s"><span class="dashicons dashicons-admin-links"></span></span>',
185+
'<div class="cherry-ui-dimensions__is-linked%s"><span class="dashicons dashicons-admin-links link-icon"></span><span class="dashicons dashicons-editor-unlink unlink-icon"></span></div>',
179186
( true === $value['is_linked'] ? ' is-linked' : '' )
180187
);
181188
$result .= '</div>';
@@ -238,13 +245,13 @@ public function get_id_attr( $name = '' ) {
238245
* @since 1.0.0
239246
*/
240247
public static function enqueue_assets() {
241-
/*wp_enqueue_style(
248+
wp_enqueue_style(
242249
'ui-dimensions',
243250
esc_url( Cherry_Core::base_url( 'inc/ui-elements/ui-dimensions/assets/min/ui-dimensions.min.css', Cherry_UI_Elements::$module_path ) ),
244251
array(),
245252
Cherry_UI_Elements::$core_version,
246253
'all'
247-
);*/
254+
);
248255

249256
wp_enqueue_script(
250257
'ui-dimensions',

0 commit comments

Comments
 (0)