110
modifications
Différences entre les versions de « Atlas 380/iPad/notreavion.net »
Aller à la navigation
Aller à la recherche
Atlas 380/iPad/notreavion.net (voir la source)
Version du 29 mars 2015 à 16:08
, 29 mars 2015 à 16:08→/SelectInspiration
| Ligne 1 557 : | Ligne 1 557 : | ||
Dans le dossier css ne conserver que les fichiers normalize.css, cs-select.css et cs-skin-underline.css. | Dans le dossier css ne conserver que les fichiers normalize.css, cs-select.css et cs-skin-underline.css. | ||
Ce dernier fichier a été modifié pour respecter l'aspect graphique. | Ce dernier fichier a été modifié pour respecter l'aspect graphique de la page. | ||
cs-skin-underline.css | cs-skin-underline.css | ||
<syntaxhighlight lang="css"> | |||
@font-face { | |||
font-family: 'icomoon'; | |||
src:url('../fonts/icomoon/icomoon.eot?-rdnm34'); | |||
src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'), | |||
url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'), | |||
url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'), | |||
url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg'); | |||
font-weight: normal; | |||
font-style: normal; | |||
} | |||
div.cs-skin-underline { | |||
background: transparent; | |||
font-size: 1em; | |||
max-width: 220px; | |||
min-width :200px; | |||
} | |||
@media screen and (max-width: 33em) { | |||
div.cs-skin-underline { font-size: 1.2em; } | |||
} | |||
.cs-skin-underline > span { | |||
padding: 0.5em 3em 0.5em 0.5em; | |||
border-bottom: 3px solid #FA7E12; | |||
border-color: #FA7E12; | |||
font-weight: bold; | |||
color: blue; | |||
} | |||
.cs-skin-underline > span::after { | |||
font-family: 'icomoon'; | |||
content: '\e003'; | |||
right: 0.25em; | |||
-webkit-transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg); | |||
transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg); | |||
-webkit-transition: -webkit-transform 0.5s; | |||
transition: transform 0.5s; | |||
} | |||
.cs-skin-underline.cs-active > span::after { | |||
-webkit-transform: translate3d(0,-50%,0) rotate3d(0,0,1,270deg); | |||
transform: translate3d(0,-50%,0) rotate3d(0,0,1,270deg); | |||
} | |||
.cs-skin-underline .cs-options { | |||
background: #bbc7c8; | |||
opacity: 0; | |||
-webkit-transition: opacity 0.3s 0.4s, visibility 0s 0.7s; | |||
transition: opacity 0.3s 0.4s, visibility 0s 0.7s; | |||
} | |||
.cs-skin-underline.cs-active .cs-options { | |||
opacity: 1; | |||
-webkit-transition: opacity 0.3s; | |||
transition: opacity 0.3s; | |||
} | |||
.cs-skin-underline ul span { | |||
position: relative; | |||
text-transform: uppercase; | |||
font-size: 75%; | |||
font-weight: 700; | |||
letter-spacing: 1px; | |||
padding: 1.2em 0.8em; | |||
opacity: 0; | |||
-webkit-transform: translate3d(100%,0,0); | |||
transform: translate3d(100%,0,0); | |||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s; | |||
transition: opacity 0.3s, transform 0.3s; | |||
} | |||
.cs-select ul span::after { | |||
content: ''; | |||
opacity: 0; | |||
} | |||
.cs-select .cs-selected span::after { | |||
font-family: 'icomoon'; | |||
content: '\e00d'; | |||
opacity: 1; | |||
-webkit-transition: opacity 0.3s 0.7s; | |||
transition: opacity 0.3s 0.7s; | |||
} | |||
.cs-skin-underline ul span::before { | |||
content: ''; | |||
position: absolute; | |||
bottom: 1px; | |||
left: 0; | |||
height: 1px; | |||
width: 100%; | |||
background-color: #FA7E12; | |||
-webkit-transform: translate3d(200%,0,0); | |||
transform: translate3d(200%,0,0); | |||
-webkit-transition: -webkit-transform 0.3s; | |||
transition: transform 0.3s; | |||
} | |||
.cs-skin-underline.cs-active ul span, | |||
.cs-skin-underline.cs-active ul span::before { | |||
opacity: 1; | |||
-webkit-transform: translate3d(0,0,0); | |||
transform: translate3d(0,0,0); | |||
} | |||
.cs-skin-underline li:nth-child(5) span, | |||
.cs-skin-underline li:nth-child(5) span::before, | |||
.cs-skin-underline.cs-active li:first-child span, | |||
.cs-skin-underline.cs-active li:first-child span::before { | |||
-webkit-transition-delay: 0s; | |||
transition-delay: 0s; | |||
} | |||
.cs-skin-underline li:nth-child(4) span, | |||
.cs-skin-underline li:nth-child(4) span::before, | |||
.cs-skin-underline.cs-active li:nth-child(2) span, | |||
.cs-skin-underline.cs-active li:nth-child(2) span::before { | |||
-webkit-transition-delay: 0.05s; | |||
transition-delay: 0.05s; | |||
} | |||
.cs-skin-underline li:nth-child(3) span, | |||
.cs-skin-underline li:nth-child(3) span::before { | |||
-webkit-transition-delay: 0.1s; | |||
transition-delay: 0.1s; | |||
} | |||
.cs-skin-underline li:nth-child(2) span, | |||
.cs-skin-underline li:nth-child(2) span::before, | |||
.cs-skin-underline.cs-active li:nth-child(4) span, | |||
.cs-skin-underline.cs-active li:nth-child(4) span::before { | |||
-webkit-transition-delay: 0.15s; | |||
transition-delay: 0.15s; | |||
} | |||
.cs-skin-underline li:first-child span, | |||
.cs-skin-underline li:first-child span::before, | |||
.cs-skin-underline.cs-active li:nth-child(5) span, | |||
.cs-skin-underline.cs-active li:nth-child(5) span::before { | |||
-webkit-transition-delay: 0.2s; | |||
transition-delay: 0.2s; | |||
} /* more items require more delay declarations */ | |||
.cs-skin-underline .cs-options li span:hover, | |||
.cs-skin-underline .cs-options li.cs-focus span, | |||
.cs-skin-underline li.cs-selected span { | |||
color: #566473; | |||
background: transparent; | |||
} | |||
</syntaxhighlight> | |||
=== /KML_outputs === | === /KML_outputs === | ||