forked from mirrors/Scribe.js
Togglebutton theming
Dropdown menu theming remaining
This commit is contained in:
Mathew Kurian
parent
3291617f24
commit
b4f5bb42e0
3 changed files with 145 additions and 7 deletions
|
|
@ -13,6 +13,7 @@
|
|||
border: 1px solid #2C2C2C;
|
||||
color: #FFF;
|
||||
font-family: "Open Sans";
|
||||
transition: background 250ms;
|
||||
}
|
||||
|
||||
.autocomplete ul{
|
||||
|
|
@ -50,3 +51,7 @@
|
|||
background: #666;
|
||||
color: #fff;
|
||||
}
|
||||
.autocomplete input:focus {
|
||||
background: #FFF;
|
||||
color: #000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<h3 class="sidebar__title">
|
||||
Files
|
||||
<span class="tiny pull-right">
|
||||
<form action="">
|
||||
<form action="" class="checkbox">
|
||||
<input type="checkbox" id="selectAll" ng-model="selectAll">
|
||||
<label for="selectAll">Select all</label>
|
||||
</form>
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
<ul class="content">
|
||||
|
||||
<li ng-repeat="file in currentFiles" class="sidebar__item">
|
||||
<form action="">
|
||||
<input type="checkbox" id="check{{$id}}" ng-model="file.selected">
|
||||
<form action="" class="checkbox">
|
||||
<input type="checkbox" class="checkbox" id="check{{$id}}" ng-model="file.selected">
|
||||
<label for="check{{$id}}">{{file.name}}</label>
|
||||
</form>
|
||||
</li>
|
||||
|
|
|
|||
141
static/style.css
141
static/style.css
|
|
@ -54,6 +54,7 @@ body {
|
|||
font-size: 9px;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
width: 95px;
|
||||
}
|
||||
|
||||
.input {
|
||||
|
|
@ -111,7 +112,7 @@ body {
|
|||
.header__menu-button {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
top: 12px;
|
||||
height: 30px;
|
||||
width: 40px;
|
||||
|
||||
|
|
@ -122,7 +123,7 @@ body {
|
|||
.header__title {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 70px;
|
||||
left: 55px;
|
||||
height: 30px;
|
||||
width: 500px;
|
||||
font-size: 11px;
|
||||
|
|
@ -360,6 +361,7 @@ body {
|
|||
position: fixed;
|
||||
z-index: 5;
|
||||
top: 49px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.actions {
|
||||
margin: 0;
|
||||
|
|
@ -403,7 +405,9 @@ body {
|
|||
|
||||
background: #222;
|
||||
outline: none;
|
||||
background: #222; font-size: 11px; padding: 8px; color: #FFF; border: 1px solid #2C2C2C;
|
||||
background: #222; font-size: 11px;
|
||||
padding: 8px 4px; color: #FFF; border: 1px solid #2C2C2C;
|
||||
transition: background 250ms;
|
||||
}
|
||||
.action--reload {
|
||||
color: #888;
|
||||
|
|
@ -540,10 +544,11 @@ body {
|
|||
right: 22px;
|
||||
width: auto;
|
||||
|
||||
border-color: #333;
|
||||
border-radius: 4px;
|
||||
margin-top: 5px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 5px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -575,6 +580,7 @@ label {
|
|||
position: relative;
|
||||
top: -3px;
|
||||
font-size: 9px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
form.ng-pristine.ng-valid {
|
||||
|
|
@ -625,3 +631,130 @@ button.toggle-button.active {
|
|||
.log:last-child .log__item {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.action--search input:focus {
|
||||
color: #000;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
/*
|
||||
.toggle {
|
||||
width: 62px;
|
||||
height: 19px;
|
||||
background: #333;
|
||||
position: relative;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.toggle:after {
|
||||
content: 'OFF';
|
||||
color: #111;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
z-index: 0;
|
||||
font: 9px "Open Sans", sans-serif;
|
||||
font-weight: bold;
|
||||
top: 3px;
|
||||
}
|
||||
.toggle:before {
|
||||
content: 'ON';
|
||||
color: #14654C;
|
||||
position: absolute;
|
||||
left: 9px;
|
||||
z-index: 2;
|
||||
font: 9px "Open Sans", sans-serif;
|
||||
font-weight: bold;
|
||||
top: 3px;
|
||||
}
|
||||
.toggle .top {
|
||||
background:#21ce99;
|
||||
position: absolute;
|
||||
left:0;
|
||||
right:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
border-radius: 50px;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
-webkit-transition: all 0.15s ease;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.toggle label {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 17px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
z-index: 2;
|
||||
background: #fff;
|
||||
border-radius: 50px;
|
||||
-webkit-transition: all 0.4s ease;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.toggle input[type=checkbox] {
|
||||
visibility: hidden;
|
||||
}
|
||||
.toggle input[type=checkbox]:checked ~ label {
|
||||
left: 29px;
|
||||
}
|
||||
|
||||
.toggle input[type=checkbox]:checked ~ .top {
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
/* .checkbox */
|
||||
.checkbox {
|
||||
width: auto;
|
||||
position: relative;
|
||||
}
|
||||
.checkbox label {
|
||||
width: 100%;
|
||||
height: 13px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 3px;
|
||||
text-indent: 22px;
|
||||
}
|
||||
.checkbox label:after {
|
||||
content: '';
|
||||
width: 9px;
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 2px;
|
||||
border: 3px solid #21ce99;
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
background: transparent;
|
||||
opacity: 0;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.checkbox label:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 2px;
|
||||
background: #111;
|
||||
border: 1px solid #333;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
.checkbox label:hover::after {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.checkbox input[type=checkbox] {
|
||||
visibility: hidden;
|
||||
}
|
||||
.checkbox input[type=checkbox]:checked + label:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue