diff --git a/scss/_images.scss b/scss/_images.scss new file mode 100644 index 0000000000..283ee875f2 --- /dev/null +++ b/scss/_images.scss @@ -0,0 +1,28 @@ +// Responsive images (ensure images don't scale beyond their parents) +.img-responsive { + @include img-responsive(); +} + +// Rounded corners +.img-rounded { + @include border-radius($border-radius-lg); +} + +// Image thumbnails +.img-thumbnail { + padding: $thumbnail-padding; + line-height: $line-height-base; + background-color: $thumbnail-bg; + border: 1px solid $thumbnail-border; + border-radius: $thumbnail-border-radius; + transition: all .2s ease-in-out; + @include box-shadow(0 1px 2px rgba(0,0,0,.075)); + + // Keep them at most 100% wide + @include img-responsive(inline-block); +} + +// Perfect circle +.img-circle { + border-radius: 50%; // set radius in percents +} diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss index 5d4652ead0..5217539a39 100644 --- a/scss/_scaffolding.scss +++ b/scss/_scaffolding.scss @@ -10,9 +10,11 @@ // http://getbootstrap.com/getting-started/#third-box-sizing // Credit: Jon Neal & CSS-Tricks // http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ + html { box-sizing: border-box; } + *, *:before, *:after { @@ -40,7 +42,7 @@ html { @viewport { width: device-width; } -// Body reset +// Reset HTML, body, and more html { font-size: $font-size-root; @@ -55,7 +57,6 @@ body { background-color: $body-bg; } -// Reset fonts for relevant elements input, button, select, @@ -89,45 +90,6 @@ img { vertical-align: middle; } -// Responsive images (ensure images don't scale beyond their parents) -.img-responsive { - @include img-responsive(); -} - -// Rounded corners -.img-rounded { - @include border-radius($border-radius-lg); -} - -// Image thumbnails -.img-thumbnail { - padding: $thumbnail-padding; - line-height: $line-height-base; - background-color: $thumbnail-bg; - border: 1px solid $thumbnail-border; - border-radius: $thumbnail-border-radius; - transition: all .2s ease-in-out; - @include box-shadow(0 1px 2px rgba(0,0,0,.075)); - - // Keep them at most 100% wide - @include img-responsive(inline-block); -} - -// Perfect circle -.img-circle { - border-radius: 50%; // set radius in percents -} - - -// Horizontal rules - -hr { - margin-top: $spacer; - margin-bottom: $spacer; - border: 0; - border-top: .0625rem solid $hr-border; -} - // iOS "clickable elements" fix for role="button" // diff --git a/scss/_type.scss b/scss/_type.scss index 5bbbf5873e..dbd30e4f2b 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -65,6 +65,17 @@ p { } +// Horizontal rules +// ------------------------- + +hr { + margin-top: $spacer; + margin-bottom: $spacer; + border: 0; + border-top: .0625rem solid $hr-border; +} + + // Emphasis & misc // ------------------------- diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index b19aa2dda2..4cd94b97e9 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -9,6 +9,7 @@ // Core CSS @import "scaffolding"; @import "type"; +@import "images"; @import "code"; @import "grid"; @import "tables";