source: spip-zone/_squelettes_/spipr-educ/trunk/css/carousel.less @ 110940

Last change on this file since 110940 was 110940, checked in by johan.pustoch@…, 2 years ago

Premier depot des squelettes issus de divers developpements (bases sur spipr-dist).
Encore beaucoup de menage a faire (en particulier dans les fichiers less).
Pas vraiment de personnalisation simple pour le moment.
On peut surcharger variables.less et modifier les color1, color2, color3 pour changer les couleurs de base.
Le plugin est compatible avec menus (sinon un menu de liens et de rubriques est genere)

  • Property svn:executable set to *
File size: 4.4 KB
Line 
1//
2// Carousel
3// --------------------------------------------------
4
5@import "css/variables.less";
6
7/* Carousel base class */
8.carousel{
9    position: relative;
10    font-size:1.1em;
11    line-height:1.5;
12    margin:0 0 1em 0;
13    padding:0 0 0 0;
14    border: 1px solid @grayLighter;
15    height:250px;
16    background-color: @grayLighter;
17    .carousel-inner {
18        overflow: hidden;
19        width: 100%;
20        position: relative;   
21        > .item {
22            strong.h3-like{font-weight:normal;}
23            overflow:auto;
24            display: none;
25            position: relative;
26            .transition(.6s ease-in-out left);
27            // Account for jankitude on images
28            > img,
29            > a > img {
30                display: block;
31            }
32            article{
33                width:100%;
34                height:250px;
35                overflow:hidden;
36                margin-bottom:0;
37                .introduction{padding:0 1em 1em 2em;}
38                a{
39                    display:block;
40                    padding:0 0 0 1em ;
41                    font-size:1.5em;
42                    font-weight:bold;
43                    line-height:1em;
44                    &:hover{text-decoration:none;}
45                    .spip_logos{margin:0;}
46                    .titre{font-variant:small-caps;display: block;padding-top:.8em;}
47                }
48            }           
49        }
50        > .active,
51        > .next,
52        > .prev { display: block; }
53        > .active {
54            left: 0;
55        }
56        > .next,
57        > .prev {
58            position: absolute;
59            top: 0;
60            width: 100%;
61        }
62        > .next {
63            left: 100%;
64        }
65        > .prev {
66            left: -100%;
67        }
68        > .next.left,
69        > .prev.right {
70            left: 0;
71        }
72        > .active.left {
73            left: -100%;
74        }
75        > .active.right {
76            left: 100%;
77        }
78    }
79    // Left/right controls for nav
80    // ---------------------------
81    .carousel-control {
82        color: @white;
83        background-color: @color2;
84        &:hover,&:focus{background-color: darken(@color1,10%);}
85        position: absolute;
86        bottom: 5px;
87        top:inherit;
88        left: 5px;
89        height:30px;
90        width:30px;
91        margin: 0;
92        padding: 8px 12px 12px 8px;
93        font-size:30px;
94        font-family:helvetica,arial,sans-serif;
95        font-weight: 100;
96        line-height:1;
97        text-align: center;
98        border: 0;
99        .border-radius(30px);
100        .opacity(0);
101        transition:opacity 0.3s ease-in-out  0.2s;
102        // Reposition the right one
103        &.right {
104          left: auto;
105          right: 5px;
106          padding: 8px 8px 12px 12px;
107        }
108        // Hover/focus state
109        &:hover,&:focus {
110            text-decoration: none;
111        }
112    }
113    .carousel-indicators,.carousel-stop{
114        z-index: 5;
115        margin: 0;
116        list-style: none;
117        li{
118            color: lighten(@color2,5%);
119            cursor: pointer;
120            display: inline;
121            text-indent: inherit;
122            height: auto;
123            width: auto;
124            background-color: transparent !important;
125            float: none;
126            &:hover,&:active,&:focus{color: darken(@color1,20%);background: none;}
127        }
128    }
129    .carousel-indicators{
130        position: absolute;
131        bottom:4px;
132        left: 45%;
133        li{
134            font-size:1.5em;
135            margin:0 5px 0 5px;
136            padding: 0 0 0 0;
137            display: inline-block;
138            .border-radius(5px);
139            &.active{color: lighten(@color1,10%);}
140        }
141    }
142    .carousel-stop{
143        position: absolute;
144        bottom:4px;
145        left:35%;
146        margin-left: 0;
147        margin-bottom: 0;
148        font-family: helvetica,arial,sans-serif;
149        li{
150            font-size:1.5em;
151        }
152    }
153    &:hover{
154        .carousel-indicators,.carousel-stop{
155            li{
156                color: @color2;
157                &.active,&.active:hover{color: @color1;}
158                &:hover,&:active,&:focus{color: darken(@color1,10%);}
159            }
160        }
161        .carousel-control {
162            .opacity(70);
163            transition: opacity 0.3s ease-in-out  0;
164        }
165    }
166   
167}
Note: See TracBrowser for help on using the repository browser.