Skip to content

Commit 8401aa4

Browse files
adamdbradleyadamdbradley
committed
style(button): format css
2 parents e606878 + 38a3be4 commit 8401aa4

File tree

11 files changed

+79
-74
lines changed

11 files changed

+79
-74
lines changed

‎ionic/components/button/button.ios.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,19 +97,17 @@ $button-ios-small-icon-font-size: 1.3em !default;
9797
margin-right: 0;
9898
}
9999

100-
101100
// iOS Full Button
102101
// --------------------------------------------------
103102

104103
.button-full {
105104
margin-right: 0;
106105
margin-left: 0;
107106
border-radius: 0;
108-
border-left: none;
109-
border-right: none;
107+
border-right-width: 0;
108+
border-left-width: 0;
110109
}
111110

112-
113111
// iOS Outline Button
114112
// --------------------------------------------------
115113

‎ionic/components/button/button.md.scss‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -117,28 +117,25 @@ $button-md-small-icon-font-size: 1.4em !default;
117117
font-size: $button-md-small-icon-font-size;
118118
}
119119

120-
121-
// Material Design Full Button
120+
// Material Design Block Button
122121
// --------------------------------------------------
123122

124-
.button-full {
125-
border-radius: 0;
126-
margin-right: 0;
123+
.button-block {
127124
margin-left: 0;
128-
border-right-width: 0;
129-
border-left-width: 0;
125+
margin-right: 0;
130126
}
131127

132-
133-
// Material Design Block Button
128+
// Material Design Full Button
134129
// --------------------------------------------------
135130

136-
.button-block {
131+
.button-full {
137132
margin-right: 0;
138133
margin-left: 0;
134+
border-radius: 0;
135+
border-right-width: 0;
136+
border-left-width: 0;
139137
}
140138

141-
142139
// Material Design Outline Button
143140
// --------------------------------------------------
144141

‎ionic/components/button/button.scss‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,16 @@ $button-round-border-radius: 64px !default;
3030
}
3131

3232
.button-inner {
33-
width: 100%;
34-
height: 100%;
35-
display: flex;
36-
flex-shrink: 0;
37-
flex-flow: row nowrap;
38-
align-items: center;
39-
justify-content: center;
33+
display: flex;
34+
flex-shrink: 0;
35+
flex-flow: row nowrap;
36+
align-items: center;
37+
justify-content: center;
38+
width: 100%;
39+
height: 100%;
4040
}
4141

42-
a.button {
42+
a.button, a[button] {
4343
text-decoration: none;
4444
}
4545

@@ -54,7 +54,7 @@ a.button {
5454
// --------------------------------------------------
5555

5656
.button-block {
57-
display: flex;
57+
display: block;
5858
clear: both;
5959
width: 100%;
6060

@@ -68,6 +68,7 @@ a.button {
6868
// --------------------------------------------------
6969

7070
.button-full {
71+
display: block;
7172
width: 100%;
7273
}
7374

‎ionic/components/nav/test/basic/index.ts‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class MyCmpTest{}
2020
<button><ion-icon name="star"></ion-icon></button>
2121
</ion-buttons>
2222
<ion-buttons end>
23-
<button>S1</button>
23+
<button>S1g</button>
2424
</ion-buttons>
2525
</ion-navbar>
2626
<ion-content>
@@ -74,7 +74,7 @@ class FirstPage {
7474

7575
setPages() {
7676
let items = [
77-
{page: PrimaryHeaderPage}
77+
{ page: PrimaryHeaderPage }
7878
];
7979

8080
this.nav.setPages(items);
@@ -89,7 +89,7 @@ class FirstPage {
8989
}
9090

9191
pushFullPage() {
92-
this.nav.push(FullPage, { id: 8675309, myData: [1,2,3,4] } );
92+
this.nav.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] });
9393
}
9494

9595
pushAnother() {
@@ -139,8 +139,8 @@ class FullPage {
139139

140140
setPages() {
141141
let items = [
142-
{page: FirstPage},
143-
{page: PrimaryHeaderPage}
142+
{ page: FirstPage },
143+
{ page: PrimaryHeaderPage }
144144
];
145145

146146
this.nav.setPages(items);
@@ -190,6 +190,9 @@ class FullPage {
190190
template: `
191191
<ion-navbar *navbar primary>
192192
<ion-title>Primary Color Page Header</ion-title>
193+
<ion-buttons end>
194+
<button>S1g</button>
195+
</ion-buttons>
193196
</ion-navbar>
194197
<ion-content padding>
195198
<p><button class="e2eFrom3To2" (click)="nav.pop()">Pop</button></p>
@@ -218,7 +221,7 @@ class PrimaryHeaderPage {
218221
}
219222

220223
pushFullPage() {
221-
this.nav.push(FullPage, { id: 8675309, myData: [1,2,3,4] } );
224+
this.nav.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] });
222225
}
223226

224227
insert() {

‎ionic/components/nav/test/insert-views/index.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ import {App, Page, NavController} from 'ionic/ionic';
99
</ion-navbar>
1010
1111
<ion-content padding>
12-
<button block (click)="pushPage()">Push Page</block>
12+
<button block (click)="pushPage()">Push Page</button>
1313
</ion-content>`,
1414
})
1515
class FirstPage {
1616
constructor(nav: NavController) {
1717
this.nav = nav;
1818
}
19-
pushPage(){
19+
pushPage() {
2020
this.nav.push(SecondPage)
2121
}
2222
}
@@ -30,15 +30,15 @@ class FirstPage {
3030
3131
<ion-content padding>
3232
<h1>Second page</h1>
33-
<button block (click)="insertPage()">Insert Page</block>
33+
<button block (click)="insertPage()">Insert Page</button>
3434
</ion-content>
3535
`
3636
})
3737
class SecondPage {
3838
constructor(nav: NavController) {
3939
this.nav = nav;
4040
}
41-
insertPage(){
41+
insertPage() {
4242
this.nav.insert(1, InsertPage)
4343
}
4444
}
@@ -55,7 +55,7 @@ class SecondPage {
5555
`
5656
})
5757
class InsertPage {
58-
constructor() {}
58+
constructor() { }
5959
}
6060

6161

‎ionic/components/navbar/navbar.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,9 +94,11 @@ class ToolbarBackground {
9494
template:
9595
'<div class="toolbar-background"></div>' +
9696
'<button class="back-button bar-button bar-button-default" [hidden]="hideBackButton">' +
97-
'<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
98-
'<span class="back-button-text">' +
99-
'<span class="back-default">{{_bbText}}</span>' +
97+
'<span class="button-inner">' +
98+
'<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
99+
'<span class="back-button-text">' +
100+
'<span class="back-default">{{_bbText}}</span>' +
101+
'</span>' +
100102
'</span>' +
101103
'<ion-button-effect></ion-button-effect>' +
102104
'</button>' +

‎ionic/components/toolbar/test/scenarios/main.html‎

Lines changed: 29 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<ion-toolbar>
32
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
43
</ion-toolbar>
@@ -62,9 +61,9 @@
6261

6362
<ion-toolbar>
6463
<ion-buttons start>
65-
<button solid class="activated">
64+
<a button solid class="activated">
6665
<ion-icon name="contact"></ion-icon>
67-
</button>
66+
</a>
6867
<button solid class="activated">
6968
<ion-icon name="contact"></ion-icon>
7069
Solid
@@ -126,14 +125,27 @@
126125
</button>
127126
</ion-buttons>
128127
<ion-buttons end>
129-
<button>
130-
Edit
128+
<a button href="#">Edit
131129
<ion-icon name="create"></ion-icon>
132-
</button>
130+
</a>
133131
</ion-buttons>
134132
<ion-title>Icon/Color Attr</ion-title>
135133
</ion-toolbar>
136134

135+
<ion-toolbar>
136+
<ion-buttons start>
137+
<button>
138+
Go Back
139+
</button>
140+
</ion-buttons>
141+
<ion-buttons end>
142+
<a button href="#">
143+
Edit
144+
</a>
145+
</ion-buttons>
146+
<ion-title>Text Only</ion-title>
147+
</ion-toolbar>
148+
137149

138150
<ion-toolbar>
139151
<button menuToggle>
@@ -149,11 +161,11 @@
149161

150162

151163
<ion-toolbar>
152-
<ion-buttons end>
153-
<button #button1 (click)="buttonClick(button1)">
154-
<ion-icon name="star"></ion-icon>
155-
</button>
156-
</ion-buttons>
164+
<ion-buttons end>
165+
<button #button1 (click)="buttonClick(button1)">
166+
<ion-icon name="star"></ion-icon>
167+
</button>
168+
</ion-buttons>
157169
<ion-title>Right side menu toggle</ion-title>
158170
<button menuToggle right>
159171
<ion-icon name="menu"></ion-icon>
@@ -167,24 +179,24 @@
167179
</button>
168180
</ion-buttons>
169181
<ion-segment secondary>
170-
<ion-segment-button>
182+
<ion-segment-button value="something">
171183
Something
172184
</ion-segment-button>
173-
<ion-segment-button>
185+
<ion-segment-button value="else">
174186
Else
175187
</ion-segment-button>
176188
</ion-segment>
177189
</ion-toolbar>
178190

179191
<ion-toolbar>
180192
<ion-segment>
181-
<ion-segment-button>
193+
<ion-segment-button value="light">
182194
Light
183195
</ion-segment-button>
184-
<ion-segment-button>
196+
<ion-segment-button value="toolbar">
185197
Toolbar
186198
</ion-segment-button>
187-
<ion-segment-button>
199+
<ion-segment-button value="default">
188200
Default Segment
189201
</ion-segment-button>
190202
</ion-segment>
@@ -195,4 +207,4 @@
195207
.toolbar {
196208
border-bottom: 1px solid black;
197209
}
198-
</style>
210+
</style>

‎ionic/components/toolbar/toolbar-button.scss‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@
55

66
.bar-button {
77
position: relative;
8-
display: inline-flex;
9-
flex-shrink: 0;
10-
flex-flow: row nowrap;
11-
align-items: center;
12-
justify-content: center;
8+
display: inline-block;
139

1410
margin: 0;
1511
padding: 0;
@@ -19,6 +15,7 @@
1915

2016
text-align: center;
2117
text-transform: none;
18+
line-height: 1;
2219

2320
vertical-align: top; // the better option for most scenarios
2421
vertical-align: -webkit-baseline-middle; // the best for those that support it
@@ -54,7 +51,7 @@
5451
.back-button {
5552
display: none;
5653
&.show-back-button {
57-
display: flex;
54+
display: inline-block;
5855
}
5956
}
6057

‎ionic/components/toolbar/toolbar.ios.scss‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ ion-navbar-section {
6262
.toolbar-title {
6363
font-size: $toolbar-ios-title-font-size;
6464
font-weight: 600;
65-
margin-top: 1px;
6665
text-align: center;
6766
pointer-events: auto;
6867
color: $toolbar-ios-text-color;
@@ -123,10 +122,8 @@ ion-buttons[right] {
123122
// --------------------------------------------------
124123

125124
.bar-button {
126-
margin-top: 0;
127-
margin-bottom: 0;
128125
padding: 0 5px;
129-
min-height: 32px;
126+
height: 32px;
130127
border: 0;
131128
font-size: $toolbar-ios-button-font-size;
132129
border-radius: $bar-button-ios-border-radius;
@@ -225,7 +222,6 @@ ion-buttons[right] {
225222
// --------------------------------------------------
226223

227224
.bar-button-icon-left ion-icon {
228-
margin-left: -0.1em;
229225
padding-right: 0.3em;
230226
font-size: 1.4em;
231227
line-height: 0.67;
@@ -257,7 +253,6 @@ ion-buttons[right] {
257253

258254
.back-button {
259255
margin: 0;
260-
margin-top: 2px;
261256
min-height: 3.2rem;
262257
line-height: 1;
263258
order: map-get($toolbar-order-ios, back-button);
@@ -268,8 +263,9 @@ ion-buttons[right] {
268263
.back-button-icon {
269264
display: inherit;
270265
margin: 0;
266+
margin-top: -1px;
271267
min-width: 18px;
272-
font-size: 3.3rem;
268+
font-size: 3.4rem;
273269
}
274270

275271
.back-button-text {

0 commit comments

Comments
 (0)