Extra component: carousel
This commit is contained in:
Angelos Chalaris
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
|
||||
- **collapse**: collapse and accordion components `GZIPPED SIZE`: 286 bytes
|
||||
- **progress**: progress bar styles `GZIPPED SIZE`: 193 bytes
|
||||
- **carousel**: slideshow component `GZIPPED SIZE`: 383 bytes
|
||||
|
||||
TODO:
|
||||
- Components
|
||||
- Carousel (if possible)
|
||||
- Utilities
|
||||
- Breadcrumbs
|
||||
- Panels, Wells & Alerts (alerts will support closing via checkbox)
|
||||
|
|
@ -38,6 +38,7 @@ TODO:
|
|||
- Update menu's and stuff
|
||||
- Update wiki accordingly, fix incomplete pages with proper documentation
|
||||
- Add pictures in README.md and showcase flavors (also in wiki)
|
||||
- Package for NPM and Bowser
|
||||
- Flavors
|
||||
- NiteOwl Flavor (dark flavor, like the thing that cquanu has for github, colors look cool)
|
||||
- Bootstrap Flavor (to ease transition from that framework)
|
||||
|
|
|
|||
|
|
@ -1410,3 +1410,78 @@ input[type="radio"]:checked.acrd + label {
|
|||
.prg > span.red {
|
||||
background-color: #ea4848;
|
||||
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
|
|
@ -355,3 +355,19 @@ $progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for t
|
|||
@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-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);
|
||||
|
|
@ -355,3 +355,19 @@ $progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for t
|
|||
@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-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