spip-contrib-extensions
/
formidable
100
4
Fork 1
Code Issues 33 Pull Requests 2 Releases 1 Activity
Browse Source

améliorer la barre de progression 

Inversons la logique actuelle…

Le span passe en absolute et on passe le texte en relative. Ca permet d'avoir la même baseline du texte entre le label et le texte dans la barre (ex: 67% - 8 réponses). Accessoirement ca permet de modifier la taille du texte effet de débord (suppression de la hauteur en px de .progress-bar).

Eclaircir le gris, trop foncé pour y mettre du texte par dessus.

En attendant html5 qui a sa propre balise <progress>
pull/1/head
Fa_b 3 years ago
parent
33be4e9230
commit
3945c56342
1 changed files with 23 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      css/formidable_analyse.css.html

44
css/formidable_analyse.css.html
Unescape View File

@ -2,7 +2,6 @@
.progress-bar {
background-color: #f1f1f1;
height: 20px;
padding: 1px;
margin: 2px 0;
-moz-border-radius: 5px;
@ -20,22 +19,25 @@
-webkit-moz-text-shadow: 0 1px 1px #fff;
-moz-text-shadow: 0 1px 1px #fff;
text-shadow: 0 1px 1px #fff;
position:absolute;
top:2px;
left:0;
position:relative;
}
.progress-bar strong small {font-size:90%; font-weight:normal;}
.progress-bar span {
background-color: #bbb;
background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#777));
background-image: -webkit-linear-gradient(top, #bbb, #777);
background-image: -moz-linear-gradient(top, #bbb, #777);
background-image: -ms-linear-gradient(top, #bbb, #777);
background-image: -o-linear-gradient(top, #bbb, #777);
background-image: linear-gradient(top, #bbb, #777);
display: inline-block;
height: 100%;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999));
background-image: -webkit-linear-gradient(top, #ddd, #999);
background-image: -moz-linear-gradient(top, #ddd, #999);
background-image: -ms-linear-gradient(top, #ddd, #999);
background-image: -o-linear-gradient(top, #ddd, #999);
background-image: linear-gradient(top, #ddd, #999);
display: block;
position: absolute;
top: 2px;
bottom: 2px;
left: 2px;
height: calc(100% - 4px);
max-width: calc(100% - 4px);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
@ -50,13 +52,13 @@
}
.progress-bar.gray span {
background-color: #bbb;
background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#777));
background-image: -webkit-linear-gradient(top, #bbb, #777);
background-image: -moz-linear-gradient(top, #bbb, #777);
background-image: -ms-linear-gradient(top, #bbb, #777);
background-image: -o-linear-gradient(top, #bbb, #777);
background-image: linear-gradient(top, #bbb, #777);
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999));
background-image: -webkit-linear-gradient(top, #ddd, #999);
background-image: -moz-linear-gradient(top, #ddd, #999);
background-image: -ms-linear-gradient(top, #ddd, #999);
background-image: -o-linear-gradient(top, #ddd, #999);
background-image: linear-gradient(top, #ddd, #999);
}
.progress-bar.blue span {
@ -106,4 +108,4 @@
.grille_choix td {
padding-top: .3462em;
padding-bottom: .3462em;
}
}

Write Preview
Loading…
Cancel
Save