Skip to content

Commit fd4e1f9

Browse files
nolimits4webnolimits4web
committed
feat(button): m3 styles
1 parent 07a9420 commit fd4e1f9

File tree

4 files changed

+39
-23
lines changed

4 files changed

+39
-23
lines changed

‎src/core/components/block/block-vars.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,18 +55,18 @@
5555
--f7-block-strong-text-color: var(--f7-md-on-surface);
5656
--f7-block-outline-border-color: var(--f7-md-outline);
5757
--f7-block-title-font-size: inherit;
58-
--f7-block-title-text-color: var(--f7-md-primary);
58+
--f7-block-title-text-color: var(--f7-theme-color);
5959
--f7-block-title-font-weight: 500;
6060
--f7-block-title-line-height: 16px;
6161
--f7-block-title-margin-bottom: 16px;
6262
--f7-block-title-medium-font-size: 16px;
6363
--f7-block-title-medium-font-weight: 500;
6464
--f7-block-title-medium-line-height: 1.3;
65-
--f7-block-title-medium-text-color: var(--f7-md-primary);
65+
--f7-block-title-medium-text-color: var(--f7-theme-color);
6666
--f7-block-title-large-font-size: 22px;
6767
--f7-block-title-large-font-weight: 500;
6868
--f7-block-title-large-line-height: 1.2;
69-
--f7-block-title-large-text-color: var(--f7-md-primary);
69+
--f7-block-title-large-text-color: var(--f7-theme-color);
7070
--f7-block-inset-border-radius: 16px;
7171
--f7-block-strong-bg-color: var(--f7-md-surface-1);
7272
--f7-block-header-text-color: var(--f7-md-on-surface-variant);

‎src/core/components/button/button-vars.less‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,16 @@
33
--f7-button-min-width: 32px;
44
--f7-button-bg-color: transparent;
55
--f7-button-border-width: 0px;
6-
--f7-button-text-transform: uppercase;
7-
--f7-button-large-text-transform: uppercase;
8-
--f7-button-small-text-transform: uppercase;
9-
--f7-button-small-outline-border-width: 2px;
6+
107
/*
118
--f7-button-text-color: var(--f7-theme-color);
129
--f7-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
1310
--f7-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
1411
--f7-button-border-color: var(--f7-theme-color);
15-
--f7-button-fill-text-color: #fff;
1612
--f7-button-fill-bg-color: var(--f7-theme-color);
17-
--f7-button-outline-border-color: var(--f7-theme-color);
1813
--f7-button-padding-vertical: 0px;
1914
*/
20-
--f7-button-outline-border-width: 2px;
15+
2116
--f7-button-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
2217
--f7-button-raised-pressed-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
2318
0 3px 6px rgba(0, 0, 0, 0.23);
@@ -27,15 +22,13 @@
2722
--f7-segmented-strong-button-font-weight: 500;
2823
--f7-segmented-strong-button-active-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
2924
.light-vars({
30-
--f7-segmented-strong-bg-color: rgba(0,0,0,0.07);
3125
--f7-segmented-strong-button-text-color: #000;
3226
--f7-segmented-strong-button-pressed-bg-color: rgba(0,0,0,0.07);
3327
--f7-segmented-strong-button-hover-bg-color: rgba(0,0,0,0.04);
3428
--f7-segmented-strong-button-active-text-color: #000;
3529
--f7-segmented-strong-button-active-bg-color: #fff;
3630
});
3731
.dark-vars({
38-
--f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
3932
--f7-segmented-strong-button-pressed-bg-color: rgba(255,255,255,0.04);
4033
--f7-segmented-strong-button-hover-bg-color: rgba(255,255,255,0.02);
4134
--f7-segmented-strong-button-active-bg-color: rgba(255, 255, 255, 0.14);
@@ -44,42 +37,65 @@
4437
});
4538
}
4639
.ios-vars({
47-
40+
--f7-button-fill-text-color: #fff;
41+
--f7-button-text-transform: uppercase;
4842
--f7-button-height: 28px;
4943
--f7-button-padding-horizontal: 10px;
50-
--f7-button-border-radius: 5px;
44+
--f7-button-border-radius: 4px;
5145
--f7-button-font-weight: 600;
5246
--f7-button-letter-spacing: 0;
47+
--f7-button-outline-border-color: var(--f7-theme-color);
48+
--f7-button-outline-border-width: 2px;
5349
/*
5450
--f7-button-fill-pressed-bg-color: var(--f7-theme-color-tint);
5551
*/
52+
--f7-button-large-text-transform: uppercase;
5653
--f7-button-large-height: 44px;
5754
--f7-button-large-font-size: 17px;
5855
--f7-button-large-font-weight: 500;
56+
--f7-button-small-outline-border-width: 2px;
57+
--f7-button-small-text-transform: uppercase;
5958
--f7-button-small-height: 26px;
6059
--f7-button-small-font-size: 13px;
6160
--f7-button-small-font-weight: 600;
6261

6362
--f7-segmented-strong-button-text-transform: none;
6463
--f7-segmented-strong-button-active-font-weight: 600;
64+
65+
.light-vars({
66+
--f7-segmented-strong-bg-color: rgba(0,0,0,0.07);
67+
});
68+
69+
.dark-vars({
70+
--f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
71+
});
72+
6573
});
6674
.md-vars({
67-
--f7-button-height: 36px;
75+
--f7-button-fill-text-color: var(--f7-md-on-primary);
76+
--f7-button-text-transform: none;
77+
--f7-button-height: 40px;
6878
--f7-button-padding-horizontal: 8px;
69-
--f7-button-border-radius: 4px;
79+
--f7-button-border-radius: 8px;
7080
--f7-button-font-weight: 500;
71-
--f7-button-letter-spacing: 0.05em;
81+
--f7-button-letter-spacing: normal;
82+
--f7-button-outline-border-color: var(--f7-md-outline);
83+
--f7-button-outline-border-width: 1px;
7284
/*
7385
--f7-button-fill-pressed-bg-color: var(--f7-theme-color-shade);
7486
*/
87+
--f7-button-large-text-transform: none;
7588
--f7-button-large-height: 48px;
7689
--f7-button-large-font-size: 14px;
7790
--f7-button-large-font-weight: 500;
78-
--f7-button-small-height: 28px;
91+
--f7-button-small-text-transform: none;
92+
--f7-button-small-outline-border-width: 1px;
93+
--f7-button-small-height: 32px;
7994
--f7-button-small-font-size: 14px;
8095
--f7-button-small-font-weight: 500;
8196

82-
--f7-segmented-strong-button-text-transform: uppercase;
97+
--f7-segmented-strong-bg-color: var(--f7-md-surface-variant);
98+
--f7-segmented-strong-button-text-transform: none;
8399
--f7-segmented-strong-button-active-font-weight: 500;
84100

85101
});

‎src/core/components/link/link-vars.less‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@
22
--f7-link-highlight-black: rgba(0, 0, 0, 0.1);
33
--f7-link-highlight-white: rgba(255, 255, 255, 0.15);
44
--f7-link-highlight-color: rgba(var(--f7-theme-color-rgb), 0.15);
5+
--f7-link-text-color: var(--f7-theme-color);
56
}
67

78
.ios-vars({
89
--f7-link-pressed-opacity: 0.3;
9-
--f7-link-text-color: var(--f7-theme-color);
10-
});
11-
.md-vars({
12-
--f7-link-text-color: var(--f7-md-primary);
1310
});

‎src/core/components/panel/panel-vars.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
--f7-panel-right-collapsed-width: var(--f7-panel-collapsed-width);
88
*/
99
--f7-panel-bg-color: #fff;
10+
.dark-vars({
11+
--f7-panel-bg-color: #000;
12+
});
1013
}
1114
.ios-vars({
1215
--f7-panel-collapsed-width: 58px;

0 commit comments

Comments
 (0)