85 |
86 |
87 |
--------------------------------------------------------------------------------
/inc/libraries/epsilon-framework/assets/css/scss/controls/toggle.scss:
--------------------------------------------------------------------------------
1 | .wp-admin .checkbox_switch {
2 | display: inline-block;
3 | width: 100%;
4 | margin-bottom: 15px;
5 | }
6 |
7 | .customize-control-title.onoffswitch_label {
8 | width: 71%;
9 | }
10 |
11 | .onoffswitch_label {
12 | display: inline-block;
13 | vertical-align: top;
14 | margin-right: 21px;
15 | margin-top: -1px;
16 | }
17 |
18 | .onoffswitch {
19 | position: relative;
20 | width: 52px;
21 | display: inline-block;
22 | float: right;
23 | -webkit-user-select: none;
24 | -moz-user-select: none;
25 | -ms-user-select: none;
26 | }
27 |
28 | .onoffswitch-checkbox {
29 | display: none !important;
30 | }
31 |
32 | .onoffswitch-label {
33 | display: block;
34 | overflow: hidden;
35 | cursor: pointer;
36 | height: 22px;
37 | padding: 0;
38 | line-height: 19px;
39 | transition: background-color 0.2s ease-in;
40 | -webkit-border-radius: 11px;
41 | -moz-border-radius: 11px;
42 | border-radius: 30px;
43 | background-color: #c4c4c4;
44 | -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, .11);
45 | -moz-box-shadow: inset 0 2px 1px rgba(0, 0, 0, .11);
46 | box-shadow: inset 0 2px 1px rgba(0, 0, 0, .11);
47 | &:before {
48 | content: "";
49 | display: block;
50 | width: 18px;
51 | height: 18px;
52 | margin: 0;
53 | position: absolute;
54 | top: 2px;
55 | bottom: 0;
56 | right: 32px;
57 | background-color: #fff;
58 | -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .1);
59 | -moz-box-shadow: 0 0 3px rgba(0, 0, 0, .1);
60 | box-shadow: 0 0 3px rgba(0, 0, 0, .1);
61 | -webkit-border-radius: 10px;
62 | -moz-border-radius: 10px;
63 | border-radius: 10px;
64 | transition: all 0.2s ease-in 0s;
65 | }
66 | &:after {
67 | content: "OFF";
68 | display: block;
69 | color: #FFF;
70 | position: absolute;
71 | top: 2px;
72 | bottom: 2px;
73 | right: 6px;
74 | font-size: 11px;
75 | font-family: 'Arial';
76 | }
77 | }
78 |
79 |
80 |
81 | .onoffswitch-checkbox:checked + .onoffswitch-label {
82 | background-color: #3caf0e;
83 | }
84 |
85 | .onoffswitch-checkbox:checked + .onoffswitch-label,
86 | .onoffswitch-checkbox:checked + .onoffswitch-label:before {
87 | border-color: #3caf0e;
88 | }
89 |
90 | .onoffswitch-checkbox:checked + .onoffswitch-label:before {
91 | right: 2px;
92 | }
93 |
94 | .onoffswitch-checkbox:checked + .onoffswitch-label:after {
95 | content: "ON";
96 | display: block;
97 | color: #FFF;
98 | position: absolute;
99 | top: 2px;
100 | bottom: 2px;
101 | right: 27px;
102 | font-size: 11px;
103 | font-family: 'Arial';
104 | }
105 |
106 | .widget-content .customize-control-title {
107 | font-weight: 400;
108 | }
109 |
110 | .widget-content .customize-control-title.onoffswitch_label {
111 | width: 65%;
112 | margin-right: 26px;
113 | }
--------------------------------------------------------------------------------
/assets/less/mixins/forms.less:
--------------------------------------------------------------------------------
1 | // Form validation states
2 | //
3 | // Used in forms.less to generate the form validation CSS for warnings, errors,
4 | // and successes.
5 |
6 | .form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
7 | // Color the label and help text
8 | .help-block,
9 | .control-label,
10 | .radio,
11 | .checkbox,
12 | .radio-inline,
13 | .checkbox-inline,
14 | &.radio label,
15 | &.checkbox label,
16 | &.radio-inline label,
17 | &.checkbox-inline label {
18 | color: @text-color;
19 | }
20 | // Set the border and box shadow on specific inputs to match
21 | .form-control {
22 | border-color: @border-color;
23 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
24 | &:focus {
25 | border-color: darken(@border-color, 10%);
26 | @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
27 | .box-shadow(@shadow);
28 | }
29 | }
30 | // Set validation states also for addons
31 | .input-group-addon {
32 | color: @text-color;
33 | border-color: @border-color;
34 | background-color: @background-color;
35 | }
36 | // Optional feedback icon
37 | .form-control-feedback {
38 | color: @text-color;
39 | }
40 | }
41 |
42 |
43 | // Form control focus state
44 | //
45 | // Generate a customized focus state and for any input with the specified color,
46 | // which defaults to the `@input-border-focus` variable.
47 | //
48 | // We highly encourage you to not customize the default value, but instead use
49 | // this to tweak colors on an as-needed basis. This aesthetic change is based on
50 | // WebKit's default styles, but applicable to a wider range of browsers. Its
51 | // usability and accessibility should be taken into account with any change.
52 | //
53 | // Example usage: change the default blue border and shadow to white for better
54 | // contrast against a dark gray background.
55 | .form-control-focus(@color: @input-border-focus) {
56 | @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
57 | &:focus {
58 | border-color: @color;
59 | .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
60 | }
61 | }
62 |
63 | // Form control sizing
64 | //
65 | // Relative text size, padding, and border-radii changes for form controls. For
66 | // horizontal sizing, wrap controls in the predefined grid classes. `
 ); ?>/assets/images/phone_bck.png)
26 |