Browse Source
Add checkbox-hack menu selection transitions.
Add:
templates/index.html, static/sass/index.sass
-Add pure CSS styling for "clicked" buttons, using the checkbox hack.
tags/v1.0^2
Severyn Kozak
10 years ago
3 changed files with 63 additions and 24 deletions
Unified View
Diff Options
-
BIN
-
+31 -16static/sass/index.sass
-
+32 -8templates/index.html
BIN
View File
+ 31
- 16
static/sass/index.sass
View File
| @@ -123,14 +123,11 @@ div#search-field | |||||
| #sidebar | #sidebar | ||||
| padding-left: 1% | padding-left: 1% | ||||
| width: 20% | |||||
| * | |||||
| font-size: 95% | |||||
| width: 25% | |||||
| >div | >div | ||||
| color: $baseColor2 | color: $baseColor2 | ||||
| font-size: 107% | |||||
| font-size: 120% | |||||
| padding-top: 5% | padding-top: 5% | ||||
| >ul | >ul | ||||
| @@ -139,23 +136,41 @@ div#search-field | |||||
| margin-bottom: 8% | margin-bottom: 8% | ||||
| margin-top: 2% | margin-top: 2% | ||||
| li button | |||||
| background-color: #F1F1F1 | |||||
| border: none | |||||
| width: 80% | |||||
| li | |||||
| margin-bottom: 2% | |||||
| label | |||||
| user-select: none | |||||
| div | |||||
| @extend .t3 | |||||
| background-color: #F1F1F1 | |||||
| border: none | |||||
| font-size: 96% | |||||
| padding: 3% | |||||
| width: 85% | |||||
| &:hover, &.selectedInputField | |||||
| @extend .t3 | |||||
| background-color: $baseColor2 | |||||
| color: white | |||||
| width: 90% | |||||
| &.clicked, &:hover | |||||
| @extend .t2 | |||||
| input[type="checkbox"] | |||||
| display: none | |||||
| background-color: $baseColor1 | |||||
| color: white | |||||
| width: 90% | |||||
| &:checked + label > div | |||||
| @extend .selectedInputField | |||||
| >button#add-group | |||||
| background-color: $baseColor1 | |||||
| color: white | |||||
| width: 90% | |||||
| #search-groups | #search-groups | ||||
| background-color: blue | background-color: blue | ||||
| width: 80% | |||||
| width: 75% | |||||
| &.partly-visible | &.partly-visible | ||||
| margin-top: 0% | margin-top: 0% | ||||
+ 32
- 8
templates/index.html
View File
| @@ -39,14 +39,38 @@ | |||||
| Fields | Fields | ||||
| </div> | </div> | ||||
| <ul> | <ul> | ||||
| <li><button id="language">languages</button></li> | |||||
| <li><button id="author">authors</button></li> | |||||
| <li><button id="modified">date last modified</button></li> | |||||
| <li><button id="created">date created</button></li> | |||||
| <li><button id="symbol">symbols</button></li> | |||||
| <li><button id="function">functions</button></li> | |||||
| <li><button id="class">classes</button></li> | |||||
| <li><button id="variable">variables</button></li> | |||||
| <li> | |||||
| <input type="checkbox" id="language"/> | |||||
| <label for="language"><div>languages</div></label> | |||||
| </li> | |||||
| <li> | |||||
| <input type="checkbox" id="author"/> | |||||
| <label for="author"><div>authors</div></label> | |||||
| </li> | |||||
| <li> | |||||
| <input type="checkbox" id="modified"/> | |||||
| <label for="modified"><div>date last modified</div></label> | |||||
| </li> | |||||
| <li> | |||||
| <input type="checkbox" id="created"/> | |||||
| <label for="created"><div>date created</div></label> | |||||
| </li> | |||||
| <li> | |||||
| <input type="checkbox" id="symbol"/> | |||||
| <label for="symbol"><div>symbols</div></label> | |||||
| </li> | |||||
| <li> | |||||
| <input type="checkbox" id="function"/> | |||||
| <label for="function"><div>functions</div></label> | |||||
| </li> | |||||
| <li> | |||||
| <input type="checkbox" id="class"/> | |||||
| <label for="class"><div>classes</div></label> | |||||
| </li> | |||||
| <li> | |||||
| <input type="checkbox" id="variable"/> | |||||
| <label for="variable"><div>variables</div></label> | |||||
| </li> | |||||
| </ul> | </ul> | ||||
| <button id="add-group"> | <button id="add-group"> | ||||
| + | + | ||||