Skip to content

Commit ed0e469

Browse files
pbernasconipbernasconi
committed
more css
1 parent 25a56e2 commit ed0e469

File tree

4 files changed

+147
-35
lines changed

4 files changed

+147
-35
lines changed

‎client/app/app.css‎

Lines changed: 127 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -94,9 +94,11 @@ ul {
9494
.side-panel > header .logo-title {
9595
float: left;
9696
margin-left: 20px;
97-
font-weight: 300;
98-
font-size: 20px;
99-
letter-spacing: 1px;
97+
font-weight: 200;
98+
font-size: 16px;
99+
letter-spacing: 2px;
100+
border-top: 2px solid transparent;
101+
text-transform: uppercase;
100102
}
101103

102104
/**
@@ -127,8 +129,12 @@ ul {
127129
text-decoration: none;
128130
height: 30px;
129131
line-height: 30px;
130-
width: 120px;
131-
font-size: 13px;
132+
text-transform: uppercase;
133+
letter-spacing: 1px;
134+
font-weight: 200;
135+
width: 130px;
136+
font-size: 12px;
137+
cursor: pointer;
132138
-webkit-transition: 200ms;
133139
-moz-transition: 200ms;
134140
-ms-transition: 200ms;
@@ -146,7 +152,6 @@ ul {
146152
border-radius: 0 5px 5px 0;
147153
}
148154

149-
150155
.sub-header .button-row a.selected {
151156
background-color: #575859;
152157
color: #ffFFFF;
@@ -177,8 +182,11 @@ ul {
177182
width: 100%;
178183
background-color: #4B8BF4;
179184
color: #fFF;
180-
font-size: 17px;
181-
border: 2px solid #4B8BF4;
185+
font-size: 15px;
186+
letter-spacing: 1px;
187+
font-weight: 200;
188+
text-transform: uppercase;
189+
border: 1px solid #4B8BF4;
182190
-webkit-transition: all 0.20s ease-in-out;
183191
-moz-transition: all 0.20s ease-in-out;
184192
-ms-transition: all 0.20s ease-in-out;
@@ -187,7 +195,7 @@ ul {
187195

188196
.side-panel .btn-download:hover, .side-panel .btn-download:focus {
189197
outline: none;
190-
border: 2px solid #4B8BF4;
198+
border: 1px solid #4B8BF4;
191199
color: #4B8BF4;
192200
background-color: #FFFFFF;
193201
-webkit-transition: all 0.20s ease-in-out;
@@ -278,7 +286,7 @@ ul {
278286
border: 1px solid #ECF0F6;
279287
border-radius: 2px;
280288
padding-right: 5px;
281-
padding-top: 2px;
289+
padding-top: 3px;
282290
padding-bottom: 2px;
283291
-webkit-transition: all 0.30s ease-in-out;
284292
-moz-transition: all 0.30s ease-in-out;
@@ -309,10 +317,47 @@ ul {
309317
letter-spacing: 1px;
310318
}
311319

312-
/*
313-
* Color-picker
320+
/****************************************************
321+
* COLOR PICKER
314322
*/
315323

324+
.sp-container {
325+
background-color: #EFF1F5;
326+
border: 1px solid #eceef0;
327+
border-radius: 2px;
328+
}
329+
330+
.sp-picker-container {
331+
border: none;
332+
}
333+
334+
335+
.sp-color {
336+
border: none;
337+
border-radius: 2px;
338+
}
339+
340+
.sp-hue {
341+
border: none;
342+
border-radius: 2px;
343+
}
344+
345+
.sp-alpha-inner {
346+
border: none;
347+
}
348+
349+
.sp-slider {
350+
border-color: #575859;
351+
border-radius: 1px;
352+
opacity: 1;
353+
}
354+
355+
.sp-alpha-handle {
356+
border-color: #575859;
357+
border-radius: 1px;
358+
opacity: 1;
359+
}
360+
316361
.sp-replacer {
317362
float: right;
318363
margin-right: 20px;
@@ -334,8 +379,63 @@ ul {
334379
display: none;
335380
}
336381

337-
/**
338-
* Main-panel
382+
input.sp-input {
383+
background-color: #ffFFFF;
384+
border: 1px solid #4B8BF4;
385+
border-radius: 2px;
386+
padding: 5px;
387+
-webkit-transition: all 0.30s ease-in-out;
388+
-moz-transition: all 0.30s ease-in-out;
389+
-ms-transition: all 0.30s ease-in-out;
390+
-o-transition: all 0.30s ease-in-out;
391+
}
392+
393+
input.sp-input:focus, input.sp-input:hover {
394+
outline: none;
395+
border: 1px solid #4B8BF4;
396+
}
397+
398+
.sp-cancel {
399+
background: #ff4843;
400+
text-shadow: none;
401+
color: #fFF !important;
402+
border-radius: 3px;
403+
padding: 4px;
404+
letter-spacing: 1px;
405+
font-size: 11px;
406+
font-weight: 200;
407+
text-transform: uppercase;
408+
border: 1px solid #ff4843;
409+
}
410+
411+
.sp-cancel:hover {
412+
background: #FFF;
413+
text-decoration: none;
414+
color: #ff4843 !important;
415+
border: 1px solid #ff4843;
416+
417+
}
418+
419+
.sp-button-container > button {
420+
background: #4B8BF4;
421+
text-shadow: none;
422+
color: #fFF;
423+
letter-spacing: 1px;
424+
font-size: 11px;
425+
font-weight: 200;
426+
text-transform: uppercase;
427+
border: 1px solid #4B8BF4;
428+
}
429+
430+
.sp-button-container > button:hover {
431+
border: 1px solid #4B8BF4;
432+
background: #FFF !important;
433+
color: #4B8BF4;
434+
text-shadow: none;
435+
}
436+
437+
/****************************************************
438+
* MAIN PANEL
339439
*/
340440

341441
.main-panel {
@@ -397,8 +497,6 @@ ul {
397497
outline: none;
398498
}
399499

400-
/* Main - section */
401-
402500
.main-panel .main-panel-view {
403501
position: absolute;
404502
top: 55px;
@@ -431,7 +529,9 @@ ul {
431529
padding: 5px;
432530
}
433531

434-
/* Device preview */
532+
/****************************************************
533+
* DEVICE PREVIEW
534+
*/
435535

436536
.device-header {
437537
text-align: center;
@@ -464,17 +564,8 @@ ul {
464564
-webkit-transform-origin: 0 0;
465565
}
466566

467-
/*
468-
* Other
469-
*/
470-
471-
.icon-lg {
472-
font-size: 1.75em;
473-
line-height: 1;
474-
}
475-
476-
/*
477-
* Spinkit
567+
/****************************************************
568+
* SPINNER
478569
*/
479570

480571
.spinner-background {
@@ -539,8 +630,8 @@ ul {
539630
}
540631
}
541632

542-
/*
543-
* Download Modal
633+
/****************************************************
634+
* DOWNLOAD MODAL
544635
*/
545636

546637
.ngdialog-content {
@@ -666,5 +757,10 @@ ul {
666757
}
667758

668759
.ngdialog-close:hover:before {
669-
color: rgb(255, 142, 155) !important;
760+
color: #575859 !important;
761+
}
762+
763+
.icon-lg {
764+
font-size: 1.75em;
765+
line-height: 1;
670766
}

‎client/app/main/main.controller.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
"use strict";
22

33
angular.module("projectsApp")
4-
.controller("MainCtrl", function ($scope, $timeout, ngDialog, Compiler) {
4+
5+
.controller("MainCtrl", function ($scope, $timeout, ngDialog) {
56

67
// initial variables
78
$scope.activeTab = 1;
@@ -61,6 +62,7 @@ angular.module("projectsApp")
6162
$scope.selectedButtonBar = index;
6263
};
6364

65+
// return index of selected button bar
6466
$scope.isButtonBar = function (index) {
6567
return index === $scope.selectedButtonBar;
6668
};
@@ -116,6 +118,7 @@ angular.module("projectsApp")
116118
}, 1000);
117119
};
118120

121+
// open modal with download button
119122
$scope.prepDownload = function () {
120123
ngDialog.open({
121124
template: 'downloadModal',
@@ -126,6 +129,8 @@ angular.module("projectsApp")
126129
};
127130
})
128131

132+
133+
// Download Controller for modal
129134
.controller("DownloadModal", function ($scope, ngDialog, Compiler) {
130135

131136
$scope.filename = "ionic.app.css";

‎client/app/main/main.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<div class="sub-header">
1111
<div class="button-row">
1212
<a ng-click="setButtonBar(0)" ng-class="{'selected' : isButtonBar(0)}">Customize</a>
13-
<a ng-click="setButtonBar(1)" ng-class="{'selected' : isButtonBar(1)}">Preset</a>
13+
<a ng-class="{'selected' : isButtonBar(1)}">Preset themes</a> <!-- ng-click="setButtonBar(1)" -->
1414
</div>
1515
</div>
1616

@@ -121,7 +121,7 @@ <h4>Made with <i class="icon ion-heart"></i> by <a href="https://github.com/pber
121121
<div class="main-panel">
122122
<ul class="main-panel-tabs">
123123
<li ng-click="setActiveTab(1)" ng-class="{'active': activeTab == 1}">Phone View</li>
124-
<li ng-class="{'active': activeTab == 2}">Examples</li>
124+
<li ng-class="{'active': activeTab == 2}">Components</li>
125125
<li class="tabs-left">
126126
<a class="btn-login" ng-click="loginGithub()" href="https://github.com/pbernasconi/ionic-theme-editor">Github <i class="icon ion-social-github fa-lg"></i></a>
127127
</li>
@@ -282,7 +282,7 @@ <h1 class="imodal-title">Download CSS File</h1>
282282
<div class="imodal-content">
283283
<div class="input-group">
284284
<label>File name</label>
285-
<input type="text" ng-model="filename">
285+
<input type="text" ng-model="filename" autoFocus>
286286
</div>
287287

288288
<div class="input-group">

‎client/app/theme/theme.directive.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,15 @@ angular.module('projectsApp')
3030
}, true);
3131
}
3232
}
33+
})
34+
35+
.directive('autoFocus', function ($timeout) {
36+
return {
37+
restrict: 'AC',
38+
link: function (_scope, _element) {
39+
$timeout(function () {
40+
_element[0].focus();
41+
}, 0);
42+
}
43+
};
3344
});

0 commit comments

Comments
 (0)