Skip to content

Commit 7a5779f

Browse files
author
Jonatan E. Salas
authored
Merge pull request #16 from ZhangScott/master
Make the component themable. Additionally, when I working on this ver…
2 parents eb4414f + f5198b7 commit 7a5779f

File tree

13 files changed

+202
-10
lines changed

13 files changed

+202
-10
lines changed

‎demo/less/Sample.theme.less

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/*Form Container*/
2+
@form-background-color: white;
3+
@form-padding: 6px;
4+
@form-border-width: 1px;
5+
@form-border-color: white;
6+
@form-bottom-margin: 20px;
7+
8+
/*Common input style definition*/
9+
@font-family: 'Arial, Helvetica, sans-serif';
10+
@font-size: 16px;
11+
@font-weight: normal;
12+
@font-style: normal;
13+
@input-control-height: 32px;
14+
@control-inside-font: 16px Arial;
15+
@border-width: 1px;
16+
@border-radius-base: 4px;
17+
@btn-border-radius-base: @border-radius-base;
18+
@input-border-radius: @border-radius-base;
19+
20+
/*button*/
21+
@btn-border-radius-base: @border-radius-base;
22+
@btn-height: auto;
23+
@btn-width: auto;
24+
@btn-padding-top: 3.80101px;
25+
@btn-padding-bottom: 3.80101px;
26+
@btn-padding-left: 11.403px;
27+
@btn-padding-right: 11.403px;
28+
@btn-margin-right: 5px;
29+
30+
/*Calender Setting*/
31+
@week-font-size: @font-size;
32+
@day-font-size: @font-size;
33+
@td-height: 20.5px;
34+
@td-width: 21.5px;
35+
36+
/*Label Padding Setting*/
37+
@label-padding-top: 3px;
38+
39+
/*TextArea Setting*/
40+
@textarea-height: 75px;
41+
42+
/*Array Container Setting*/
43+
@array-container-warning-padding: 15px;
44+
@array-container-warining-border: 0.571px;
45+
@array-container-margin-bottom: 20px;

‎demo/less/styles.less

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@
44
@import '../../node_modules/react-select/dist/react-select.css';
55
@import '../../src/styles/styles';
66
@import '../../src/styles/styles-defaultfactories';
7-
@import './LiveSchemaEditor.less';
7+
@import './LiveSchemaEditor.less';
8+
@import './Sample.theme.less';

‎src/styles/defaultFactories/Button.less

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.btn-sm, .btn-group-sm > .btn {
2+
border-radius: @btn-border-radius-base;
3+
height: @btn-height;
4+
width: @btn-width;
5+
padding-top: @btn-padding-top;
6+
padding-bottom: @btn-padding-bottom;
7+
padding-left: @btn-padding-left;
8+
padding-right: @btn-padding-right;
9+
margin-right: @btn-margin-right;
10+
}

‎src/styles/defaultFactories/Checkbox.less

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,14 @@
66

77
.form-horizontal .cb-fix {
88
margin-bottom: 7px !important;
9+
}
10+
11+
.metaform-group-content .col-md-12 .cb-fix label{
12+
font-size: @font-size;
13+
font-family: @font-family;
14+
font-weight: @font-weight;
15+
}
16+
17+
input[type="checkbox"] {
18+
margin: 2.0px 0 0;
919
}

‎src/styles/defaultFactories/DateTimePicker.less

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,37 @@
11
.has-error .rw-datetimepicker {
2-
border-color: @state-danger-text
2+
border-color: @state-danger-text;
3+
}
4+
5+
.rw-datetimepicker{
6+
font:@control-inside-font;
7+
border-bottom-left-radius: @border-radius-base;
8+
border-top-left-radius: @border-radius-base;
9+
border-bottom-right-radius: @border-radius-base;
10+
border-top-right-radius: @btn-border-radius-base;
11+
height: @input-control-height;
12+
.rw-input{
13+
height: @input-control-height - 2px;
14+
border-bottom-left-radius: @border-radius-base;
15+
border-top-left-radius: @border-radius-base;
16+
border-bottom-right-radius: @border-radius-base;
17+
border-top-right-radius: @btn-border-radius-base;
18+
}
19+
.raw-select{
20+
height: @input-control-height - 2px;
21+
}
22+
}
23+
24+
.rw-calendar-grid {
25+
thead tr th {
26+
height: @td-height;
27+
width: @td-width;
28+
font-size: @week-font-size;
29+
font-weight: @font-weight;
30+
font-family: @font-family;
31+
}
32+
tbody tr {
33+
height: @td-height;
34+
width: @td-width;
35+
font-size: @day-font-size;
36+
}
337
}

‎src/styles/defaultFactories/Radio.less

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.metaform-group-content .col-md-12 .form-group .no-padding-col .radio label{
2+
font-size: @font-size;
3+
font-family: @font-family;
4+
font-weight: @font-weight;
5+
padding-top: @label-padding-top;
6+
}
7+
8+
input[type="radio"] {
9+
margin: 2.3px 0 0;
10+
}

‎src/styles/infrastructure/ArrayContainer.less

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,34 @@
1010
.array-container-item-options {
1111
margin-left: -15px;
1212
}
13-
1413
}
1514
}
1615

1716
.add-bar {
1817
padding-left: 10px;
1918
}
2019

20+
.dropdown-menu {
21+
font-family: @font-family;
22+
font-size:@font-size;
23+
font-weight: @font-weight;
24+
}
25+
2126
}
2227

28+
.alert.alert-warning{
29+
font-family: @font-family;
30+
font-size:@font-size;
31+
padding-top: @array-container-warning-padding;
32+
padding-bottom: @array-container-warning-padding;
33+
padding-left: @array-container-warning-padding;
34+
padding-right: @array-container-warning-padding;
35+
border: @array-container-warining-border;
36+
margin-bottom:@array-container-margin-bottom;
37+
}
2338

39+
.dropdown-menu {
40+
font-size:@font-size;
41+
font-family: @font-family;
42+
font-weight: @font-weight;
43+
}

‎src/styles/infrastructure/FormGroupInline.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.no-padding-right-col {
22
padding-right: 0;
3-
}
3+
}

‎src/styles/infrastructure/Input.less

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
2+
.label-mixin{
3+
margin: 0;
4+
padding: 0;
5+
border: 0;
6+
font-weight: @font-weight;
7+
font-style: @font-style;
8+
font-size: @font-size;
9+
font-family: @font-family;
10+
vertical-align: baseline;
11+
padding-top: @label-padding-top;
12+
}
13+
.form-control-mixin{
14+
text-rendering: auto;
15+
cursor: auto;
16+
color: initial;
17+
letter-spacing: normal;
18+
word-spacing: normal;
19+
text-transform: none;
20+
text-indent: 0px;
21+
text-shadow: none;
22+
text-align: start;
23+
font: @control-inside-font;
24+
background-color: white;
25+
height:@input-control-height;
26+
padding-top: 0px; /*not effect*/
27+
padding-bottom: 0px;
28+
}
29+
.form-group-minx{
30+
.control-label{
31+
.label-mixin();
32+
}
33+
input.form-control, select.form-control {
34+
.form-control-mixin();
35+
}
36+
.input-group{
37+
height:@input-control-height - 2px;
38+
.input-group-addon{
39+
font-family: @font-family;
40+
height: @input-control-height - 2px;
41+
font-size: @font-size;
42+
border-bottom-width: @border-width;
43+
border-top-width: @border-width;
44+
}
45+
}
46+
}
47+
48+
/*Text Box and select */
49+
.form-group {
50+
div{
51+
.form-group-minx();
52+
}
53+
}

‎src/styles/infrastructure/MetaForm.less

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
.meta-form {
2-
padding: 0 0 1em 0;
2+
background: @form-background-color;
3+
padding-top: @form-padding;
4+
padding-bottom: @form-padding;
5+
padding-left: @form-padding;
6+
padding-right: @form-padding;
7+
border-width: @form-border-width;
8+
border-color: @form-border-color;
9+
margin-bottom: @form-bottom-margin;
310
}
411

512
.meta-form-bottom-bar {

0 commit comments

Comments
 (0)