Skip to content

Commit c753eeb

Browse files
dmhendricksdmhendricks
committed
Added various Carbon Fields CSS classes
1 parent 2417b76 commit c753eeb

4 files changed

Lines changed: 155 additions & 6 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,8 @@ See the [Getting Started](https://github.com/dmhendricks/wordpress-base-plugin/w
7373

7474
## Future Plans
7575

76-
* Refactor the Plugin base class
76+
* Refactor the Plugin and Loader classes
7777
* Add [phpdotenv](https://github.com/etelford/phpdotenv) support
78-
* Add some Carbon Fields CSS helper classes
7978
* Switch to npm and WebPack for frontend dependency management
8079

8180
## Change Log
@@ -91,6 +90,7 @@ Release changes are noted on the [Releases](https://github.com/dmhendricks/wordp
9190
* Added `get_wpsac_plugin_option()` example to Plugin class
9291
* Updated JS injection to use wordpress-toolkit [ScriptObject](https://github.com/dmhendricks/wordpress-toolkit/wiki/ScriptObject)
9392
* Added Customizer options example (via [inc2734/wp-customizer-framework](https://github.com/inc2734/wp-customizer-framework))
93+
* Added Carbon Fields custom CSS classes
9494

9595
## Screenshot
9696

‎app/Settings/Carbon_Page.php‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,23 +58,36 @@ private function create_tabbed_options_page() {
5858
),
5959
Field::make( 'separator', $this->prefix( 'general_separator_examples' ), __( 'Example Fields', self::$textdomain ) )
6060
->help_text( __( 'These fields are just provided as examples and are not used by any logic in the plugin.', self::$textdomain ) ),
61-
Field::make( 'text', $this->prefix( 'blog_title' ), __( 'Blog Title', self::$textdomain ) ),
61+
Field::make( 'text', $this->prefix( 'blog_title' ), __( 'Blog Title', self::$textdomain ) )
62+
->set_classes( 'carbon-fields-custom-input--1-2' ),
6263
Field::make( 'text', $this->prefix( 'email' ), __( 'Your E-mail Address', self::$textdomain ) )
6364
->set_attribute( 'type', 'email' )
65+
->set_classes( 'carbon-fields-custom-field-email carbon-fields-custom-input--1-3' )
6466
->help_text( __( 'This input field is an HTML5 <tt>email</tt> type.', self::$textdomain ) ),
6567
Field::make( 'text', $this->prefix( 'web_site_url' ), __( 'Web Site Address', self::$textdomain ) )
66-
->set_attribute( 'type', 'url' )->set_attribute( 'placeholder', site_url() )
67-
->help_text( __( 'This input field is an HTML5 <tt>url</tt> type.', self::$textdomain ) ),
68+
->set_attribute( 'type', 'url' )
69+
->set_attribute( 'placeholder', site_url() )
70+
->set_classes( 'carbon-fields-custom-field-url' )
71+
->help_text( __( 'This input field is an HTML5 <tt>url</tt> type. It is also wrapped in a <tt>.carbon-fields-custom-field-url</tt> CSS class to add a background globe dashicon.', self::$textdomain ) ),
6872
Field::make( 'text', $this->prefix( 'phone' ), __( 'Phone Number', self::$textdomain ) )
73+
->set_classes( 'carbon-fields-custom-field-tel carbon-fields-custom-input-smaller' )
6974
->set_attribute( 'type', 'tel' ),
7075
Field::make( 'date_time', $this->prefix( 'date_time' ), __( 'Date & Time', self::$textdomain ) ),
71-
Field::make( 'radio', $this->prefix( 'radio_buttons' ), __( 'Menu Position', self::$textdomain ) )
76+
Field::make( 'radio', $this->prefix( 'menu_position' ), __( 'Menu Position', self::$textdomain ) )
7277
->add_options(array(
7378
'none' => __( 'Disabled', self::$textdomain ),
7479
'top' => __( 'Top (Default)', self::$textdomain ),
7580
'left' => __( 'Left', self::$textdomain )
7681
))
7782
->set_default_value( 'top' ),
83+
Field::make( 'radio', $this->prefix( 'search_position' ), __( 'Search Box Location', self::$textdomain ) )
84+
->add_options(array(
85+
'header' => __( 'Header', self::$textdomain ),
86+
'side' => __( 'Sidebar', self::$textdomain ),
87+
'flyout' => __( 'Flyout Menu', self::$textdomain )
88+
))
89+
->set_classes( 'carbon-fields-custom-radio-horizontal' )
90+
->help_text( __( 'Example of horizontally-aligned radio buttons.', self::$textdomain ) ),
7891
Field::make( 'complex', $this->prefix( 'slides' ), self::$config->get( 'plugin/meta/Name' ) . ' ' . __( 'Slides', self::$textdomain ) )
7992
->set_datastore( new Serialized_Theme_Options_Datastore() )
8093
->add_fields( array(
@@ -83,6 +96,7 @@ private function create_tabbed_options_page() {
8396
)
8497
),
8598
Field::make( 'select', $this->prefix( 'select_dropdown' ), __( 'Favorite Continent', self::$textdomain ) )
99+
->set_classes( 'carbon-fields-custom-input-small' )
86100
->add_options(array(
87101
'aria' => __( 'Asia', self::$textdomain ),
88102
'africa' => __( 'Africa', self::$textdomain ),

‎src/scss/_carbon-fields.scss‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
/*
2+
* Carbon Fields style
3+
*/
4+
5+
div[id^='carbon_fields_container_'] {
6+
7+
// Change the default Carbon Fields H3 header font size
8+
div.carbon-separator {
9+
h3 {
10+
font-size: 1.6em !important;
11+
}
12+
}
13+
14+
// Add a background globe icon to URL input fields
15+
.carbon-fields-custom-field-url, .carbon-fields-custom-field-email, .carbon-fields-custom-field-tel {
16+
17+
input {
18+
padding-left: 29px;
19+
}
20+
21+
.field-holder {
22+
23+
&:before {
24+
position: absolute;
25+
font-family: 'dashicons';
26+
color: #D4D4D4;
27+
font-size: 1.2em;
28+
padding: 5px 8px;
29+
}
30+
31+
}
32+
33+
}
34+
35+
// Input field background dashicons
36+
.carbon-fields-custom-field-url {
37+
.field-holder:before {
38+
content: '\f319';
39+
}
40+
}
41+
42+
.carbon-fields-custom-field-email {
43+
.field-holder:before {
44+
content: '\f466';
45+
}
46+
}
47+
48+
.carbon-fields-custom-field-tel {
49+
.field-holder:before {
50+
content: '\f525';
51+
}
52+
}
53+
54+
}
55+
56+
// Custom Carbon Custom Field Classes
57+
@media (min-width: 783px) {
58+
59+
div[id^='carbon_fields_container_'] {
60+
61+
// Radio buttons - horizontal alignment
62+
.carbon-fields-custom-radio-horizontal {
63+
li {
64+
float: left;
65+
padding-right: .75rem;
66+
}
67+
div {
68+
clear: left;
69+
}
70+
&:after {
71+
clear: both;
72+
}
73+
74+
.carbon-help-text {
75+
clear: left;
76+
}
77+
}
78+
79+
// Text input field width
80+
.carbon-fields-custom-input-tiny {
81+
input, select {
82+
width: 55px;
83+
}
84+
}
85+
86+
.carbon-fields-custom-input-smaller {
87+
input, select {
88+
width: 180px;
89+
max-width: 100%;
90+
}
91+
}
92+
93+
.carbon-fields-custom-input-small {
94+
input, select {
95+
width: 225px;
96+
max-width: 100%;
97+
}
98+
}
99+
100+
.carbon-fields-custom-input-medium {
101+
input, select {
102+
width: 355px;
103+
max-width: 100%;
104+
}
105+
}
106+
107+
.carbon-fields-custom-input-large {
108+
input, select {
109+
width: 575px;
110+
max-width: 100%;
111+
}
112+
}
113+
114+
.carbon-fields-custom-input--1-2 {
115+
input, select {
116+
width: 50%;
117+
}
118+
}
119+
120+
.carbon-fields-custom-input--1-3 {
121+
input, select {
122+
width: 33%;
123+
}
124+
}
125+
126+
.carbon-fields-custom-input--2-3 {
127+
input, select {
128+
width: 66%;
129+
}
130+
}
131+
132+
}
133+
134+
}

‎src/scss/admin.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
*/
44

55
@import "variables";
6+
@import "carbon-fields";
67

78
/*
89
#wpadminbar {

0 commit comments

Comments
 (0)