Skip to content
This repository has been archived by the owner on Apr 16, 2019. It is now read-only.

Commit

Permalink
Add lock screen widget and test. Will add docs soon
Browse files Browse the repository at this point in the history
  • Loading branch information
Ian Maffett committed Apr 22, 2015
1 parent edeb03a commit f824f96
Show file tree
Hide file tree
Showing 12 changed files with 1,134 additions and 67 deletions.
11 changes: 7 additions & 4 deletions Gruntfile.js
View file
Expand Up @@ -49,7 +49,8 @@ module.exports = function (grunt) {
"src/af.drawer.js",
"src/af.swipereveal.js",
"src/af.desktopBrowsers.js",
"src/af.toast.js"
"src/af.toast.js",
"src/af.lockscreen.js"
]
}
},
Expand Down Expand Up @@ -80,7 +81,8 @@ module.exports = function (grunt) {
"src/less/forms.less",
"src/less/grid.less",
"src/less/lists.less",
"src/less/splitview.less"
"src/less/splitview.less",
"src/less/af.lockscreen.less"
]
}
}
Expand Down Expand Up @@ -140,7 +142,8 @@ module.exports = function (grunt) {
"src/less/forms.less",
"src/less/grid.less",
"src/less/lists.less",
"src/less/splitview.less"
"src/less/splitview.less",
"src/less/af.lockscreen.less"
]
}
}
Expand All @@ -161,7 +164,7 @@ module.exports = function (grunt) {
"watch"
]);

grunt.registerTask("rebuild" , ["concat","closure-compiler","usebanner"]);
grunt.registerTask("rebuild" , ["less","concat","closure-compiler","usebanner"]);
grunt.registerTask("hint" , ["jshint"]);
grunt.registerTask("test" , ["karma"]);

Expand Down
145 changes: 145 additions & 0 deletions build/af.ui.base.css
View file
Expand Up @@ -2534,3 +2534,148 @@ header .menuButton:after {
position: absolute;
width: 15px;
}

#lockScreen {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
left: 0px;
z-index: 99999999999999;
background: #ccc;
}
#lockScreen .flexContainer {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}
#lockScreen .keyboard {
width: 100%;
position: absolute;
bottom: 0px;
}
#lockScreen .keyboard .row {
display: block;
width: 100%;
text-align: center;
height: 50px;
line-height: 50px;
font-size: 1.3em;
font-weight: bold;
}
#lockScreen .keyboard .row div {
display: block;
width: 33.33%;
float: left;
border: 1px solid #000;
justify-content: center;
text-align: center;
}
#lockScreen .keyboard .row div.grey {
background: white;
}
#lockScreen .content {
position: absolute;
top: 0px;
bottom: 170px;
width: 100%;
text-align: center;
-moz-box-flex: 0;
-webkit-box-flex: 0;
-ms-box-flex: 0;
box-flex: 0;
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-ms-box-ordinal-group: 1;
box-ordinal-group: 1;
align-items: center;
justify-content: center;
}
#lockScreen .touched {
background-color: white;
}
#lockScreen input[type="password"] {
height: 50px;
font-size: 40px;
width: 200px;
text-align: center;
}
#lockScreen .icon {
font-size: 50px;
color: white;
margin-bottom: 10px;
}
#lockScreen .error {
padding-top: 10px;
visibility: hidden;
color: red;
font-weight: bold;
font-size: 1.3em;
}
#lockScreen.round .content {
bottom: 250px;
}
#lockScreen.round .keyboard {
bottom: 10px;
}
#lockScreen.round .keyboard .row {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
margin-bottom: 20px;
}
#lockScreen.round .keyboard .row div {
-moz-box-flex: 0;
-webkit-box-flex: 0;
-ms-box-flex: 0;
box-flex: 0;
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-ms-box-ordinal-group: 1;
box-ordinal-group: 1;
float: none;
width: 60px;
height: 60px;
border-radius: 60px;
line-height: 60px;
margin: 10px;
cursor: pointer;
}
#lockScreen.round .keyboard .row div.grey {
background: transparent;
border: none;
}
#lockScreen.round input[type="password"] {
height: 50px;
font-size: 40px;
width: 200px;
text-align: center;
background: transparent;
color: white;
}
#lockScreen.round input[type="password"]::-webkit-input-placeholder {
color: white;
}
#lockScreen.round input[type="password"]::-moz-placeholder {
/* Firefox 19+ */
color: white;
}
#lockScreen.round input[type="password"]:-ms-input-placeholder {
color: white;
}
163 changes: 163 additions & 0 deletions build/af.ui.base.less
View file
Expand Up @@ -2297,4 +2297,167 @@ header {
position: absolute;
width: 15px;
}
}

#lockScreen {
position: absolute;
top:0px;
bottom:0px;
width:100%;
height:100%;
left:0px;
z-index:99999999999999;
background: #ccc;

.flexContainer {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;

-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
}

.keyboard {
width:100%;
position:absolute;
bottom:0px;
.row {
display: block;
width:100%;
text-align: center;
height:50px;
line-height:50px;
font-size:1.3em;
font-weight: bold;
div {
display: block;
width:33.33%;
float:left;
border:1px solid #000;
justify-content: center;
text-align: center;
}
div.grey {
background:white;
}
}
}

.content {
position:absolute;
top:0px;
bottom:170px;
width:100%;
text-align:center;
-moz-box-flex: 0;
-webkit-box-flex: 0;
-ms-box-flex: 0;
box-flex: 0;
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-ms-box-ordinal-group: 1;
box-ordinal-group: 1;
align-items: center;
justify-content: center;
}


.touched {
background-color: white;
}

input[type="password"] {
height:50px;
font-size:40px;
width:200px;
text-align: center;
}

.icon {
font-size:50px;
color:white;
margin-bottom: 10px;
}
.error {
padding-top:10px;
visibility: hidden;
color:red;
font-weight:bold;
font-size:1.3em;
}

&.round{
.content {
bottom:250px;
}
.keyboard{
bottom:10px;
.row {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-align: center;
-moz-box-align: center;
box-align: center;

-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
margin-bottom:20px;
div {
-moz-box-flex: 0;
-webkit-box-flex: 0;
-ms-box-flex: 0;
box-flex: 0;
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-ms-box-ordinal-group: 1;
box-ordinal-group: 1;
float:none;
width:60px;
height:60px;
border-radius:60px;
line-height:60px;
margin:10px;
cursor:pointer;
}
div.grey {
background:transparent;
border:none;
}
}
}
input[type="password"] {
height:50px;
font-size:40px;
width:200px;
text-align: center;
background: transparent;
color:white;
}


input[type="password"]::-webkit-input-placeholder {
color: white;
}


input[type="password"]::-moz-placeholder { /* Firefox 19+ */
color: white;
}

input[type="password"]:-ms-input-placeholder {
color: white;
}
}
}

0 comments on commit f824f96

Please sign in to comment.