Browse Source

Edit credential

brantje 2 years ago
parent
commit
a7409c6070
No account linked to committer's email address

+ 314
- 51
css/browser_action.css View File

@@ -1,8 +1,252 @@
1
-/* CSS used here will be applied after bootstrap.css */
2 1
 /* Header Footer Styles */
2
+.radial-progress {
3
+  display: inline-block;
4
+  left: 5px;
5
+  top: 0px;
6
+  position: relative;
7
+  width: 10px;
8
+  height: 10px;
9
+  background-color: #d6dadc;
10
+  border-radius: 50%; }
11
+  .radial-progress .circle .mask, .radial-progress .circle .fill {
12
+    width: 10px;
13
+    height: 10px;
14
+    position: absolute;
15
+    border-radius: 50%;
16
+    -webkit-transition: -webkit-transform 0.5s;
17
+    -moz-transition: -moz-transform 0.5s;
18
+    transition: transform 0.5s;
19
+    -webkit-backface-visibility: hidden;
20
+    backface-visibility: hidden; }
21
+  .radial-progress .circle .mask {
22
+    clip: rect(0px, 10px, 10px, 5px); }
23
+    .radial-progress .circle .mask .fill {
24
+      clip: rect(0px, 5px, 10px, 0px);
25
+      background-color: #1565c0; }
26
+
27
+.list {
28
+  width: 100%; }
29
+  .list .list-item {
30
+    position: relative;
31
+    padding: 12px 15px; }
32
+    .list .list-item:hover {
33
+      background-color: #e4e4e4; }
34
+    .list .list-item .title {
35
+      font-weight: bold;
36
+      font-size: 15px; }
37
+    .list .list-item .info {
38
+      font-size: 13px; }
39
+    .list .list-item .extra {
40
+      font-size: 13px;
41
+      color: #737373; }
42
+    .list .list-item .edit {
43
+      position: absolute;
44
+      right: 15px;
45
+      top: 50%;
46
+      -ms-transform: translateY(-50%);
47
+      -webkit-transform: translateY(-50%);
48
+      transform: translateY(-50%);
49
+      font-size: 25px;
50
+      color: #737373; }
51
+    .list .list-item .mdi {
52
+      cursor: pointer; }
53
+
54
+/* form starting stylings ------------------------------- */
55
+.group {
56
+  position: relative;
57
+  margin-bottom: 45px; }
58
+
59
+input {
60
+  font-size: 14px;
61
+  padding: 10px 10px 10px 5px;
62
+  display: block;
63
+  width: 100%;
64
+  border: none;
65
+  border-bottom: 1px solid #757575; }
66
+
67
+input:focus {
68
+  outline: none; }
69
+
70
+/* LABEL ======================================= */
71
+label {
72
+  color: #999;
73
+  font-size: 14px;
74
+  font-weight: normal;
75
+  position: absolute;
76
+  pointer-events: none;
77
+  left: 5px;
78
+  top: 10px;
79
+  transition: 0.2s ease all;
80
+  -moz-transition: 0.2s ease all;
81
+  -webkit-transition: 0.2s ease all; }
82
+
83
+/* active state */
84
+input:focus ~ label, input.ng-valid:not(.ng-empty) ~ label {
85
+  top: -20px;
86
+  font-size: 14px;
87
+  color: #1565c0; }
88
+
89
+/* BOTTOM BARS ================================= */
90
+.bar {
91
+  position: relative;
92
+  display: block;
93
+  width: 100%; }
94
+
95
+.bar:before, .bar:after {
96
+  content: '';
97
+  height: 2px;
98
+  width: 0;
99
+  bottom: 1px;
100
+  position: absolute;
101
+  background: #1565c0;
102
+  transition: 0.2s ease all;
103
+  -moz-transition: 0.2s ease all;
104
+  -webkit-transition: 0.2s ease all; }
105
+
106
+.bar:before {
107
+  left: 50%; }
108
+
109
+.bar:after {
110
+  right: 50%; }
111
+
112
+/* active state */
113
+input:focus ~ .bar:before, input:focus ~ .bar:after {
114
+  width: 50%; }
115
+
116
+/* HIGHLIGHTER ================================== */
117
+.highlight {
118
+  position: absolute;
119
+  height: 60%;
120
+  width: 100px;
121
+  top: 25%;
122
+  left: 0;
123
+  pointer-events: none;
124
+  opacity: 0.5; }
125
+
126
+.group .mdi-content-copy, .pwField .mdi {
127
+  /*position: absolute;
128
+  right: 0;*/
129
+  margin-top: 5px;
130
+  float: right;
131
+  font-size: 15px;
132
+  cursor: pointer;
133
+  height: 32px;
134
+  padding-top: 6px;
135
+  padding-left: 9px;
136
+  width: 32px;
137
+  border-top-left-radius: 16px;
138
+  border-top-right-radius: 16px;
139
+  border-bottom-right-radius: 16px;
140
+  border-top-right-radius: 16px;
141
+  border-bottom-left-radius: 16px;
142
+  border-bottom-right-radius: 16px;
143
+  border-bottom-left-radius: 16px;
144
+  border-top-left-radius: 16px; }
145
+  .group .mdi-content-copy:hover, .pwField .mdi:hover {
146
+    text-decoration: none;
147
+    background-color: #e4e4e4; }
148
+
149
+.pwField .mdi-content-copy ~ input {
150
+  width: calc(100% - 96px); }
151
+
152
+.mdi-content-copy ~ input {
153
+  width: calc(100% - 32px); }
154
+
155
+.mdi-content-copy ~ .bar {
156
+  width: calc(100% - 32px); }
157
+
158
+/* active state */
159
+input:focus ~ .highlight {
160
+  -webkit-animation: inputHighlighter 0.3s ease;
161
+  -moz-animation: inputHighlighter 0.3s ease;
162
+  animation: inputHighlighter 0.3s ease; }
163
+
164
+/* ANIMATIONS ================ */
165
+@-webkit-keyframes inputHighlighter {
166
+  from {
167
+    background: #1565c0; }
168
+  to {
169
+    width: 0;
170
+    background: transparent; } }
171
+@-moz-keyframes inputHighlighter {
172
+  from {
173
+    background: #1565c0; }
174
+  to {
175
+    width: 0;
176
+    background: transparent; } }
177
+@keyframes inputHighlighter {
178
+  from {
179
+    background: #1565c0; }
180
+  to {
181
+    width: 0;
182
+    background: transparent; } }
183
+.md-btn {
184
+  position: relative;
185
+  margin: 0 15px 15px 15px;
186
+  padding: 0;
187
+  overflow: hidden;
188
+  border-width: 0;
189
+  outline: none;
190
+  border-radius: 2px;
191
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
192
+  color: #212121;
193
+  background-color: #fafafa;
194
+  cursor: pointer;
195
+  display: inline-block;
196
+  transition: background-color .3s; }
197
+
198
+.md-btn.default, .btn:focus {
199
+  background-color: #106cc8;
200
+  color: rgba(255, 255, 255, 0.87); }
201
+
202
+.md-btn.default:hover, .btn:focus {
203
+  background-color: #0159a2; }
204
+
205
+.md-btn > * {
206
+  position: relative; }
207
+
208
+.md-btn span {
209
+  display: inline-block;
210
+  padding: 12px 24px; }
211
+
212
+.md-btn:before {
213
+  content: "";
214
+  position: absolute;
215
+  top: 50%;
216
+  left: 50%;
217
+  display: block;
218
+  width: 0;
219
+  padding-top: 0;
220
+  border-radius: 100%;
221
+  background-color: rgba(236, 240, 241, 0.3);
222
+  -webkit-transform: translate(-50%, -50%);
223
+  -moz-transform: translate(-50%, -50%);
224
+  -ms-transform: translate(-50%, -50%);
225
+  -o-transform: translate(-50%, -50%);
226
+  transform: translate(-50%, -50%); }
227
+
228
+.md-btn:active:before {
229
+  width: 120%;
230
+  padding-top: 120%;
231
+  transition: width .2s ease-out, padding-top .2s ease-out; }
232
+
233
+.md-btn.orange {
234
+  background-color: #e67e22; }
235
+
236
+.md-btn.orange:hover, .btn.orange:focus {
237
+  background-color: #d35400; }
238
+
239
+.md-btn.red {
240
+  background-color: #ff5722;
241
+  color: rgba(255, 255, 255, 0.87); }
242
+
243
+.md-btn.red:hover, .btn.red:focus {
244
+  background-color: #f4511e; }
245
+
3 246
 body {
4 247
   width: 450px;
5
-  min-height: 350px; }
248
+  min-height: 350px;
249
+  font-family: 'Roboto', sans-serif; }
6 250
 
7 251
 header {
8 252
   width: 100%;
@@ -10,13 +254,11 @@ header {
10 254
   background: #1565c0;
11 255
   position: fixed;
12 256
   top: 0;
13
-  -webkit-transition: all 0.5s ease;
14
-  -moz-transition: all 0.5s ease;
15
-  -o-transition: all 0.5s ease;
16
-  transition: all 0.5s ease; }
17
-
18
-header.toggled {
19
-  width: calc(100% - 250px); }
257
+  z-index: 100;
258
+  -webkit-transition: all 0.250s ease;
259
+  -moz-transition: all 0.250s ease;
260
+  -o-transition: all 0.250s ease;
261
+  transition: all 0.250s ease; }
20 262
 
21 263
 body.toggled {
22 264
   overflow-x: hidden; }
@@ -24,13 +266,10 @@ body.toggled {
24 266
 /* Toggle Styles */
25 267
 #wrapper {
26 268
   padding-left: 0;
27
-  -webkit-transition: all 0.5s ease;
28
-  -moz-transition: all 0.5s ease;
29
-  -o-transition: all 0.5s ease;
30
-  transition: all 0.5s ease; }
31
-
32
-#wrapper.toggled {
33
-  padding-left: 250px; }
269
+  -webkit-transition: all 0.250s ease;
270
+  -moz-transition: all 0.250s ease;
271
+  -o-transition: all 0.250s ease;
272
+  transition: all 0.250s ease; }
34 273
 
35 274
 #sidebar-wrapper {
36 275
   z-index: 1000;
@@ -40,11 +279,12 @@ body.toggled {
40 279
   height: 100%;
41 280
   margin-left: -250px;
42 281
   overflow: hidden;
43
-  background: #000;
44
-  -webkit-transition: all 0.5s ease;
45
-  -moz-transition: all 0.5s ease;
46
-  -o-transition: all 0.5s ease;
47
-  transition: all 0.5s ease; }
282
+  background: #fff;
283
+  -webkit-transition: all 0.250s ease;
284
+  -moz-transition: all 0.250s ease;
285
+  -o-transition: all 0.250s ease;
286
+  transition: all 0.250s ease;
287
+  border-right: 1px solid #c9c9c9; }
48 288
 
49 289
 #wrapper.toggled #sidebar-wrapper {
50 290
   width: 250px;
@@ -52,8 +292,8 @@ body.toggled {
52 292
 
53 293
 #page-content-wrapper {
54 294
   width: 100%;
55
-  position: absolute;
56
-  margin-top: 60px;
295
+  /*position: absolute;*/
296
+  padding-top: 50px;
57 297
   overflow-y: auto; }
58 298
 
59 299
 #wrapper.toggled #page-content-wrapper {
@@ -61,6 +301,9 @@ body.toggled {
61 301
   margin-right: -250px;
62 302
   /*  width: calc(100% - 250px);*/ }
63 303
 
304
+.ng-hide {
305
+  display: none; }
306
+
64 307
 /* Sidebar Styles */
65 308
 .sidebar-nav {
66 309
   position: absolute;
@@ -69,36 +312,56 @@ body.toggled {
69 312
   margin: 0;
70 313
   padding: 0;
71 314
   list-style: none; }
315
+  .sidebar-nav li {
316
+    line-height: 55px; }
317
+    .sidebar-nav li a {
318
+      cursor: pointer;
319
+      display: block;
320
+      text-decoration: none;
321
+      color: #000; }
322
+      .sidebar-nav li a .mdi {
323
+        padding-left: 15px;
324
+        padding-right: 15px;
325
+        color: #737373;
326
+        cursor: pointer; }
327
+      .sidebar-nav li a:hover {
328
+        text-decoration: none;
329
+        background-color: #e4e4e4; }
330
+      .sidebar-nav li a:active, .sidebar-nav li a:focus {
331
+        text-decoration: none; }
332
+  .sidebar-nav > .sidebar-brand {
333
+    height: 50px;
334
+    font-size: 18px;
335
+    line-height: 50px;
336
+    text-indent: 20px;
337
+    background-color: #1565c0;
338
+    border-right: 1px solid #104d92; }
339
+    .sidebar-nav > .sidebar-brand span {
340
+      display: block;
341
+      text-decoration: none;
342
+      color: #fff; }
343
+      .sidebar-nav > .sidebar-brand span:hover {
344
+        color: #fff;
345
+        background: none; }
346
+      .sidebar-nav > .sidebar-brand span .mdi {
347
+        padding-left: 15px;
348
+        padding-right: 15px;
349
+        float: right;
350
+        color: #fff;
351
+        cursor: pointer; }
72 352
 
73
-.sidebar-nav li {
74
-  text-indent: 20px;
75
-  line-height: 40px; }
76
-
77
-.sidebar-nav li a {
78
-  display: block;
79
-  text-decoration: none;
80
-  color: #999999; }
81
-
82
-.sidebar-nav li a:hover {
83
-  text-decoration: none;
84
-  color: #fff;
85
-  background: rgba(255, 255, 255, 0.2); }
86
-
87
-.sidebar-nav li a:active,
88
-.sidebar-nav li a:focus {
89
-  text-decoration: none; }
90
-
91
-.sidebar-nav > .sidebar-brand {
92
-  height: 65px;
93
-  font-size: 18px;
94
-  line-height: 60px; }
95
-
96
-.sidebar-nav > .sidebar-brand a {
97
-  color: #999999; }
353
+.menuToggler {
354
+  position: absolute;
355
+  background-color: transparent;
356
+  width: calc(100% - 250px);
357
+  height: 350px;
358
+  z-index: 9999999;
359
+  right: 0; }
98 360
 
99
-.sidebar-nav > .sidebar-brand a:hover {
100
-  color: #fff;
101
-  background: none; }
361
+.edit_credential {
362
+  padding-top: 30px;
363
+  padding-left: 15px;
364
+  padding-right: 15px; }
102 365
 
103 366
 .menu-icon {
104 367
   padding: 8px 15px;

+ 0
- 25
css/main.css View File

@@ -149,31 +149,6 @@ input[type="password"], input[type="text"] {
149 149
 .pad5 {
150 150
   padding: 5px; }
151 151
 
152
-.radial-progress {
153
-  display: inline-block;
154
-  left: 5px;
155
-  top: 2px;
156
-  position: relative;
157
-  width: 10px;
158
-  height: 10px;
159
-  background-color: #d6dadc;
160
-  border-radius: 50%; }
161
-  .radial-progress .circle .mask, .radial-progress .circle .fill {
162
-    width: 10px;
163
-    height: 10px;
164
-    position: absolute;
165
-    border-radius: 50%;
166
-    -webkit-transition: -webkit-transform 0.5s;
167
-    -moz-transition: -moz-transform 0.5s;
168
-    transition: transform 0.5s;
169
-    -webkit-backface-visibility: hidden;
170
-    backface-visibility: hidden; }
171
-  .radial-progress .circle .mask {
172
-    clip: rect(0px, 10px, 10px, 5px); }
173
-    .radial-progress .circle .mask .fill {
174
-      clip: rect(0px, 5px, 10px, 0px);
175
-      background-color: #97a71d; }
176
-
177 152
 .ng-hide {
178 153
   display: none; }
179 154
 

+ 2
- 0
css/vendor/materialdesignicons.min.css
File diff suppressed because it is too large
View File


BIN
fonts/materialdesignicons-webfont.eot View File


+ 5808
- 0
fonts/materialdesignicons-webfont.svg
File diff suppressed because it is too large
View File


BIN
fonts/materialdesignicons-webfont.ttf View File


BIN
fonts/materialdesignicons-webfont.woff View File


BIN
fonts/materialdesignicons-webfont.woff2 View File


+ 18
- 33
html/browser_action/browser_action.html View File

@@ -36,6 +36,7 @@
36 36
 
37 37
         <script src="/js/ui/popup/controllers/main.js"></script>
38 38
         <script src="/js/ui/popup/controllers/settings.js"></script>
39
+        <script src="/js/ui/popup/controllers/setup.js"></script>
39 40
         <script src="/js/ui/popup/controllers/password_prompt.js"></script>
40 41
         <script src="/js/ui/popup/controllers/list.js"></script>
41 42
         <script src="/js/ui/popup/controllers/search.js"></script>
@@ -46,11 +47,14 @@
46 47
         <script src="/js/ui/popup/directives/copyText.js"></script>
47 48
         <script src="/js/ui/popup/filters/translate.js"></script>
48 49
 
50
+        <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
49 51
 
50 52
         <link href="/css/vendor/bootstrap.css" media="all" rel="stylesheet" />
51 53
         <link href="/css/vendor/bootstrap-theme.css" media="all" rel="stylesheet" />
52 54
         <link href="/css/vendor/font-awesome.css" media="all" rel="stylesheet" />
55
+        <link href="/css/vendor/materialdesignicons.min.css" media="all" rel="stylesheet" />
53 56
         <link href="/css/browser_action.css" media="all" rel="stylesheet" />
57
+
54 58
     </head>
55 59
     <body ng-controller="MainCtrl" ng-class="{'toggle': bodyOverflow}">
56 60
     <div id="wrapper" ng-class="{'toggled': menuIsOpen}">
@@ -58,30 +62,24 @@
58 62
         <div id="sidebar-wrapper">
59 63
             <ul class="sidebar-nav">
60 64
                 <li class="sidebar-brand">
61
-                    <a href="#">
62
-                        Start Bootstrap
63
-                    </a>
64
-                </li>
65
-                <li>
66
-                    <a href="#">Dashboard</a>
67
-                </li>
68
-                <li>
69
-                    <a href="#">Shortcuts</a>
65
+                    <span>
66
+                        Passman
67
+                        <i class="mdi mdi-close" ng-click="toggleMenu()"></i>
68
+                    </span>
70 69
                 </li>
71 70
                 <li>
72
-                    <a href="#">Overview</a>
71
+                    <a ng-click="goto('list')"><i class="mdi mdi-format-list-bulleted"></i> List</a>
73 72
                 </li>
74 73
                 <li>
75
-                    <a href="#">Events</a>
74
+                    <a ng-click="goto('search')" title="{{'search' | translate}}"><i class="mdi mdi-magnify"></i> Search</a>
76 75
                 </li>
77 76
                 <li>
78
-                    <a href="#">About</a>
77
+                    <a ng-click="goto('settings')" title="{{'settings' | translate}}"><i class="mdi mdi-settings"></i> {{'settings' | translate}}</a>
79 78
                 </li>
80 79
                 <li>
81
-                    <a href="#">Services</a>
82
-                </li>
83
-                <li>
84
-                    <a href="#">Contact</a>
80
+                    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6YS8F97PETVU2" target="_blank"
81
+                       title="{{'donate_button_title' | translate}}"
82
+                       rel="nofollow noopener noreferrer"><i class="mdi mdi-credit-card"></i> Donate</a>
85 83
                 </li>
86 84
             </ul>
87 85
         </div>
@@ -89,27 +87,14 @@
89 87
 
90 88
         <header class="header" ng-class="{'toggled': menuIsOpen}">
91 89
             <div class="menu-icon" ng-click="toggleMenu()">
92
-                <i class="fa fa-bars"></i>
90
+                <i class="mdi mdi-menu"></i>
93 91
             </div>
94 92
         </header>
95 93
         <!-- Page Content -->
96
-        <div id="page-content-wrapper">
97
-            <div class="container-fluid">
98
-                <div class="row">
99
-                    <div class="col-lg-12">
100
-
101
-                        <h1>Simple Sidebar</h1>
102
-                        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
103
-                        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
104
-                        <a class="btn btn-default" >Toggle Menu</a>
105
-                        <h2>content</h2>
106
-                        <h2>content</h2>
107
-                        <h2>content</h2>
108
-                        <h2>content</h2>
94
+        <div id="page-content-wrapper" ng-view>
95
+        </div>
96
+        <div class="menuToggler" ng-click="toggleMenu()" ng-show="menuIsOpen">
109 97
 
110
-                    </div>
111
-                </div>
112
-            </div>
113 98
         </div>
114 99
         <!-- /#page-content-wrapper -->
115 100
     </div>

+ 55
- 1
html/browser_action/views/edit_credential.html View File

@@ -1,3 +1,56 @@
1
+<div class="edit_credential">
2
+    <div class="group">
3
+        <copy-text text="credential.label"></copy-text>
4
+        <input type="text" ng-model="credential.label" required>
5
+        <span class="highlight"></span>
6
+        <span class="bar"></span>
7
+        <label>{{'label' | translate}}</label>
8
+    </div>
9
+    <div class="group">
10
+        <copy-text text="credential.username"></copy-text>
11
+        <input type="text" ng-model="credential.username">
12
+        <span class="highlight"></span>
13
+        <span class="bar"></span>
14
+        <label>{{'username' | translate}}</label>
15
+    </div>
16
+    <div class="group">
17
+        <copy-text text="credential.email"></copy-text>
18
+        <input type="text" ng-model="credential.email">
19
+        <span class="highlight"></span>
20
+        <span class="bar"></span>
21
+        <label>{{ 'email' | translate}}</label>
22
+    </div>
23
+    <div class="group pwField">
24
+        <copy-text text="credential.password"></copy-text>
25
+        <i class="mdi mdi-refresh pointer"  ng-click="generatePassword()"></i>
26
+        <i class="pointer mdi" ng-class="{'mdi-eye': !pwFieldShown, 'mdi-eye-off': pwFieldShown}" ng-click="togglePwField()"></i>
27
+        <input type="text" ng-model="credential.password" ng-if="pwFieldShown">
28
+        <input type="password" ng-model="credential.password" ng-if="!pwFieldShown">
29
+        <span class="highlight"></span>
30
+        <span class="bar"></span>
31
+        <label>{{'password' | translate}}</label>
32
+    </div>
33
+    <div class="group">
34
+        <input type="password" ng-model="credential.password_repeat">
35
+        <span class="highlight"></span>
36
+        <span class="bar"></span>
37
+        <label>{{'password_repeat' | translate}}</label>
38
+    </div>
39
+    <div class="group">
40
+        <copy-text text="credential.url"></copy-text>
41
+        <input type="text" ng-model="credential.url">
42
+        <span class="highlight"></span>
43
+        <span class="bar"></span>
44
+        <label>{{'url' | translate}}</label>
45
+    </div>
46
+    <button class="md-btn default" ng-click="saveCredential()" ng-disabled="saving">
47
+        <span>{{'save' | translate}}</span>
48
+    </button>
49
+    <button class="md-btn" ng-click="cancel()">
50
+        <span>{{'cancel' | translate}}</span>
51
+    </button>
52
+</div>
53
+<!--
1 54
 <table class="editCredential table">
2 55
     <tr>
3 56
         <td>{{'label' | translate}}</td>
@@ -78,4 +131,5 @@
78 131
 <button class="btn btn-success" ng-click="saveCredential()" ng-disabled="saving">{{'save' |
79 132
     translate}}
80 133
 </button>
81
-<button class="btn btn-default" ng-click="cancel()">{{'cancel' | translate}}</button>
134
+<button class="btn btn-default" ng-click="cancel()">{{'cancel' | translate}}</button>
135
+-->

html/browser_action/views/main.html → html/browser_action/views/list.html View File

@@ -1,21 +1,25 @@
1
-<div class="col-xs-12 nopadding pwcontainer">
2
-    <div ng-show="found_credentials.length === 0">
1
+<div class="list">
2
+    <!-- <div ng-show="found_credentials.length === 0">
3 3
         {{ 'no_credentials_found_for_site' | translate}}
4 4
     </div>
5
-    <div ng-show="found_credentials.length > 0">{{'credentials_found_for_site' | translate:found_credentials.length.toString() }}</div>
6
-    <div class="credential" ng-repeat="credential in found_credentials">
7
-        <div class="col-xs-10 nopadding">{{credential.label}}<br/>
8
-            <small>{{credential.username}}</small><br />
9
-            <small ng-if="credential.otp.secret"> {{'one_time_password' | translate}}: <div otp-generator secret="credential.otp.secret"></div></small>
5
+    <div ng-show="found_credentials.length > 0">{{'credentials_found_for_site' | translate:found_credentials.length.toString() }}</div> -->
6
+    <div class="list-item" ng-repeat="credential in found_credentials">
7
+        <div class="title">
8
+            {{credential.label}}
9
+        </div>
10
+        <div class="info">
11
+            {{credential.username}}
12
+        </div>
13
+        <div class="extra" ng-if="credential.otp.secret">
14
+            {{'one_time_password' | translate}}: <div otp-generator secret="credential.otp.secret"></div>
10 15
         </div>
11 16
         <div class="edit" ng-click="editCredential(credential)">
12
-
17
+            <div class="mdi mdi-pencil"></div>
13 18
         </div>
14
-        <div class="col-xs-2">
15 19
 
16
-        </div>
17 20
     </div>
18 21
 </div>
22
+<!--
19 23
 <div class="footer">
20 24
     <div style="position: absolute; left: 50%; margin-top: -7px; width: 110px;">
21 25
         <div style="position: relative; left: -50%; margin-top: 1.3em;">
@@ -31,6 +35,5 @@
31 35
     ><i class="fa fa-paypal"></i> </a>
32 36
     </div>
33 37
     <div class="bottomBtn pull-right" ng-click="lockExtension()" title="{{'lock_extension' | translate}}"><i class="fa fa-lock"></i></div>
34
-    <!-- <a class="btn btn-success pull-right"
35
-       >Donate</a> -->
36
-</div>
38
+
39
+</div> -->

+ 122
- 82
html/browser_action/views/settings.html View File

@@ -1,84 +1,124 @@
1
+<div class="col-xs-12">
2
+    <h4 align="center">{{'please_enter_nextcloud_credentials' | translate}}:</h4>
3
+    <div class="alerts alert alert-warning" ng-if="errors.length > 0">
4
+        <li ng-repeat="error in errors">{{error}}</li>
5
+    </div>
6
+    <div>
7
+        <table class="table">
8
+            <tr>
9
+                <td>
10
+                    <small>{{'server_url' | translate}}:</small>
11
+                </td>
12
+                <td><input type="url" class="form-control input-sm" id="host" ng-model="settings.nextcloud_host"
13
+                           required ng-debounce="1000">
14
+                </td>
15
+            </tr>
16
+            <tr ng-if="settings.nextcloud_host.indexOf('http://') == 0">
17
+                <td colspan=2>
18
+                    <div class="alert alert-warning">Warning: This connection is insecure!</div>
19
+                </td>
20
+            </tr>
21
+            <tr>
22
+                <td>
23
+                    <small>{{'username' | translate}}:</small>
24
+                </td>
25
+                <td><input type="text" class="form-control input-sm" id="user" ng-model="settings.nextcloud_username"
26
+                           required ng-debounce="1000"></td>
27
+            </tr>
28
+            <tr>
29
+                <td>
30
+                    <small>{{'password' | translate}}:</small>
31
+                </td>
32
+                <td><input type="password" class="form-control input-sm" id="password"
33
+                           ng-model="settings.nextcloud_password" required ng-debounce="1000"></td>
34
+            </tr>
35
+            <tr class="login-req" ng-if="vaults">
36
+                <td>
37
+                    <small>{{'select_default_vault' | translate}}:</small>
38
+                </td>
39
+                <td><select id="defaultVault" class="form-control input-sm" ng-model="settings.default_vault" required
40
+                            ng-options="vault.name for vault in vaults track by vault.guid"></select></td>
41
+            </tr>
42
+            <tr class="login-req" id="vaultPassRow" ng-show="settings.default_vault != ''">
43
+                <td valign="top">
44
+                    <small>{{'vault_password' | translate}}</small>
45
+                </td>
46
+                <td>
47
+                    <input type="password" class="form-control input-sm" id="vaultPassword"
48
+                           ng-model="settings.vault_password">
49
+                </td>
50
+            </tr>
51
+            <tr class="login-req">
52
+                <td valign="top">
53
+                    <small>{{'ignored_sites' | translate}}</small>
54
+                </td>
55
+                <td>
1 56
 
2
-<h4 align="center">{{'please_enter_nextcloud_credentials' | translate}}:</h4>
3
-<div class="alerts alert alert-warning" ng-if="errors.length > 0">
4
-    <li ng-repeat="error in errors">{{error}}</li>
5
-</div>
6
-<div style="max-height: 350px; overflow-y: auto;">
7
-    <table class="table">
8
-        <tr>
9
-            <td><small>{{'server_url' | translate}}:</small></td>
10
-            <td><input type="url" class="form-control input-sm" id="host" ng-model="settings.nextcloud_host" required ng-debounce="1000">
11
-            </td>
12
-        </tr>
13
-        <tr ng-if="settings.nextcloud_host.indexOf('http://') == 0">
14
-            <td colspan=2><div class="alert alert-warning">Warning: This connection is insecure!</div></td>
15
-        </tr>
16
-        <tr>
17
-            <td><small>{{'username' | translate}}:</small></td>
18
-            <td><input type="text" class="form-control input-sm" id="user" ng-model="settings.nextcloud_username" required ng-debounce="1000"></td>
19
-        </tr>
20
-        <tr>
21
-            <td><small>{{'password' | translate}}:</small></td>
22
-            <td><input type="password" class="form-control input-sm" id="password" ng-model="settings.nextcloud_password" required ng-debounce="1000"></td>
23
-        </tr>
24
-        <tr class="login-req"  ng-if="vaults">
25
-            <td><small>{{'select_default_vault' | translate}}:</small></td>
26
-            <td><select id="defaultVault"  class="form-control input-sm" ng-model="settings.default_vault" required ng-options="vault.name for vault in vaults track by vault.guid"></select></td>
27
-        </tr>
28
-        <tr class="login-req" id="vaultPassRow" ng-show="settings.default_vault != ''">
29
-            <td valign="top">
30
-                <small>{{'vault_password' | translate}}</small>
31
-            </td>
32
-            <td>
33
-                <input type="password" class="form-control input-sm" id="vaultPassword" ng-model="settings.vault_password">
34
-            </td>
35
-        </tr>
36
-        <tr class="login-req">
37
-            <td valign="top">
38
-                <small>{{'ignored_sites' | translate}}</small>
39
-            </td>
40
-            <td>
41
-
42
-               <ul class="ignored_sites">
43
-                   <li ng-repeat="site in settings.ignored_sites">{{site}} <i class="fa fa-trash pull-right" ng-click="removeSite(site)"></i></li>
44
-                   <li ng-show="settings.ignored_sites.length === 0">{{'no_sites_ignored' | translate}}</li>
45
-                   <li><input type="text" class="form-control" placeholder="Enter a domain or tld" ng-model="ignoreSite" ng-enter="addSite(ignoreSite)"> </li>
46
-               </ul>
47
-            </td>
48
-        </tr>
49
-        <tr>
50
-            <td><small>{{'refresh_timer' | translate}}:</small></td>
51
-            <td><input type="text" id="timer" class="form-control input-sm" ng-model="settings.refreshTime"></td>
52
-        </tr>
53
-        <tr>
54
-            <td colspan=2><input type="checkbox" id="ignoreProtocol" ng-model="settings.ignoreProtocol"><small>{{'ignore_protocol' | translate}}</small></td>
55
-        </tr>
56
-        <tr>
57
-            <td colspan=2><input type="checkbox" id="ignoreSubdomain" ng-model="settings.ignoreSubdomain"><small>{{'ignore_subdomain' | translate}}</small></td>
58
-        </tr>
59
-        <tr>
60
-            <td colspan=2><input type="checkbox" id="ignorePath" ng-model="settings.ignorePort"><small>{{'ignore_port' | translate}}</small></td>
61
-        </tr>
62
-        <tr>
63
-            <td colspan=2><input type="checkbox" id="disableAutoFill" ng-model="settings.disableAutoFill"><small>{{'disable_autofill' | translate}}</small></td>
64
-        </tr>
65
-        <tr>
66
-            <td colspan=2><input type="checkbox" id="disableBrowserAutoFill" ng-model="settings.disable_browser_autofill"><small>{{'disable_browser_autofill' | translate}}</small></td>
67
-        </tr>
68
-        <tr>
69
-            <td colspan=2><input type="checkbox" id="disablePasswordPicker" ng-model="settings.disablePasswordPicker"><small>{{'disable_password_picker' | translate}}</small></td>
70
-        </tr>
71
-        <tr>
72
-            <td colspan=2><input type="checkbox" id="enableDebug" ng-model="settings.debug"><small>{{'enable_debug' | translate}}</small></td>
73
-        </tr>
74
-        <tr>
75
-            <td colspan=2 align="center">
76
-                <button class="btn btn-success" ng-click="saveSettings()" ng-disabled="saving"><i ng-show="saving" ng-class="{'fa-spinner fa-spin': saving}" class="fa"></i> {{'save' | translate}}</button>
77
-                <button class="btn btn-warning" ng-click="cancel()">{{'cancel' | translate}}</button>
78
-            </td>
79
-        </tr>
80
-    </table>
81
-    <div class="version">
82
-        {{extension}}
57
+                    <ul class="ignored_sites">
58
+                        <li ng-repeat="site in settings.ignored_sites">{{site}} <i class="fa fa-trash pull-right"
59
+                                                                                   ng-click="removeSite(site)"></i></li>
60
+                        <li ng-show="settings.ignored_sites.length === 0">{{'no_sites_ignored' | translate}}</li>
61
+                        <li><input type="text" class="form-control" placeholder="Enter a domain or tld"
62
+                                   ng-model="ignoreSite" ng-enter="addSite(ignoreSite)"></li>
63
+                    </ul>
64
+                </td>
65
+            </tr>
66
+            <tr>
67
+                <td>
68
+                    <small>{{'refresh_timer' | translate}}:</small>
69
+                </td>
70
+                <td><input type="text" id="timer" class="form-control input-sm" ng-model="settings.refreshTime"></td>
71
+            </tr>
72
+            <tr>
73
+                <td colspan=2><input type="checkbox" id="ignoreProtocol" ng-model="settings.ignoreProtocol">
74
+                    <small>{{'ignore_protocol' | translate}}</small>
75
+                </td>
76
+            </tr>
77
+            <tr>
78
+                <td colspan=2><input type="checkbox" id="ignoreSubdomain" ng-model="settings.ignoreSubdomain">
79
+                    <small>{{'ignore_subdomain' | translate}}</small>
80
+                </td>
81
+            </tr>
82
+            <tr>
83
+                <td colspan=2><input type="checkbox" id="ignorePath" ng-model="settings.ignorePort">
84
+                    <small>{{'ignore_port' | translate}}</small>
85
+                </td>
86
+            </tr>
87
+            <tr>
88
+                <td colspan=2><input type="checkbox" id="disableAutoFill" ng-model="settings.disableAutoFill">
89
+                    <small>{{'disable_autofill' | translate}}</small>
90
+                </td>
91
+            </tr>
92
+            <tr>
93
+                <td colspan=2><input type="checkbox" id="disableBrowserAutoFill"
94
+                                     ng-model="settings.disable_browser_autofill">
95
+                    <small>{{'disable_browser_autofill' | translate}}</small>
96
+                </td>
97
+            </tr>
98
+            <tr>
99
+                <td colspan=2><input type="checkbox" id="disablePasswordPicker"
100
+                                     ng-model="settings.disablePasswordPicker">
101
+                    <small>{{'disable_password_picker' | translate}}</small>
102
+                </td>
103
+            </tr>
104
+            <tr>
105
+                <td colspan=2><input type="checkbox" id="enableDebug" ng-model="settings.debug">
106
+                    <small>{{'enable_debug' | translate}}</small>
107
+                </td>
108
+            </tr>
109
+            <tr>
110
+                <td colspan=2 align="center">
111
+                    <button class="btn btn-success" ng-click="saveSettings()" ng-disabled="saving"><i ng-show="saving"
112
+                                                                                                      ng-class="{'fa-spinner fa-spin': saving}"
113
+                                                                                                      class="fa"></i>
114
+                        {{'save' | translate}}
115
+                    </button>
116
+                    <button class="btn btn-warning" ng-click="cancel()">{{'cancel' | translate}}</button>
117
+                </td>
118
+            </tr>
119
+        </table>
120
+        <div class="version">
121
+            {{extension}}
122
+        </div>
83 123
     </div>
84
-</div>
124
+</div>

+ 1
- 1
js/ui/popup/app.js View File

@@ -42,7 +42,7 @@
42 42
         .config(function ($routeProvider, $locationProvider) {
43 43
             $routeProvider
44 44
                 .when('/', {
45
-                    templateUrl: 'views/main.html',
45
+                    templateUrl: 'views/list.html',
46 46
                     controller: 'ListCtrl'
47 47
                 })
48 48
                 .when('/search', {

+ 0
- 9
js/ui/popup/controllers/list.js View File

@@ -118,15 +118,6 @@
118 118
             });
119 119
 
120 120
 
121
-
122
-            $scope.goto_settings = function () {
123
-                window.location = '#!/settings';
124
-            };
125
-
126
-            $scope.goto_search = function () {
127
-                window.location = '#!/search';
128
-            };
129
-
130 121
             $scope.editCredential = function (credential) {
131 122
                 window.location = '#!/edit/' + credential.guid;
132 123
             };

+ 3
- 9
js/ui/popup/controllers/main.js View File

@@ -47,17 +47,11 @@
47 47
                 }, 1500);
48 48
             };
49 49
 
50
-            $scope.goto_settings = function () {
51
-                window.location = '#!/settings';
50
+            $scope.goto = function (page) {
51
+                window.location = '#!/'+page;
52
+                $scope.menuIsOpen = false;
52 53
             };
53 54
 
54
-            $scope.goto_search = function () {
55
-                window.location = '#!/search';
56
-            };
57
-
58
-            $scope.editCredential = function (credential) {
59
-                window.location = '#!/edit/' + credential.guid;
60
-            };
61 55
         }]);
62 56
 }());
63 57
 

+ 1
- 1
js/ui/popup/directives/copyText.js View File

@@ -39,7 +39,7 @@
39 39
                     scope:{
40 40
                         text: '='
41 41
                     },
42
-                    template: '<i class="pointer fa fa-copy" ng-click="copyText()"></i>',
42
+                    template: '<i class="pointer mdi mdi-content-copy" ng-click="copyText()"></i>',
43 43
                     replace: true,
44 44
                     link: function (scope, el) {
45 45
                         scope.copyText = function () {

+ 98
- 67
style/browser_action.scss View File

@@ -1,25 +1,30 @@
1
-/* CSS used here will be applied after bootstrap.css */
2 1
 /* Header Footer Styles */
3
-body{
2
+@import "partials/cicle";
3
+@import "partials/list";
4
+@import "partials/material-input";
5
+@import "partials/buttons";
6
+$sidebarWidth: 250px;
7
+body {
4 8
   width: 450px;
5 9
   min-height: 350px;
10
+  font-family: 'Roboto', sans-serif;
6 11
 }
12
+
7 13
 header {
8 14
   width: 100%;
9 15
   height: 50px;
10 16
   background: #1565c0;
11 17
   position: fixed;
12 18
   top: 0;
13
-  -webkit-transition: all 0.5s ease;
14
-  -moz-transition: all 0.5s ease;
15
-  -o-transition: all 0.5s ease;
16
-  transition: all 0.5s ease;
17
-}
18
-header.toggled {
19
-  width: calc(100% - 250px);
19
+  z-index: 100;
20
+  -webkit-transition: all 0.250s ease;
21
+  -moz-transition: all 0.250s ease;
22
+  -o-transition: all 0.250s ease;
23
+  transition: all 0.250s ease;
24
+
20 25
 }
21 26
 
22
-body.toggled{
27
+body.toggled {
23 28
   overflow-x: hidden;
24 29
 }
25 30
 
@@ -27,48 +32,49 @@ body.toggled{
27 32
 
28 33
 #wrapper {
29 34
   padding-left: 0;
30
-  -webkit-transition: all 0.5s ease;
31
-  -moz-transition: all 0.5s ease;
32
-  -o-transition: all 0.5s ease;
33
-  transition: all 0.5s ease;
34
-}
35
-#wrapper.toggled {
36
-  padding-left: 250px;
35
+  -webkit-transition: all 0.250s ease;
36
+  -moz-transition: all 0.250s ease;
37
+  -o-transition: all 0.250s ease;
38
+  transition: all 0.250s ease;
39
+
37 40
 }
38 41
 
39 42
 #sidebar-wrapper {
40 43
   z-index: 1000;
41 44
   position: fixed;
42
-  left: 250px;
45
+  left: $sidebarWidth;
43 46
   width: 0;
44 47
   height: 100%;
45
-  margin-left: -250px;
48
+  margin-left: -$sidebarWidth;
46 49
   overflow: hidden;
47
-  background: #000;
48
-  -webkit-transition: all 0.5s ease;
49
-  -moz-transition: all 0.5s ease;
50
-  -o-transition: all 0.5s ease;
51
-  transition: all 0.5s ease;
50
+  background: #fff;
51
+  -webkit-transition: all 0.250s ease;
52
+  -moz-transition: all 0.250s ease;
53
+  -o-transition: all 0.250s ease;
54
+  transition: all 0.250s ease;
55
+  border-right: 1px solid #c9c9c9;
52 56
 }
53 57
 
54 58
 #wrapper.toggled #sidebar-wrapper {
55
-  width: 250px;
59
+  width: $sidebarWidth;
56 60
   overflow-x: hidden;
57 61
 }
58 62
 
59 63
 #page-content-wrapper {
60 64
   width: 100%;
61
-  position: absolute;
62
-  margin-top:60px;
65
+  /*position: absolute;*/
66
+  padding-top: 50px;
63 67
   overflow-y: auto;
64 68
 }
65 69
 
66 70
 #wrapper.toggled #page-content-wrapper {
67 71
   position: absolute;
68
-  margin-right: -250px;
69
-/*  width: calc(100% - 250px);*/
72
+  margin-right: -$sidebarWidth;
73
+  /*  width: calc(100% - 250px);*/
74
+}
75
+.ng-hide{
76
+  display: none;
70 77
 }
71
-
72 78
 /* Sidebar Styles */
73 79
 
74 80
 .sidebar-nav {
@@ -78,43 +84,68 @@ body.toggled{
78 84
   margin: 0;
79 85
   padding: 0;
80 86
   list-style: none;
81
-}
82
-
83
-.sidebar-nav li {
84
-  text-indent: 20px;
85
-  line-height: 40px;
86
-}
87
-
88
-.sidebar-nav li a {
89
-  display: block;
90
-  text-decoration: none;
91
-  color: #999999;
92
-}
93
-
94
-.sidebar-nav li a:hover {
95
-  text-decoration: none;
96
-  color: #fff;
97
-  background: rgba(255,255,255,0.2);
98
-}
99
-
100
-.sidebar-nav li a:active,
101
-.sidebar-nav li a:focus {
102
-  text-decoration: none;
103
-}
104
-
105
-.sidebar-nav > .sidebar-brand {
106
-  height: 65px;
107
-  font-size: 18px;
108
-  line-height: 60px;
109
-}
110
-
111
-.sidebar-nav > .sidebar-brand a {
112
-  color: #999999;
113
-}
114
-
115
-.sidebar-nav > .sidebar-brand a:hover {
116
-  color: #fff;
117
-  background: none;
87
+  li {
88
+    line-height: 55px;
89
+    a {
90
+      cursor: pointer;
91
+      display: block;
92
+      text-decoration: none;
93
+      color: #000;
94
+      .mdi{
95
+        padding-left: 15px;
96
+        padding-right: 15px;
97
+        color: $linkColor;
98
+        cursor: pointer;
99
+      }
100
+
101
+      &:hover {
102
+        text-decoration: none;
103
+        background-color: #e4e4e4;
104
+
105
+      }
106
+      &:active, &:focus {
107
+        text-decoration: none;
108
+      }
109
+    }
110
+  }
111
+  > .sidebar-brand {
112
+    height: 50px;
113
+    font-size: 18px;
114
+    line-height: 50px;
115
+    text-indent: 20px;
116
+    background-color: #1565c0;
117
+    border-right: 1px solid darken(#1565c0, 10%);
118
+    span {
119
+
120
+      display: block;
121
+      text-decoration: none;
122
+      color: #fff;
123
+      &:hover {
124
+        color: #fff;
125
+        background: none;
126
+      }
127
+      .mdi{
128
+        padding-left: 15px;
129
+        padding-right: 15px;
130
+        float: right;
131
+        color: #fff;
132
+        cursor: pointer;
133
+      }
134
+    }
135
+  }
136
+}
137
+.menuToggler{
138
+  position: absolute;
139
+  background-color: transparent;
140
+  width: calc(100% - 250px);
141
+  height: 350px;
142
+  z-index: 9999999;
143
+  right: 0;
144
+}
145
+.edit_credential{
146
+  padding-top: 30px;
147
+  padding-left: 15px;
148
+  padding-right: 15px;
118 149
 }
119 150
 
120 151
 .menu-icon {

+ 0
- 0
style/css/buttons.css View File


+ 24
- 0
style/css/cicle.css View File

@@ -0,0 +1,24 @@
1
+.radial-progress {
2
+  display: inline-block;
3
+  left: 5px;
4
+  top: 2px;
5
+  position: relative;
6
+  width: 10px;
7
+  height: 10px;
8
+  background-color: #d6dadc;
9
+  border-radius: 50%; }
10
+  .radial-progress .circle .mask, .radial-progress .circle .fill {
11
+    width: 10px;
12
+    height: 10px;
13
+    position: absolute;
14
+    border-radius: 50%;
15
+    -webkit-transition: -webkit-transform 0.5s;
16
+    -moz-transition: -moz-transform 0.5s;
17
+    transition: transform 0.5s;
18
+    -webkit-backface-visibility: hidden;
19
+    backface-visibility: hidden; }
20
+  .radial-progress .circle .mask {
21
+    clip: rect(0px, 10px, 10px, 5px); }
22
+    .radial-progress .circle .mask .fill {
23
+      clip: rect(0px, 5px, 10px, 0px);
24
+      background-color: #97a71d; }

+ 0
- 0
style/css/list.css View File


+ 97
- 0
style/css/material-input.css View File

@@ -0,0 +1,97 @@
1
+/* form starting stylings ------------------------------- */
2
+.group {
3
+  position: relative;
4
+  margin-bottom: 45px; }
5
+
6
+input {
7
+  font-size: 18px;
8
+  padding: 10px 10px 10px 5px;
9
+  display: block;
10
+  width: 300px;
11
+  border: none;
12
+  border-bottom: 1px solid #757575; }
13
+
14
+input:focus {
15
+  outline: none; }
16
+
17
+/* LABEL ======================================= */
18
+label {
19
+  color: #999;
20
+  font-size: 18px;
21
+  font-weight: normal;
22
+  position: absolute;
23
+  pointer-events: none;
24
+  left: 5px;
25
+  top: 10px;
26
+  transition: 0.2s ease all;
27
+  -moz-transition: 0.2s ease all;
28
+  -webkit-transition: 0.2s ease all; }
29
+
30
+/* active state */
31
+input:focus ~ label, input:valid ~ label {
32
+  top: -20px;
33
+  font-size: 14px;
34
+  color: #5264AE; }
35
+
36
+/* BOTTOM BARS ================================= */
37
+.bar {
38
+  position: relative;
39
+  display: block;
40
+  width: 300px; }
41
+
42
+.bar:before, .bar:after {
43
+  content: '';
44
+  height: 2px;
45
+  width: 0;
46
+  bottom: 1px;
47
+  position: absolute;
48
+  background: #5264AE;
49
+  transition: 0.2s ease all;
50
+  -moz-transition: 0.2s ease all;
51
+  -webkit-transition: 0.2s ease all; }
52
+
53
+.bar:before {
54
+  left: 50%; }
55
+
56
+.bar:after {
57
+  right: 50%; }
58
+
59
+/* active state */
60
+input:focus ~ .bar:before, input:focus ~ .bar:after {
61
+  width: 50%; }
62
+
63
+/* HIGHLIGHTER ================================== */
64
+.highlight {
65
+  position: absolute;
66
+  height: 60%;
67
+  width: 100px;
68
+  top: 25%;
69
+  left: 0;
70
+  pointer-events: none;
71
+  opacity: 0.5; }
72
+
73
+/* active state */
74
+input:focus ~ .highlight {
75
+  -webkit-animation: inputHighlighter 0.3s ease;
76
+  -moz-animation: inputHighlighter 0.3s ease;
77
+  animation: inputHighlighter 0.3s ease; }
78
+
79
+/* ANIMATIONS ================ */
80
+@-webkit-keyframes inputHighlighter {
81
+  from {
82
+    background: #5264AE; }
83
+  to {
84
+    width: 0;
85
+    background: transparent; } }
86
+@-moz-keyframes inputHighlighter {
87
+  from {
88
+    background: #5264AE; }
89
+  to {
90
+    width: 0;
91
+    background: transparent; } }
92
+@keyframes inputHighlighter {
93
+  from {
94
+    background: #5264AE; }
95
+  to {
96
+    width: 0;
97
+    background: transparent; } }

+ 0
- 35
style/main.scss View File

@@ -191,41 +191,6 @@ input[type="password"], input[type="text"] {
191 191
   padding: 5px;
192 192
 }
193 193
 
194
-.radial-progress {
195
-  $circle-size : 10px;
196
-  $circle-background : #d6dadc;
197
-  $circle-color : #97a71d;
198
-  $transition-length : 0.5s;
199
-  display: inline-block;
200
-  left: 5px;
201
-  top: 2px;
202
-  position: relative;
203
-  width: $circle-size;
204
-  height: $circle-size;
205
-
206
-  background-color: $circle-background;
207
-  border-radius: 50%;
208
-  .circle {
209
-    .mask, .fill {
210
-      width: $circle-size;
211
-      height: $circle-size;
212
-      position: absolute;
213
-
214
-      border-radius: 50%;
215
-
216
-      @include transition(transform $transition-length);
217
-      @include backface-visibility(hidden);
218
-      
219
-    }
220
-    .mask {
221
-      clip: rect(0px, $circle-size, $circle-size, $circle-size/2);
222
-      .fill {
223
-        clip: rect(0px, $circle-size/2, $circle-size, 0px);
224
-        background-color: $circle-color;
225
-      }
226
-    }
227
-  }
228
-}
229 194
 .ng-hide{
230 195
   display: none;
231 196
 }

+ 82
- 0
style/partials/buttons.scss View File

@@ -0,0 +1,82 @@
1
+.md-btn {
2
+  position: relative;
3
+
4
+  margin: 0 15px 15px 15px;
5
+  padding: 0;
6
+
7
+  overflow: hidden;
8
+
9
+  border-width: 0;
10
+  outline: none;
11
+  border-radius: 2px;
12
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
13
+  color: rgb(33,33,33);
14
+  background-color: rgb(250,250,250);
15
+  cursor: pointer;
16
+  display: inline-block;
17
+  transition: background-color .3s;
18
+}
19
+
20
+.md-btn.default, .btn:focus {
21
+  background-color: rgb(16,108,200);
22
+  color: rgba(255,255,255,0.87);
23
+}
24
+.md-btn.default:hover, .btn:focus {
25
+  background-color: rgb(1,89,162);
26
+}
27
+
28
+.md-btn > * {
29
+  position: relative;
30
+}
31
+
32
+.md-btn span {
33
+  display: inline-block;
34
+  padding: 12px 24px;
35
+}
36
+
37
+.md-btn:before {
38
+  content: "";
39
+
40
+  position: absolute;
41
+  top: 50%;
42
+  left: 50%;
43
+
44
+  display: block;
45
+  width: 0;
46
+  padding-top: 0;
47
+
48
+  border-radius: 100%;
49
+
50
+  background-color: rgba(236, 240, 241, .3);
51
+
52
+  -webkit-transform: translate(-50%, -50%);
53
+  -moz-transform: translate(-50%, -50%);
54
+  -ms-transform: translate(-50%, -50%);
55
+  -o-transform: translate(-50%, -50%);
56
+  transform: translate(-50%, -50%);
57
+}
58
+
59
+.md-btn:active:before {
60
+  width: 120%;
61
+  padding-top: 120%;
62
+
63
+  transition: width .2s ease-out, padding-top .2s ease-out;
64
+}
65
+
66
+
67
+.md-btn.orange {
68
+  background-color: #e67e22;
69
+}
70
+
71
+.md-btn.orange:hover, .btn.orange:focus {
72
+  background-color: #d35400;
73
+}
74
+
75
+.md-btn.red {
76
+  background-color: rgb(255,87,34);
77
+  color: rgba(255,255,255,0.87);
78
+}
79
+
80
+.md-btn.red:hover, .btn.red:focus {
81
+  background-color: rgb(244,81,30);
82
+}

+ 36
- 0
style/partials/cicle.scss View File

@@ -0,0 +1,36 @@
1
+@import "../bourbon/bourbon";
2
+.radial-progress {
3
+  $circle-size : 10px;
4
+  $circle-background : #d6dadc;
5
+  $circle-color : #1565c0;
6
+  $transition-length : 0.5s;
7
+  display: inline-block;
8
+  left: 5px;
9
+  top: 0px;
10
+  position: relative;
11
+  width: $circle-size;
12
+  height: $circle-size;
13
+
14
+  background-color: $circle-background;
15
+  border-radius: 50%;
16
+  .circle {
17
+    .mask, .fill {
18
+      width: $circle-size;
19
+      height: $circle-size;
20
+      position: absolute;
21
+
22
+      border-radius: 50%;
23
+
24
+      @include transition(transform $transition-length);
25
+      @include backface-visibility(hidden);
26
+
27
+    }
28
+    .mask {
29
+      clip: rect(0px, $circle-size, $circle-size, $circle-size/2);
30
+      .fill {
31
+        clip: rect(0px, $circle-size/2, $circle-size, 0px);
32
+        background-color: $circle-color;
33
+      }
34
+    }
35
+  }
36
+}

+ 40
- 0
style/partials/list.scss View File

@@ -0,0 +1,40 @@
1
+
2
+$linkColor: #737373;
3
+.list {
4
+  width: 100%;
5
+
6
+  .list-item {
7
+    &:hover{
8
+      background-color: #e4e4e4;
9
+    }
10
+    position: relative;
11
+    padding: 12px 15px;
12
+    .title {
13
+      font-weight: bold;
14
+      font-size: 15px;
15
+    }
16
+
17
+    .info {
18
+      font-size: 13px;
19
+    }
20
+
21
+    .extra {
22
+      font-size: 13px;
23
+      color: $linkColor;
24
+    }
25
+
26
+    .edit {
27
+      position: absolute;
28
+      right: 15px;
29
+      top: 50%;
30
+      -ms-transform: translateY(-50%);
31
+      -webkit-transform: translateY(-50%);
32
+      transform: translateY(-50%);
33
+      font-size: 25px;
34
+      color: $linkColor;
35
+    }
36
+    .mdi{
37
+      cursor: pointer;
38
+    }
39
+  }
40
+}

+ 159
- 0
style/partials/material-input.scss View File

@@ -0,0 +1,159 @@
1
+@import "../bourbon/bourbon";
2
+
3
+/* form starting stylings ------------------------------- */
4
+.group {
5
+  position: relative;
6
+  margin-bottom: 45px;
7
+}
8
+
9
+input {
10
+  font-size: 14px;
11
+  padding: 10px 10px 10px 5px;
12
+  display: block;
13
+  width: 100%;
14
+  border: none;
15
+  border-bottom: 1px solid #757575;
16
+}
17
+
18
+input:focus {
19
+  outline: none;
20
+}
21
+
22
+/* LABEL ======================================= */
23
+label {
24
+  color: #999;
25
+  font-size: 14px;
26
+  font-weight: normal;
27
+  position: absolute;
28
+  pointer-events: none;
29
+  left: 5px;
30
+  top: 10px;
31
+
32
+  transition: 0.2s ease all;
33
+  -moz-transition: 0.2s ease all;
34
+  -webkit-transition: 0.2s ease all;
35
+}
36
+
37
+/* active state */
38
+input:focus ~ label, input.ng-valid:not(.ng-empty) ~ label {
39
+  top: -20px;
40
+  font-size: 14px;
41
+  color: #1565c0;
42
+}
43
+
44
+/* BOTTOM BARS ================================= */
45
+.bar {
46
+  position: relative;
47
+  display: block;
48
+  width: 100%;
49
+}
50
+
51
+.bar:before, .bar:after {
52
+  content: '';
53
+  height: 2px;
54
+  width: 0;
55
+  bottom: 1px;
56
+  position: absolute;
57
+  background: #1565c0;
58
+  transition: 0.2s ease all;
59
+  -moz-transition: 0.2s ease all;
60
+  -webkit-transition: 0.2s ease all;
61
+}
62
+
63
+.bar:before {
64
+  left: 50%;
65
+}
66
+
67
+.bar:after {
68
+  right: 50%;
69
+}
70
+
71
+/* active state */
72
+input:focus ~ .bar:before, input:focus ~ .bar:after {
73
+  width: 50%;
74
+}
75
+
76
+/* HIGHLIGHTER ================================== */
77
+.highlight {
78
+  position: absolute;
79
+  height: 60%;
80
+  width: 100px;
81
+  top: 25%;
82
+  left: 0;
83
+  pointer-events: none;
84
+  opacity: 0.5;
85
+
86
+}
87
+.group .mdi-content-copy, .pwField .mdi{
88
+  /*position: absolute;
89
+  right: 0;*/
90
+  margin-top:5px;
91
+  float: right;
92
+  font-size: 15px;
93
+  cursor: pointer;
94
+  height: 32px;
95
+  padding-top: 6px;
96
+  padding-left: 9px;
97
+  width: 32px;
98
+  $border: 16px;
99
+  @include border-top-radius($border);
100
+  @include border-right-radius($border);
101
+  @include border-bottom-radius($border);
102
+  @include border-left-radius($border);
103
+  &:hover {
104
+    text-decoration: none;
105
+    background-color: #e4e4e4;
106
+
107
+  }
108
+}
109
+
110
+.pwField{
111
+
112
+  .mdi-content-copy ~ input{
113
+    width: calc(100% - 96px);
114
+  }
115
+}
116
+
117
+.mdi-content-copy ~ input{
118
+  width: calc(100% - 32px);
119
+}
120
+.mdi-content-copy ~ .bar{
121
+  width: calc(100% - 32px);
122
+}
123
+/* active state */
124
+input:focus ~ .highlight {
125
+  -webkit-animation: inputHighlighter 0.3s ease;
126
+  -moz-animation: inputHighlighter 0.3s ease;
127
+  animation: inputHighlighter 0.3s ease;
128
+}
129
+
130
+/* ANIMATIONS ================ */
131
+@-webkit-keyframes inputHighlighter {
132
+  from {
133
+    background: #1565c0;
134
+  }
135
+  to {
136
+    width: 0;
137
+    background: transparent;
138
+  }
139
+}
140
+
141
+@-moz-keyframes inputHighlighter {
142
+  from {
143
+    background: #1565c0;
144
+  }
145
+  to {
146
+    width: 0;
147
+    background: transparent;
148
+  }
149
+}
150
+
151
+@keyframes inputHighlighter {
152
+  from {
153
+    background: #1565c0;
154
+  }
155
+  to {
156
+    width: 0;
157
+    background: transparent;
158
+  }
159
+}