Extra component: carousel
This commit is contained in:
parent
ae5fcc6a07
commit
ce16809a33
|
@ -20,10 +20,10 @@ A minimal Sass-y responsive mobile-first style-agnostic CSS framework.
|
||||||
- **dropdown**: dropdown menu for the navigation bar `GZIPPED SIZE`: 136 bytes
|
- **dropdown**: dropdown menu for the navigation bar `GZIPPED SIZE`: 136 bytes
|
||||||
- **collapse**: collapse and accordion components `GZIPPED SIZE`: 286 bytes
|
- **collapse**: collapse and accordion components `GZIPPED SIZE`: 286 bytes
|
||||||
- **progress**: progress bar styles `GZIPPED SIZE`: 193 bytes
|
- **progress**: progress bar styles `GZIPPED SIZE`: 193 bytes
|
||||||
|
- **carousel**: slideshow component `GZIPPED SIZE`: 383 bytes
|
||||||
|
|
||||||
TODO:
|
TODO:
|
||||||
- Components
|
- Components
|
||||||
- Carousel (if possible)
|
|
||||||
- Utilities
|
- Utilities
|
||||||
- Breadcrumbs
|
- Breadcrumbs
|
||||||
- Panels, Wells & Alerts (alerts will support closing via checkbox)
|
- Panels, Wells & Alerts (alerts will support closing via checkbox)
|
||||||
|
@ -38,6 +38,7 @@ TODO:
|
||||||
- Update menu's and stuff
|
- Update menu's and stuff
|
||||||
- Update wiki accordingly, fix incomplete pages with proper documentation
|
- Update wiki accordingly, fix incomplete pages with proper documentation
|
||||||
- Add pictures in README.md and showcase flavors (also in wiki)
|
- Add pictures in README.md and showcase flavors (also in wiki)
|
||||||
|
- Package for NPM and Bowser
|
||||||
- Flavors
|
- Flavors
|
||||||
- NiteOwl Flavor (dark flavor, like the thing that cquanu has for github, colors look cool)
|
- NiteOwl Flavor (dark flavor, like the thing that cquanu has for github, colors look cool)
|
||||||
- Bootstrap Flavor (to ease transition from that framework)
|
- Bootstrap Flavor (to ease transition from that framework)
|
||||||
|
|
|
@ -1410,3 +1410,78 @@ input[type="radio"]:checked.acrd + label {
|
||||||
.prg > span.red {
|
.prg > span.red {
|
||||||
background-color: #ea4848;
|
background-color: #ea4848;
|
||||||
color: #eeeeee; }
|
color: #eeeeee; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
Mixin for the carousel component.
|
||||||
|
Parameters:
|
||||||
|
- $carousel-name : The class name for the carousel.
|
||||||
|
- $carousel-width : The width of the carousel. [1]
|
||||||
|
- $carousel-height : The height of the carousel.
|
||||||
|
- $carousel-border : The style of the carousel's border.
|
||||||
|
- $carousel-border-radius : The border-radius of the carousel.
|
||||||
|
- $carousel-container-bg-color : The background color of the carousel.
|
||||||
|
- $carousel-content-padding : The padding of the carousel's contents. [2]
|
||||||
|
- $carousel-description-color : The text color of the carousel's description.
|
||||||
|
- $carousel-description-bg-color : The background color of the carousel's description.
|
||||||
|
- $carousel-description-top : The distance of the carousel's description from the top of the container. [3]
|
||||||
|
- $carousel-description-height : The height of the carousel's description area. [3]
|
||||||
|
- $carousel-control-top : The distance of the carousel's controls from the top of the container. [3]
|
||||||
|
- $carousel-control-font-size : The font-size of the carousel's controls.
|
||||||
|
- $carousel-control-color : The text color of the carousel's controls.
|
||||||
|
Notes:
|
||||||
|
- [1] : The height of the carousel is suggested to be defined as a percentage so that
|
||||||
|
it makes it responsive for smaller screens.
|
||||||
|
- [2] : The value of $carousel-content-padding only applies to images inside the carousel.
|
||||||
|
- [3] : The distances from the top are used for positioning the elements. The height of the
|
||||||
|
desccription should normally be the height of the container minus the top distance of
|
||||||
|
the description. Control distance should be about 90% of the container's height.
|
||||||
|
*/
|
||||||
|
.carousel {
|
||||||
|
position: relative;
|
||||||
|
width: 80%;
|
||||||
|
height: 500px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 4px; }
|
||||||
|
.carousel input[type="radio"] {
|
||||||
|
display: none; }
|
||||||
|
.carousel input[type="radio"] + div {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #e7e7e7; }
|
||||||
|
.carousel input[type="radio"] + div > img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
margin: auto; }
|
||||||
|
.carousel input[type="radio"] + div > div {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 160px;
|
||||||
|
overflow: auto;
|
||||||
|
left: 0;
|
||||||
|
top: 340px;
|
||||||
|
background-color: #222;
|
||||||
|
color: #f5f5f5;
|
||||||
|
opacity: 0.1; }
|
||||||
|
.carousel input[type="radio"] + div > div:hover, .carousel input[type="radio"] + div > div:active, .carousel input[type="radio"] + div > div:focus {
|
||||||
|
opacity: 0.8; }
|
||||||
|
.carousel input[type="radio"] + div + label {
|
||||||
|
position: relative;
|
||||||
|
z-index: 998;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 450px;
|
||||||
|
color: #fafafa;
|
||||||
|
font-size: 1.8em; }
|
||||||
|
.carousel input[type="radio"] + div + label:before {
|
||||||
|
content: '\25cb'; }
|
||||||
|
.carousel input[type="radio"]:checked + div {
|
||||||
|
display: block; }
|
||||||
|
.carousel input[type="radio"]:checked + div + label:before {
|
||||||
|
content: '\25cf'; }
|
||||||
|
|
2
flavors/mini-default.min.css
vendored
2
flavors/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -354,4 +354,20 @@ $progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for t
|
||||||
// information refer to the _progress.scss file to check the definitions.
|
// information refer to the _progress.scss file to check the definitions.
|
||||||
@include make-progress($progress-class-name, 20px, 4px, $progress-bg-color, 0.8em, $progress-bar-color, $progress-bar-bg-color);
|
@include make-progress($progress-class-name, 20px, 4px, $progress-bg-color, 0.8em, $progress-bar-color, $progress-bar-bg-color);
|
||||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
||||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Carousel module (_carousel.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Carousel class names.
|
||||||
|
$carousel-class-name: carousel; // Name for the carousel class
|
||||||
|
// Carousel colors and styles.
|
||||||
|
$carousel-border: 1px solid #ccc; // Border style for the carousel
|
||||||
|
$carousel-content-bg-color: #e7e7e7; // Background color for the carousel
|
||||||
|
$carousel-description-color: $body-bg-color; // Color for the text in the carousel's description
|
||||||
|
$carousel-description-bg-color: $body-color; // Background color for the carousel's description
|
||||||
|
$carousel-control-color: #fafafa; // Color for the carousel's control elements
|
||||||
|
// Enable carousel (_carousel.scss). (Use individual mixins below to use.)
|
||||||
|
@import '../scss/mini-extra/carousel';
|
||||||
|
// Use carousel mixin to create carousel with given specs. For more
|
||||||
|
// information refer to the _carousel.scss file to check the definitions.
|
||||||
|
@include make-carousel($carousel-class-name, 80%, 500px, $carousel-border, 4px, $carousel-content-bg-color, 10px, $carousel-description-color, $carousel-description-bg-color, 340px, 160px, 450px, 1.8em, $carousel-control-color);
|
|
@ -354,4 +354,20 @@ $progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for t
|
||||||
// information refer to the _progress.scss file to check the definitions.
|
// information refer to the _progress.scss file to check the definitions.
|
||||||
@include make-progress($progress-class-name, 20px, 4px, $progress-bg-color, 0.8em, $progress-bar-color, $progress-bar-bg-color);
|
@include make-progress($progress-class-name, 20px, 4px, $progress-bg-color, 0.8em, $progress-bar-color, $progress-bar-bg-color);
|
||||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
||||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
||||||
|
//====================================================================
|
||||||
|
// Variable definitions for the Carousel module (_carousel.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Carousel class names.
|
||||||
|
$carousel-class-name: carousel; // Name for the carousel class
|
||||||
|
// Carousel colors and styles.
|
||||||
|
$carousel-border: 1px solid #ccc; // Border style for the carousel
|
||||||
|
$carousel-content-bg-color: #e7e7e7; // Background color for the carousel
|
||||||
|
$carousel-description-color: $body-bg-color; // Color for the text in the carousel's description
|
||||||
|
$carousel-description-bg-color: $body-color; // Background color for the carousel's description
|
||||||
|
$carousel-control-color: #fafafa; // Color for the carousel's control elements
|
||||||
|
// Enable carousel (_carousel.scss). (Use individual mixins below to use.)
|
||||||
|
@import 'mini-extra/carousel';
|
||||||
|
// Use carousel mixin to create carousel with given specs. For more
|
||||||
|
// information refer to the _carousel.scss file to check the definitions.
|
||||||
|
@include make-carousel($carousel-class-name, 80%, 500px, $carousel-border, 4px, $carousel-content-bg-color, 10px, $carousel-description-color, $carousel-description-bg-color, 340px, 160px, 450px, 1.8em, $carousel-control-color);
|
92
scss/mini-extra/_carousel.scss
Normal file
92
scss/mini-extra/_carousel.scss
Normal file
|
@ -0,0 +1,92 @@
|
||||||
|
/*
|
||||||
|
Mixin for the carousel component.
|
||||||
|
Parameters:
|
||||||
|
- $carousel-name : The class name for the carousel.
|
||||||
|
- $carousel-width : The width of the carousel. [1]
|
||||||
|
- $carousel-height : The height of the carousel.
|
||||||
|
- $carousel-border : The style of the carousel's border.
|
||||||
|
- $carousel-border-radius : The border-radius of the carousel.
|
||||||
|
- $carousel-container-bg-color : The background color of the carousel.
|
||||||
|
- $carousel-content-padding : The padding of the carousel's contents. [2]
|
||||||
|
- $carousel-description-color : The text color of the carousel's description.
|
||||||
|
- $carousel-description-bg-color : The background color of the carousel's description.
|
||||||
|
- $carousel-description-top : The distance of the carousel's description from the top of the container. [3]
|
||||||
|
- $carousel-description-height : The height of the carousel's description area. [3]
|
||||||
|
- $carousel-control-top : The distance of the carousel's controls from the top of the container. [3]
|
||||||
|
- $carousel-control-font-size : The font-size of the carousel's controls.
|
||||||
|
- $carousel-control-color : The text color of the carousel's controls.
|
||||||
|
Notes:
|
||||||
|
- [1] : The height of the carousel is suggested to be defined as a percentage so that
|
||||||
|
it makes it responsive for smaller screens.
|
||||||
|
- [2] : The value of $carousel-content-padding only applies to images inside the carousel.
|
||||||
|
- [3] : The distances from the top are used for positioning the elements. The height of the
|
||||||
|
desccription should normally be the height of the container minus the top distance of
|
||||||
|
the description. Control distance should be about 90% of the container's height.
|
||||||
|
*/
|
||||||
|
@mixin make-carousel( $carousel-name, $carousel-width, $carousel-height, $carousel-border,
|
||||||
|
$carousel-border-radius, $carousel-container-bg-color, $carousel-content-padding,
|
||||||
|
$carousel-description-color, $carousel-description-bg-color,
|
||||||
|
$carousel-description-top, $carousel-description-height, $carousel-control-top,
|
||||||
|
$carousel-control-font-size, $carousel-control-color ){
|
||||||
|
.#{$carousel-name}{
|
||||||
|
position: relative;
|
||||||
|
width: $carousel-width;
|
||||||
|
height: $carousel-height;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
border: $carousel-border;
|
||||||
|
border-radius: $carousel-border-radius;
|
||||||
|
& input[type="radio"]{
|
||||||
|
display: none;
|
||||||
|
& + div{
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
padding: $carousel-content-padding;
|
||||||
|
background-color: $carousel-container-bg-color;
|
||||||
|
& > img{
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
& > div{
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: $carousel-description-height;
|
||||||
|
overflow: auto;
|
||||||
|
left: 0;
|
||||||
|
top: $carousel-description-top;
|
||||||
|
background-color: $carousel-description-bg-color;
|
||||||
|
color: $carousel-description-color;
|
||||||
|
opacity: 0.1;
|
||||||
|
&:hover, &:active, &:focus{
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& + label{
|
||||||
|
position: relative;
|
||||||
|
z-index: 998;
|
||||||
|
cursor: pointer;
|
||||||
|
top: $carousel-control-top;
|
||||||
|
color: $carousel-control-color;
|
||||||
|
font-size: $carousel-control-font-size;
|
||||||
|
&:before{
|
||||||
|
content:'\25cb';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:checked + div{
|
||||||
|
display: block;
|
||||||
|
& + label{
|
||||||
|
&:before{
|
||||||
|
content:'\25cf';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue