mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
Move .img- classes to new _images.scss; move hr to _type.scss
This commit is contained in:
parent
cd3bc6a089
commit
36e4cd0287
28
scss/_images.scss
Normal file
28
scss/_images.scss
Normal file
@ -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
|
||||||
|
}
|
@ -10,9 +10,11 @@
|
|||||||
// http://getbootstrap.com/getting-started/#third-box-sizing
|
// http://getbootstrap.com/getting-started/#third-box-sizing
|
||||||
// Credit: Jon Neal & CSS-Tricks
|
// Credit: Jon Neal & CSS-Tricks
|
||||||
// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
||||||
|
|
||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
*:before,
|
*:before,
|
||||||
*:after {
|
*:after {
|
||||||
@ -40,7 +42,7 @@ html {
|
|||||||
@viewport { width: device-width; }
|
@viewport { width: device-width; }
|
||||||
|
|
||||||
|
|
||||||
// Body reset
|
// Reset HTML, body, and more
|
||||||
|
|
||||||
html {
|
html {
|
||||||
font-size: $font-size-root;
|
font-size: $font-size-root;
|
||||||
@ -55,7 +57,6 @@ body {
|
|||||||
background-color: $body-bg;
|
background-color: $body-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset fonts for relevant elements
|
|
||||||
input,
|
input,
|
||||||
button,
|
button,
|
||||||
select,
|
select,
|
||||||
@ -89,45 +90,6 @@ img {
|
|||||||
vertical-align: middle;
|
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"
|
// iOS "clickable elements" fix for role="button"
|
||||||
//
|
//
|
||||||
|
@ -65,6 +65,17 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Horizontal rules
|
||||||
|
// -------------------------
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin-top: $spacer;
|
||||||
|
margin-bottom: $spacer;
|
||||||
|
border: 0;
|
||||||
|
border-top: .0625rem solid $hr-border;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Emphasis & misc
|
// Emphasis & misc
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
|
1
scss/bootstrap.scss
vendored
1
scss/bootstrap.scss
vendored
@ -9,6 +9,7 @@
|
|||||||
// Core CSS
|
// Core CSS
|
||||||
@import "scaffolding";
|
@import "scaffolding";
|
||||||
@import "type";
|
@import "type";
|
||||||
|
@import "images";
|
||||||
@import "code";
|
@import "code";
|
||||||
@import "grid";
|
@import "grid";
|
||||||
@import "tables";
|
@import "tables";
|
||||||
|
Loading…
x
Reference in New Issue
Block a user