Difference between revisions of "Team:British Columbia/Format/CarouselCSS"
Line 117: | Line 117: | ||
margin-top: 120px; | margin-top: 120px; | ||
} | } | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Base structure | ||
+ | */ | ||
+ | |||
+ | /* Move down content because we have a fixed navbar that is 50px tall */ | ||
+ | body { | ||
+ | padding-top: 50px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* | ||
+ | * Global add-ons | ||
+ | */ | ||
+ | |||
+ | .sub-header { | ||
+ | padding-bottom: 10px; | ||
+ | border-bottom: 1px solid #eee; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Top navigation | ||
+ | * Hide default border to remove 1px line. | ||
+ | */ | ||
+ | .navbar-fixed-top { | ||
+ | border: 0; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * Sidebar | ||
+ | */ | ||
+ | |||
+ | /* Hide for mobile, show later */ | ||
+ | .sidebar { | ||
+ | display: none; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .sidebar { | ||
+ | position: fixed; | ||
+ | top: 51px; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | z-index: 1000; | ||
+ | display: block; | ||
+ | padding: 20px; | ||
+ | overflow-x: hidden; | ||
+ | overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ | ||
+ | background-color: #f5f5f5; | ||
+ | border-right: 1px solid #eee; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* Sidebar navigation */ | ||
+ | .nav-sidebar { | ||
+ | margin-right: -21px; /* 20px padding + 1px border */ | ||
+ | margin-bottom: 20px; | ||
+ | margin-left: -20px; | ||
+ | } | ||
+ | .nav-sidebar > li > a { | ||
+ | padding-right: 20px; | ||
+ | padding-left: 20px; | ||
+ | } | ||
+ | .nav-sidebar > .active > a, | ||
+ | .nav-sidebar > .active > a:hover, | ||
+ | .nav-sidebar > .active > a:focus { | ||
+ | color: #fff; | ||
+ | background-color: #428bca; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* | ||
+ | * Main content | ||
+ | */ | ||
+ | |||
+ | .main { | ||
+ | padding: 20px; | ||
+ | } | ||
+ | @media (min-width: 768px) { | ||
+ | .main { | ||
+ | padding-right: 40px; | ||
+ | padding-left: 40px; | ||
+ | } | ||
+ | } | ||
+ | .main .page-header { | ||
+ | margin-top: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* | ||
+ | * Placeholder dashboard ideas | ||
+ | */ | ||
+ | |||
+ | .placeholders { | ||
+ | margin-bottom: 30px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .placeholders h4 { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | .placeholder { | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | .placeholder img { | ||
+ | display: inline-block; | ||
+ | border-radius: 50%; | ||
} | } |
Revision as of 19:10, 31 March 2015
/* GLOBAL STYLES
*/
/* Padding below the footer and lighter body text */
body {
padding-bottom: 40px; color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
*/
/* Special class on .container surrounding .navbar, used for positioning it into place. */ .navbar {
margin-top: 16px;
}
/* CUSTOMIZE THE CAROUSEL
*/
/* Carousel base class */ .carousel {
height: 500px; margin-bottom: 60px; margin-top: 48px;
} /* Since positioning the image, we need to help out the caption */ .carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */ .carousel .item {
height: 500px; background-color: #FFFFFF;
} .carousel-inner > .item > img {
min-width: auto%; height: 500px;
/* control colour */
.carousel-control {
color: #000000;
}
/* MARKETING CONTENT
*/
/* Center align the text within the three columns below the carousel */ .marketing .col-lg-4 {
margin-bottom: 20px; text-align: center;
} .marketing h2 {
font-weight: normal;
} .marketing .col-lg-4 p {
margin-right: 10px; margin-left: 10px;
}
/* Featurettes
*/
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrapmore */
}
/* Thin out the marketing headings */ .featurette-heading {
font-weight: 300; line-height: 1; letter-spacing: -1px;
}
/* RESPONSIVE CSS
*/
@media (min-width: 768px) {
/* Navbar positioning foo */ .navbar-wrapper { margin-top: 20px; } .navbar-wrapper .container { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar { padding-right: 0; padding-left: 0; }
/* The navbar becomes detached from the top, so we round the corners */ .navbar-wrapper .navbar { border-radius: 4px; }
/* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 20px; font-size: 21px; line-height: 1.4; }
.featurette-heading { font-size: 50px; }
}
@media (min-width: 992px) {
.featurette-heading { margin-top: 120px; }
}
/*
* Base structure */
/* Move down content because we have a fixed navbar that is 50px tall */ body {
padding-top: 50px;
}
/*
* Global add-ons */
.sub-header {
padding-bottom: 10px; border-bottom: 1px solid #eee;
}
/*
* Top navigation * Hide default border to remove 1px line. */
.navbar-fixed-top {
border: 0;
}
/*
* Sidebar */
/* Hide for mobile, show later */ .sidebar {
display: none;
} @media (min-width: 768px) {
.sidebar { position: fixed; top: 51px; bottom: 0; left: 0; z-index: 1000; display: block; padding: 20px; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ background-color: #f5f5f5; border-right: 1px solid #eee; }
}
/* Sidebar navigation */ .nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */ margin-bottom: 20px; margin-left: -20px;
} .nav-sidebar > li > a {
padding-right: 20px; padding-left: 20px;
} .nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus {
color: #fff; background-color: #428bca;
}
/*
* Main content */
.main {
padding: 20px;
} @media (min-width: 768px) {
.main { padding-right: 40px; padding-left: 40px; }
} .main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas */
.placeholders {
margin-bottom: 30px; text-align: center;
} .placeholders h4 {
margin-bottom: 0;
} .placeholder {
margin-bottom: 20px;
} .placeholder img {
display: inline-block; border-radius: 50%;
}