ben
/
bitshift
mirror of https://github.com/earwig/bitshift
1
1
Fork 0
Code Releases 1 Activity
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
parent
4cb566413e
commit
3df930029f
3 changed files with 63 additions and 24 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
     
  2. +31
    -16
      static/sass/index.sass
  3. +32
    -8
      templates/index.html

BIN
View File


+ 31
- 16
static/sass/index.sass View File

@@ -123,14 +123,11 @@ div#search-field

#sidebar
padding-left: 1%
width: 20%

*
font-size: 95%
width: 25%

>div
color: $baseColor2
font-size: 107%
font-size: 120%
padding-top: 5%

>ul
@@ -139,23 +136,41 @@ div#search-field
margin-bottom: 8%
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
background-color: blue
width: 80%
width: 75%

&.partly-visible
margin-top: 0%


+ 32
- 8
templates/index.html View File

@@ -39,14 +39,38 @@
Fields
</div>
<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>
<button id="add-group">
+


Write Preview
Loading…
Cancel
Save