Skip to content

Commit a4387f1

Browse files
philwarehamphilwareham
committed
Latest build of theme (from Hive)
1 parent 8b514c8 commit a4387f1

File tree

14 files changed

+560
-563
lines changed

14 files changed

+560
-563
lines changed

‎dist/textpattern/jquery-ui.css‎

Lines changed: 242 additions & 250 deletions
Large diffs are not rendered by default.

‎dist/textpattern/jquery-ui.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.

‎src/sass/jquery-ui.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@
3737
@import "modules/accordion";
3838
@import "modules/autocomplete";
3939
@import "modules/button";
40+
@import "modules/checkboxradio";
41+
@import "modules/controlgroup";
4042
@import "modules/datepicker";
4143
@import "modules/dialog";
4244
@import "modules/menu";

‎src/sass/modules/_button.scss‎

Lines changed: 18 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
box-sizing: border-box;
4949
/* 4 */
5050
appearance: none;
51+
user-select: none;
5152

5253
&:hover {
5354
@include gradient-linear(lighten($color-button-gradient-from, 4%), lighten($color-button-gradient-to, 4%));
@@ -77,15 +78,6 @@
7778
}
7879
}
7980

80-
/**
81-
* Remove some styling from `a` links as buttons.
82-
*/
83-
84-
a.ui-button {
85-
color: $color-text-button;
86-
text-decoration: none;
87-
}
88-
8981
/**
9082
* Focus styling for buttons.
9183
*
@@ -95,7 +87,6 @@ a.ui-button {
9587
.ui-button.ui-state-focus {
9688
/* 1 */
9789
border-color: $color-link-focus !important;
98-
outline-width: 0;
9990
@if $flat-theme < 1 {
10091
box-shadow: $inset-highlighting;
10192
}
@@ -115,56 +106,18 @@ a.ui-button {
115106
*/
116107

117108
.ui-button-icon-only {
118-
width: 2.2em;
119-
}
120-
121-
/**
122-
* `button` elements seem to need a little more width.
123-
*
124-
* Example HTML:
125-
*
126-
* <button class="ui-button ui-button-icon-only">
127-
* <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
128-
* <span class="ui-button-text">Button one icon, no text</span>
129-
* </button>
130-
*/
131-
132-
button.ui-button-icon-only {
133-
width: 2.4em;
134-
}
135-
136-
/**
137-
* Double-icon-only button.
138-
*
139-
* To make room for the icon, a width needs to be set here.
140-
*
141-
* Example HTML:
142-
*
143-
* <a class="ui-button ui-button-icons-only">
144-
* <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
145-
* <span class="ui-button-text">Button two icons, no text</span>
146-
* <span class="ui-button-icon-secondary ui-icon ui-icon-disk"></span>
147-
* </a>
148-
*/
149-
150-
.ui-button-icons-only {
151-
width: 3.4em;
109+
width: 2.1538462em; // 28px / 13px
110+
text-indent: -9999px;
111+
white-space: nowrap;
112+
box-sizing: border-box;
152113
}
153114

154115
/**
155-
* `button` elements seem to need a little more width.
156-
*
157-
* Example HTML:
158-
*
159-
* <button class="ui-button ui-button-icons-only">
160-
* <span class="ui-button-icon-primary ui-icon ui-icon-locked"></span>
161-
* <span class="ui-button-text">Button two icons, no text</span>
162-
* <span class="ui-button-icon-secondary ui-icon ui-icon-disk"></span>
163-
* </button>
116+
* No icon support for input elements.
164117
*/
165118

166-
button.ui-button-icons-only {
167-
width: 3.7em;
119+
input.ui-button.ui-button-icon-only {
120+
text-indent: 0;
168121
}
169122

170123
@if $border-radius > 0 {
@@ -183,135 +136,26 @@ button.ui-button-icons-only {
183136

184137
}
185138

186-
/**
187-
* Button text element.
188-
*/
189-
190-
.ui-button .ui-button-text {
191-
display: block;
192-
}
193-
194-
.ui-button-text-only .ui-button-text {
195-
padding: 0;
196-
}
197-
198-
.ui-button-icon-only .ui-button-text,
199-
.ui-button-icons-only .ui-button-text {
200-
padding: 0;
201-
text-indent: -9999px;
202-
}
203-
204-
.ui-button-text-icon-primary .ui-button-text,
205-
.ui-button-text-icons .ui-button-text {
206-
padding-left: 16px;
207-
}
208-
209-
.ui-button-text-icon-secondary .ui-button-text,
210-
.ui-button-text-icons .ui-button-text {
211-
padding-right: 16px;
212-
}
213-
214139
/**
215140
* Button icon element(s).
216141
*/
217142

218-
.ui-button-icon-only .ui-icon,
219-
.ui-button-text-icon-primary .ui-icon,
220-
.ui-button-text-icon-secondary .ui-icon,
221-
.ui-button-text-icons .ui-icon,
222-
.ui-button-icons-only .ui-icon {
143+
.ui-button-icon-only .ui-icon {
223144
position: absolute;
224145
top: 50%;
225-
margin-top: -8px;
226-
}
227-
228-
.ui-button-icon-only .ui-icon {
229146
left: 50%;
147+
margin-top: -8px;
230148
margin-left: -8px;
231149
}
232150

233-
.ui-button-text-icon-primary .ui-button-icon-primary,
234-
.ui-button-text-icons .ui-button-icon-primary,
235-
.ui-button-icons-only .ui-button-icon-primary {
236-
left: 0.5em;
237-
}
238-
239-
.ui-button-text-icon-secondary .ui-button-icon-secondary,
240-
.ui-button-text-icons .ui-button-icon-secondary,
241-
.ui-button-icons-only .ui-button-icon-secondary {
242-
right: 0.5em;
243-
}
244-
245-
/**
246-
* Button sets.
247-
*
248-
* Example HTML:
249-
*
250-
* <p class="ui-buttonset">
251-
* <input id="check1" type="checkbox" class="ui-helper-hidden-accessible">
252-
* <label for="check1" class="ui-button ui-button-text-only ui-corner-left">
253-
* <span class="ui-button-text">A</span>
254-
* </label>
255-
* <input id="check2" type="checkbox" class="ui-helper-hidden-accessible">
256-
* <label for="check2" class="ui-button ui-button-text-only ui-state-active" aria-pressed="true">
257-
* <span class="ui-button-text">B</span>
258-
* </label>
259-
* <input id="check3" type="checkbox" class="ui-helper-hidden-accessible">
260-
* <label for="check3" class="ui-button ui-button-text-only ui-corner-right">
261-
* <span class="ui-button-text">C</span>
262-
* </label>
263-
* </p>
264-
*/
265-
266-
.ui-buttonset {
267-
margin-right: 0.28em;
268-
269-
.ui-button {
270-
margin-right: -0.28em;
271-
}
272-
}
273-
274-
/**
275-
* Checkboxes as buttons - pressed state.
276-
*
277-
* Example HTML:
278-
*
279-
* <input class="ui-helper-hidden-accessible" id="check" type="checkbox">
280-
* <label for="check" class="ui-button ui-button-text-only ui-state-active">
281-
* <span class="ui-button-text">Toggle</span>
282-
* </label>
283-
*/
284-
285-
label.ui-state-active {
286-
&.ui-button {
287-
@include gradient-linear($color-button-selected-gradient-from, $color-button-selected-gradient-to);
288-
289-
border-color: $color-button-selected-border;
290-
}
291-
292-
&.ui-button:hover {
293-
@include gradient-linear(lighten($color-button-selected-gradient-from, 3%), lighten($color-button-selected-gradient-to, 2%));
294-
295-
border-color: darken($color-button-selected-border, 15%);
296-
}
297-
298-
&.ui-button:active {
299-
@include gradient-linear(darken($color-button-selected-gradient-from, 5%), darken($color-button-selected-gradient-to, 5%));
300-
301-
border-color: darken($color-button-selected-border, 15%);
302-
}
151+
.ui-button.ui-icon-notext .ui-icon {
152+
padding: 0;
153+
text-indent: -9999px;
154+
white-space: nowrap;
303155
}
304156

305-
/**
306-
* Button RTL support.
307-
*/
308-
309-
[dir="rtl"] .ui-buttonset {
310-
margin-right: 0;
311-
margin-left: 0.5em;
312-
313-
.ui-button {
314-
margin-right: 0;
315-
margin-left: -0.28em;
316-
}
157+
input.ui-button.ui-icon-notext .ui-icon {
158+
padding: 0.4em 1em;
159+
text-indent: 0;
160+
white-space: normal;
317161
}

‎src/sass/modules/_checkboxradio.scss‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
/* Checkboxradio
2+
========================================================================== */
3+
4+
/**
5+
* jQuery UI Checkboxradio.
6+
*
7+
* Some classes and HTML elements generally added via JavaScript, more info -
8+
* https://jqueryui.com/checkboxradio/
9+
*
10+
* Example HTML:
11+
*
12+
* <fieldset>
13+
* <legend>Select a Location:</legend>
14+
* <label for="radio-1">New York</label>
15+
* <input id="radio-1" name="radio-1" type="radio">
16+
* <label for="radio-2">Paris</label>
17+
* <input id="radio-2" name="radio-1" type="radio">
18+
* <label for="radio-3">London</label>
19+
* <input id="radio-3" name="radio-1" type="radio">
20+
* </fieldset>
21+
*/
22+
23+
.ui-checkboxradio-label {
24+
.ui-icon-background {
25+
border: 0;
26+
border-radius: 0.12em;
27+
box-shadow: inset 1px 1px 1px #cccccc;
28+
}
29+
30+
.ui-state-highlight {
31+
border-color: $color-button-selected-gradient-to;
32+
background-color: $color-button-selected-gradient-from;
33+
}
34+
35+
// TODO: seems to be bug in Checkboxradio that puts ui-state-hover class on some radio button icons - this is a workaround.
36+
.ui-state-hover {
37+
border-color: inherit;
38+
background-color: inherit;
39+
}
40+
}
41+
42+
.ui-checkboxradio-radio-label {
43+
.ui-icon-background {
44+
width: 16px;
45+
height: 16px;
46+
border: 0;
47+
border-radius: 1em;
48+
overflow: visible;
49+
}
50+
51+
&.ui-checkboxradio-checked,
52+
&.ui-checkboxradio-checked:hover {
53+
.ui-icon {
54+
width: 8px;
55+
height: 8px;
56+
border-width: 4px;
57+
border-style: solid;
58+
background-image: none;
59+
}
60+
}
61+
}
62+
63+
.ui-checkboxradio-disabled {
64+
pointer-events: none;
65+
}
66+
67+
/**
68+
* Checkboxes as buttons - pressed state.
69+
*
70+
* Example HTML:
71+
*
72+
* <input class="ui-helper-hidden-accessible" id="check" type="checkbox">
73+
* <label for="check" class="ui-button ui-button-text-only ui-state-active">
74+
* <span class="ui-button-text">Toggle</span>
75+
* </label>
76+
*/
77+
78+
label.ui-state-active {
79+
&.ui-button {
80+
@include gradient-linear($color-button-selected-gradient-from, $color-button-selected-gradient-to);
81+
82+
border-color: $color-button-selected-border;
83+
}
84+
85+
&.ui-button:hover {
86+
@include gradient-linear(lighten($color-button-selected-gradient-from, 3%), lighten($color-button-selected-gradient-to, 2%));
87+
88+
border-color: darken($color-button-selected-border, 15%);
89+
}
90+
91+
&.ui-button:active {
92+
@include gradient-linear(darken($color-button-selected-gradient-from, 5%), darken($color-button-selected-gradient-to, 5%));
93+
94+
border-color: darken($color-button-selected-border, 15%);
95+
}
96+
}

0 commit comments

Comments
 (0)