Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9807e7e

Browse files
Grid update
1 parent8437be2 commit9807e7e

File tree

7 files changed

+513
-621
lines changed

7 files changed

+513
-621
lines changed

‎scss/_forms.scss‎

Lines changed: 0 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -162,39 +162,12 @@ textarea.form-control {
162162
height:auto;
163163
}
164164

165-
// Form groups
166-
//
167-
// Designed to help with the organization and spacing of vertical forms. For
168-
// horizontal forms, use the predefined grid classes.
169-
170-
.form-group {
171-
margin-bottom:$form-group-margin-bottom;
172-
}
173-
174165
.form-text {
175166
display:block;
176167
margin-top:$form-text-margin-top;
177168
}
178169

179170

180-
// Form grid
181-
//
182-
// Special replacement for our grid system's `.row` for tighter form layouts.
183-
184-
.form-row {
185-
display:flex;
186-
flex-wrap:wrap;
187-
margin-right:-$form-grid-gutter-width/2;
188-
margin-left:-$form-grid-gutter-width/2;
189-
190-
>.col,
191-
> [class*="col-"] {
192-
padding-right:$form-grid-gutter-width/2;
193-
padding-left:$form-grid-gutter-width/2;
194-
}
195-
}
196-
197-
198171
// Checkboxes and radios
199172
//
200173
// Indent the labels to position radios/checkboxes as hanging controls.
@@ -221,21 +194,6 @@ textarea.form-control {
221194
margin-bottom:0;// Override default `<label>` bottom margin
222195
}
223196

224-
.form-check-inline {
225-
display:inline-flex;
226-
align-items:center;
227-
padding-left:0;// Override base .form-check
228-
margin-right:$form-check-inline-margin-x;
229-
230-
// Undo .form-check-input defaults and add some `margin-right`.
231-
.form-check-input {
232-
position:static;
233-
margin-top:0;
234-
margin-right:$form-check-inline-input-margin-x;
235-
margin-left:0;
236-
}
237-
}
238-
239197

240198
// Form validation
241199
//
@@ -247,86 +205,3 @@ textarea.form-control {
247205
@each$state,$datain$form-validation-states {
248206
@includeform-validation-state($state,map-get($data,color),map-get($data,icon));
249207
}
250-
251-
// Inline forms
252-
//
253-
// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
254-
// forms begin stacked on extra small (mobile) devices and then go inline when
255-
// viewports reach <768px.
256-
//
257-
// Requires wrapping inputs and labels with `.form-group` for proper display of
258-
// default HTML form controls and our custom form controls (e.g., input groups).
259-
260-
.form-inline {
261-
display:flex;
262-
flex-flow:rowwrap;
263-
align-items:center;// Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
264-
265-
// Because we use flex, the initial sizing of checkboxes is collapsed and
266-
// doesn't occupy the full-width (which is what we want for xs grid tier),
267-
// so we force that here.
268-
.form-check {
269-
width:100%;
270-
}
271-
272-
// Kick in the inline
273-
@includemedia-breakpoint-up(sm) {
274-
label {
275-
display:flex;
276-
align-items:center;
277-
justify-content:center;
278-
margin-bottom:0;
279-
}
280-
281-
// Inline-block all the things for "inline"
282-
.form-group {
283-
display:flex;
284-
flex:00auto;
285-
flex-flow:rowwrap;
286-
align-items:center;
287-
margin-bottom:0;
288-
}
289-
290-
// Allow folks to *not* use `.form-group`
291-
.form-control {
292-
display:inline-block;
293-
width:auto;// Prevent labels from stacking above inputs in `.form-group`
294-
vertical-align:middle;
295-
}
296-
297-
// Make static controls behave like regular ones
298-
.form-control-plaintext {
299-
display:inline-block;
300-
}
301-
302-
.input-group,
303-
.custom-select {
304-
width:auto;
305-
}
306-
307-
// Remove default margin on radios/checkboxes that were used for stacking, and
308-
// then undo the floating of radios and checkboxes to match.
309-
.form-check {
310-
display:flex;
311-
align-items:center;
312-
justify-content:center;
313-
width:auto;
314-
padding-left:0;
315-
}
316-
.form-check-input {
317-
position:relative;
318-
flex-shrink:0;
319-
margin-top:0;
320-
margin-right:$form-check-input-margin-x;
321-
margin-left:0;
322-
}
323-
324-
.custom-control {
325-
align-items:center;
326-
justify-content:center;
327-
}
328-
.custom-control-label {
329-
margin-bottom:0;
330-
}
331-
}
332-
}

‎scss/_grid.scss‎

Lines changed: 62 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,81 @@
2525
// Rows contain and clear the floats of your columns.
2626

2727
@if$enable-grid-classes {
28+
.grid,
2829
.row {
2930
@includemake-row();
31+
32+
>* {
33+
@includemake-col-ready();
34+
}
35+
}
36+
37+
.grid {
38+
margin-bottom:-$grid-gutter-width;
39+
40+
>* {
41+
margin-bottom:$grid-gutter-width;
42+
}
3043
}
3144

3245
// Remove the negative margin from default .row, then the horizontal padding
3346
// from all immediate children columns (to prevent runaway style inheritance).
34-
.no-gutters {
47+
.grid-0,
48+
.row-0 {
3549
margin-right:0;
3650
margin-left:0;
3751

38-
>.col,
39-
> [class*="col-"] {
52+
>* {
4053
padding-right:0;
4154
padding-left:0;
4255
}
4356
}
57+
58+
.grid-0 {
59+
margin-bottom:0;
60+
61+
>* {
62+
margin-bottom:0;
63+
}
64+
}
65+
66+
.grid-sm,
67+
.row-sm {
68+
margin-right:-$grid-gutter-width-sm/2;
69+
margin-left:-$grid-gutter-width-sm/2;
70+
71+
>* {
72+
padding-right:$grid-gutter-width-sm/2;
73+
padding-left:$grid-gutter-width-sm/2;
74+
}
75+
}
76+
77+
.grid-sm {
78+
margin-bottom:-$grid-gutter-width-sm;
79+
80+
>* {
81+
margin-bottom:$grid-gutter-width-sm;
82+
}
83+
}
84+
85+
.grid-lg,
86+
.row-lg {
87+
margin-right:-$grid-gutter-width-lg/2;
88+
margin-left:-$grid-gutter-width-lg/2;
89+
90+
>* {
91+
padding-right:$grid-gutter-width-lg/2;
92+
padding-left:$grid-gutter-width-lg/2;
93+
}
94+
}
95+
96+
.grid-lg {
97+
margin-bottom:-$grid-gutter-width-lg;
98+
99+
>* {
100+
margin-bottom:$grid-gutter-width-lg;
101+
}
102+
}
44103
}
45104

46105
// Columns

‎scss/_variables.scss‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,9 @@ $container-max-widths: (
204204
// Set the number of columns and specify the width of the gutters.
205205

206206
$grid-columns:12!default;
207-
$grid-gutter-width:30px!default;
207+
$grid-gutter-width:2rem!default;
208+
$grid-gutter-width-sm:$grid-gutter-width/2!default;
209+
$grid-gutter-width-lg:$grid-gutter-width*2!default;
208210

209211

210212
// Container padding
@@ -507,13 +509,6 @@ $form-text-margin-top: .25rem !default;
507509

508510
$form-check-input-gutter:1.25rem!default;
509511
$form-check-input-margin-y:.3rem!default;
510-
$form-check-input-margin-x:.25rem!default;
511-
512-
$form-check-inline-margin-x:.75rem!default;
513-
$form-check-inline-input-margin-x:.3125rem!default;
514-
515-
$form-grid-gutter-width:10px!default;
516-
$form-group-margin-bottom:1rem!default;
517512

518513
$input-group-addon-color:$input-color!default;
519514
$input-group-addon-bg:$gray-200!default;

‎scss/mixins/_grid-framework.scss‎

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,9 @@
44
// any value of `$grid-columns`.
55

66
@mixinmake-grid-columns($columns:$grid-columns,$gutter:$grid-gutter-width,$breakpoints:$grid-breakpoints) {
7-
// Common properties for all breakpoints
8-
%grid-column {
9-
position:relative;
10-
width:100%;
11-
padding-right:$gutter/2;
12-
padding-left:$gutter/2;
13-
}
14-
157
@each$breakpointinmap-keys($breakpoints) {
168
$infix:breakpoint-infix($breakpoint,$breakpoints);
179

18-
// Allow columns to stretch full width below their breakpoints
19-
@for$ifrom1through$columns {
20-
.col#{$infix}-#{$i} {
21-
@extend%grid-column;
22-
}
23-
}
24-
.col#{$infix},
25-
.col#{$infix}-auto {
26-
@extend%grid-column;
27-
}
28-
2910
@includemedia-breakpoint-up($breakpoint,$breakpoints) {
3011
// Provide basic `.col-{bp}` classes for equal-width flexbox columns
3112
.col#{$infix} {

‎scss/mixins/_grid.scss‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,21 +28,17 @@
2828
}
2929

3030
@mixinmake-col-ready($gutter:$grid-gutter-width) {
31-
position:relative;
3231
// Prevent columns from becoming too narrow when at smaller grid tiers by
33-
// always setting `width: 100%;`. This works because weuse `flex` values
32+
// always setting `width: 100%;`. This works because weset the width
3433
// later on to override this initial width.
34+
flex-shrink:0;
3535
width:100%;
3636
padding-right:$gutter/2;
3737
padding-left:$gutter/2;
3838
}
3939

4040
@mixinmake-col($size,$columns:$grid-columns) {
41-
flex:00percentage($size/$columns);
42-
// Add a `max-width` to ensure content within each column does not blow out
43-
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
44-
// do not appear to require this.
45-
max-width:percentage($size/$columns);
41+
width:percentage($size/$columns);
4642
}
4743

4844
@mixinmake-col-offset($size,$columns:$grid-columns) {

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp