You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This change will likely need to be delayed until the next major release as it changes some default behavior.
Goals:
support syntax
support inline inputs
Sample HTML
<formaction="action_page.php"><divgrid="ng"><divcolumn="6"><label>Gender: input label</label><inputid="male" type="radio" name="gender" value="Male"><labelfor="male">Male</label><inputid="female" type="radio" name="gender" value="Female"><labelfor="female">Female</label></div><divcolumn="6"><label>Gender: label input</label><label><inputtype="radio" name="gender2" value="male" checked>Male</label><label><inputtype="radio" name="gender2" value="female">Female</label></div></div><divgrid="ng"><divcolumn="6" class="_inline"><h5>Inline: Gender: input label</h5><inputid="male2" type="radio" name="gender3" value="Male"><labelfor="male2">Male</label><inputid="female2" type="radio" name="gender3" value="Female"><labelfor="female2">Female</label></div><divcolumn="6" class="_inline"><h5>Inline: label input</h5><label><inputtype="radio" name="gender4" value="male" checked>Male</label><label><inputtype="radio" name="gender4" value="female">Female</label></div></div><divgrid="no-gutter"><divcolumn="6"><h5>input label</h5><inputid="bike" type="checkbox" name="vehicle1" value="Bike"><labelfor="bike">I have a bike</label><inputid="car" type="checkbox" name="vehicle2" value="Car"><labelfor="car">I have a car</label></div><divcolumn="6"><h5>label input</h5><label><inputtype="checkbox" name="transport1" value="Bike" checked>I have a bike</label><label><inputtype="checkbox" name="transport2" value="Car">I have a car</label></div></div><divgrid="ng"><divcolumn="6" class="_inline"><h5>Inline: input label</h5><inputid="bike2" type="checkbox" name="vehicle3" value="Bike"><labelfor="bike2">I have a bike</label><inputid="car2" type="checkbox" name="vehicle4" value="Car"><labelfor="car2">I have a car</label></div><divcolumn="6" class="_inline"><h5>Inline: label input</h5><label><inputtype="checkbox" name="transport3" value="Bike" checked>I have a bike</label><label><inputtype="checkbox" name="transport4" value="Car">I have a car</label></div></div><inputtype="submit" value="Submit"><button> y submit?</button></form>
Changes made
concise.css/src/_forms.scss
Line 11
-- min-height: 1.5lh;++ //min-height: 1.5lh;
Line 43
++ margin-bottom: 0.1lh;
Line 75
-- display: block;
Line 80
-- // Labels are inline with their checkbox and radio elements++ // Inputs before label.
Line 83
-- display: inline-block;
Added to the end of the file...
++ // Inputs inside label.++ label > input[type="radio"],++ label > input[type="checkbox"] {++ margin-right: 0.5em;++ }++ ++ // If not inline, then add a line break++ :not(._inline) > label:after {++ content: "\A";++ white-space: pre;++ }++ ++ div._inline > label {++ margin-right:1.5em;++ }
This change will likely need to be delayed until the next major release as it changes some default behavior.
Goals:
Sample HTML
Changes made
concise.css/src/_forms.scss
Added to the end of the file...
Modified File
concise.css/src/_forms.scss
The text was updated successfully, but these errors were encountered: