mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-14 09:05:17 +01:00
Matthias Kretschmann
384b364a63
- switch to rem based typography - switch to rem based spacing - responsive typography through root font size change
191 lines
4.4 KiB
Stylus
191 lines
4.4 KiB
Stylus
//
|
|
// kremalicious3
|
|
// --------------
|
|
// Forms
|
|
//
|
|
|
|
|
|
// Normalize non-controls
|
|
/////////////////////////////////////
|
|
|
|
fieldset
|
|
padding: 0
|
|
margin: 0
|
|
border: 0
|
|
min-width: 0
|
|
|
|
legend
|
|
display: block
|
|
width: 100%
|
|
padding: 0
|
|
margin-bottom: $spacer
|
|
font-size: ($font-size-base * 1.5)
|
|
line-height: inherit
|
|
border: 0
|
|
|
|
label
|
|
@extend .bold
|
|
display: inline-block
|
|
margin-bottom: 5px
|
|
cursor: pointer
|
|
|
|
|
|
// Normalize form controls
|
|
/////////////////////////////////////
|
|
|
|
// Override content-box in Normalize (* isn't specific enough)
|
|
input[type="search"]
|
|
box-sizing: border-box
|
|
|
|
// Position radios and checkboxes better
|
|
input[type="radio"],
|
|
input[type="checkbox"]
|
|
margin: 4px 0 0
|
|
margin-top: 1px \9 // IE8-9
|
|
line-height: normal
|
|
|
|
// Set the height of file controls to match text inputs
|
|
input[type="file"]
|
|
display: block
|
|
|
|
// Make range inputs behave like textual form controls
|
|
input[type="range"]
|
|
display: block
|
|
width: 100%
|
|
|
|
// Make multiple select elements height not fixed
|
|
select[multiple],
|
|
select[size]
|
|
height: auto
|
|
|
|
|
|
// Common form controls
|
|
/////////////////////////////////////
|
|
|
|
.form-control
|
|
display: block
|
|
width: 100%
|
|
height: $input-height-base
|
|
padding: $padding-base-vertical $padding-base-horizontal
|
|
font-size: $input-font-size
|
|
font-weight: $input-font-weight
|
|
line-height: $line-height
|
|
color: $input-color
|
|
background-color: $input-bg
|
|
background-image: none // Reset unusual Firefox-on-Android default style
|
|
border: 0
|
|
border-radius: $input-border-radius
|
|
box-shadow: none
|
|
transition: all ease-in-out .15s
|
|
-webkit-appearance: none // screw you, iOS default inset box-shadow
|
|
|
|
// Placeholder
|
|
placeholder($input-color-placeholder)
|
|
|
|
&:hover
|
|
lighten($input-bg, 30%)
|
|
|
|
&:focus
|
|
background-color: $input-bg-focus
|
|
border-color: $input-border-focus
|
|
outline: 0
|
|
placeholder(lighten($input-color-placeholder, 25%))
|
|
|
|
// Disabled and read-only inputs
|
|
//
|
|
// HTML5 says that controls under a fieldset > legend:first-child won't be
|
|
// disabled if the fieldset is disabled. Due to implementation difficulty, we
|
|
// don't honor that edge case; we style them as disabled anyway.
|
|
&[disabled],
|
|
&[readonly],
|
|
fieldset[disabled] &
|
|
cursor: not-allowed
|
|
background-color: $input-bg-disabled
|
|
opacity: 1 // iOS fix for unreadable disabled content
|
|
|
|
|
|
// Form groups
|
|
/////////////////////////////////////
|
|
|
|
.form-group
|
|
margin-bottom: $spacer
|
|
|
|
|
|
// Search inputs
|
|
/////////////////////////////////////
|
|
|
|
input[type="search"]
|
|
-webkit-appearance: none // This overrides the extra rounded corners on search inputs in iOS
|
|
|
|
|
|
// Checkboxes and radios
|
|
/////////////////////////////////////
|
|
|
|
.radio,
|
|
.checkbox
|
|
display: block
|
|
min-height: $spacer // clear the floating input if there is no label text
|
|
margin-top: 10px
|
|
margin-bottom: 10px
|
|
|
|
label
|
|
padding-left: 20px
|
|
margin-bottom: 0
|
|
font-weight: normal
|
|
cursor: pointer
|
|
|
|
.radio input[type="radio"],
|
|
.radio-inline input[type="radio"],
|
|
.checkbox input[type="checkbox"],
|
|
.checkbox-inline input[type="checkbox"]
|
|
float: left
|
|
margin-left: -20px
|
|
|
|
.radio + .radio,
|
|
.checkbox + .checkbox
|
|
margin-top: -5px // Move up sibling radios or checkboxes for tighter spacing
|
|
|
|
// Radios and checkboxes on same line
|
|
.radio-inline,
|
|
.checkbox-inline
|
|
display: inline-block
|
|
padding-left: 20px
|
|
margin-bottom: 0
|
|
vertical-align: middle
|
|
font-weight: normal
|
|
cursor: pointer
|
|
|
|
.radio-inline + .radio-inline,
|
|
.checkbox-inline + .checkbox-inline
|
|
margin-top: 0
|
|
margin-left: 10px // space out consecutive inline controls
|
|
|
|
// Disabled Behavior
|
|
input[type="radio"],
|
|
input[type="checkbox"],
|
|
.radio,
|
|
.radio-inline,
|
|
.checkbox,
|
|
.checkbox-inline
|
|
&[disabled],
|
|
fieldset[disabled] &
|
|
cursor: not-allowed
|
|
|
|
|
|
// Form control sizing
|
|
/////////////////////////////////////
|
|
|
|
input-small()
|
|
input-size($input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small)
|
|
placeholder(font-size $font-size-small, line-height $line-height-small)
|
|
|
|
input-large()
|
|
input-size($input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large)
|
|
placeholder(font-size $font-size-large, line-height $line-height-large)
|
|
|
|
.input-small
|
|
input-small()
|
|
|
|
.input-large
|
|
input-large()
|