material design with purple style started
arnaucode idoctnef@openmailbox.org
Thu, 26 Jan 2017 21:07:04 +0100
8 files changed,
129 insertions(+),
32 deletions(-)
M
www/css/style.css
→
www/css/style.css
@@ -22,8 +22,8 @@ la 'b' és de background, si és una 'f' és de font
a part podem posar ColorDark o ColorLight per fer un color més fosc o més clar */ .o_bSidenav{ - background: #333b42!important; - color: #c6ccd2!important; + background: #ffffff!important; + color: #616161!important; } .o_fWhiteLight{ color: #c6ccd2!important;@@ -85,11 +85,94 @@ .o_bOrangeDark{
background: #FF7043!important; color: #ffffff!important; } -.o_bPurple{ +/*.o_bPurple{ background: #9575CD!important; color: #ffffff!important; } .o_bPurpleDark{ background: #512DA8!important; color: #ffffff!important; +}*/ + +.o_purple50{ + background: #EDE7F6!important; + color: #000000!important; +} +.o_purple100{ + background: #D1C4E9!important; + color: #000000!important; +} +.o_purple200{ + background: #B39DDB!important; + color: #000000!important; +} +.o_purple300{ + background: #9575CD!important; + color: #ffffff!important; +} +.o_purple400{ + background: #7E57C2!important; + color: #ffffff!important; +} +.o_purple500{ + background: #673AB7!important; + color: #ffffff!important; +} +.o_purple600{ + background: #5E35B1!important; + color: #ffffff!important; +} +.o_purple700{ + background: #512DA8!important; + color: #ffffff!important; +} +.o_purple800{ + background: #4527A0!important; + color: #ffffff!important; +} +.o_purple900{ + background: #311B92!important; + color: #ffffff!important; +} + + +.o_purpleG000to200{ + background: -moz-linear-gradient(0deg, #ffffff 0%, #D1C4E9 100%); /* ff3.6+ */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(100%, #D1C4E9)); /* safari4+,chrome */ + background: -webkit-linear-gradient(0deg, #ffffff 0%, #D1C4E9 100%); /* safari5.1+,chrome10+ */ + background: -o-linear-gradient(0deg, #ffffff 0%, #D1C4E9 100%); /* opera 11.10+ */ + background: -ms-linear-gradient(0deg, #ffffff 0%, #D1C4E9 100%); /* ie10+ */ + background: linear-gradient(90deg, #ffffff 0%, #D1C4E9 100%); /* w3c */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#D1C4E9',GradientType=1 ); /* ie6-9 */ +} +.o_purpleG500to300{ + background: -moz-linear-gradient(219deg, #9575CD 0%, #673AB7 100%); /* ff3.6+ */ + background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #673AB7), color-stop(100%, #9575CD)); /* safari4+,chrome */ + background: -webkit-linear-gradient(219deg, #9575CD 0%, #673AB7 100%); /* safari5.1+,chrome10+ */ + background: -o-linear-gradient(219deg, #9575CD 0%, #673AB7 100%); /* opera 11.10+ */ + background: -ms-linear-gradient(219deg, #9575CD 0%, #673AB7 100%); /* ie10+ */ + background: linear-gradient(231deg, #9575CD 0%, #673AB7 100%); /* w3c */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#673AB7', endColorstr='#9575CD',GradientType=1 ); /* ie6-9 */ + color: #ffffff!important; +} +.o_purpleG300to500{ + background: -moz-linear-gradient(42deg, #9575CD 0%, #673AB7 100%); /* ff3.6+ */ + background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #9575CD), color-stop(100%, #673AB7)); /* safari4+,chrome */ + background: -webkit-linear-gradient(42deg, #9575CD 0%, #673AB7 100%); /* safari5.1+,chrome10+ */ + background: -o-linear-gradient(42deg, #9575CD 0%, #673AB7 100%); /* opera 11.10+ */ + background: -ms-linear-gradient(42deg, #9575CD 0%, #673AB7 100%); /* ie10+ */ + background: linear-gradient(48deg, #9575CD 0%, #673AB7 100%); /* w3c */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9575CD', endColorstr='#673AB7',GradientType=1 ); /* ie6-9 */ + color: #ffffff!important; +} + + +.o_text_purple400{ + color: #7E57C2!important; +} +.o_text_purple500{ + color: #673AB7!important; +} +.o_text_purple600{ + color: #5E35B1!important; }
M
www/templates/main.html
→
www/templates/main.html
@@ -1,18 +1,30 @@
<ion-view view-title="Main"> <ion-content> - <a ng-href="#/app/travels" class="item item-icon-left o_bGreenDark"> + <a ng-href="#/app/users/{{storageuser._id}}" class="item item-icon-left o_purpleG300to500"> + <i class="icon ion-person"></i> + {{storageuser.username}} profile + </a> + <a ng-href="#/app/newPublication" class="item item-icon-left o_purpleG300to500"> + <i class="icon ion-paper-airplane"></i> + New publication + </a> + <a ng-href="#/app/travels" class="item item-icon-left o_purpleG300to500"> <i class="icon ion-android-car"></i> Travels </a> - <a href="#/app/users" class="item item-icon-left o_bBlue"> + <a href="#/app/users" class="item item-icon-left o_purpleG300to500"> <i class="icon ion-person-stalker"></i> Users </a> - <a href="#/app/settings" class="item item-icon-left o_bOrange"> + <a href="#/app/notifications" class="item item-icon-left o_purpleG300to500"> + <i class="icon ion-android-notifications"></i> + Notifications + </a> + <a href="#/app/settings" class="item item-icon-left o_purpleG300to500"> <i class="icon ion-settings"></i> Settings </a> - <a href="#/app/help" class="item item-icon-left"> + <a href="#/app/help" class="item item-icon-left o_purpleG300to500"> <i class="icon ion-ios-help-outline"></i> Help </a>
M
www/templates/newPublication.html
→
www/templates/newPublication.html
@@ -1,14 +1,14 @@
<ion-view view-title="New Publication"> <ion-content> - <a ng-href="#/app/offerCar" class="item item-icon-left o_bBlue"> + <a ng-href="#/app/offerCar" class="item item-icon-left o_purple500"> <i class="icon ion-android-car"></i> Offer Car </a> - <a href="#/app/dashboard" class="item item-icon-left o_bGreen"> + <a href="#/app/dashboard" class="item item-icon-left o_purple400"> <i class="icon ion-help"></i> Ask for Car </a> - <a href="#/app/marks/{{storageuser._id}}" class="item item-icon-left o_bOrange"> + <a href="#/app/marks/{{storageuser._id}}" class="item item-icon-left o_purple300"> <i class="icon ion-ios-box"></i> Ask for Package </a>
M
www/templates/offerCar.html
→
www/templates/offerCar.html
@@ -2,7 +2,7 @@ <ion-view view-title="Offer Car">
<ion-content> <div class="list"> <label class="item item-input"> - <span class="input-label"t>{{'Title' | translate}}</span> + <span class="input-label">{{'Title' | translate}}</span> <input ng-model="newtravel.title" class="positive" type="text" placeholder=""> </label>@@ -50,9 +50,9 @@ <span class="input-label">{{'Description' | translate}}</span>
<input ng-model="newtravel.description" type="text" placeholder="Description"> </label> <p class="padding"> - <button ng-click="createTravel()" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent o_floatRight"> + <md-button ng-click="createTravel()" class="o_purple400 o_floatRight"> {{'Create_travel' | translate}} - </button> + </md-button> </p> </div> </ion-content>
M
www/templates/travels.html
→
www/templates/travels.html
@@ -23,12 +23,13 @@ {{'No_data_in_memory' | translate}}<br>
{{'Pull_from_top_to_refresh' | translate}} </div> </div> - <a ng-repeat="travel in travels | orderBy: 'date' | filter: search" class="item item-avatar" href="#/app/travels/{{travel._id}}"> + <a ng-repeat="travel in travels | orderBy: 'date' | filter: search" + class="item item-avatar" href="#/app/travels/{{travel._id}}"> <img ng-src="img/{{travel.type}}.png"/> - <h2>{{travel.title}}</h2> + <h2 class="o_text_purple600">{{travel.title}}</h2> <div class="item-note text-right"> - <div class="positive">{{travel.date | date:"dd/MM"}}</div> - <div class="positive">{{travel.date | date:"HH:mm"}}h</div> + <div class="o_text_purple400">{{travel.date | date:"dd/MM"}}</div> + <div class="o_text_purple400">{{travel.date | date:"HH:mm"}}h</div> <!--<div class="badge badge-calm">{{travel.owner}}</div>--> </div> <p>
M
www/templates/user.html
→
www/templates/user.html
@@ -34,13 +34,14 @@ </div>
</div> <div class="item item-body"> {{'current_publications_of' | translate}} {{user.username}}: - <div class="positive">{{user.travels.length}} {{'publications' | translate}}</div> + <div class="o_text_purple600">{{user.travels.length}} {{'publications' | translate}}</div> <a ng-repeat="travel in user.travels | orderBy: 'date'" class="item item-avatar" href="#/app/travels/{{travel._id}}"> <img ng-src="img/{{travel.type}}.png"> <h2>{{travel.title}} <div class="item-note"> - <div class="positive">{{travel.date | date:"dd/MM/yyyy HH:mm a"}}</div> + <div class="o_text_purple400">{{travel.date | date:"HH:mm a"}}</div> + <div class="o_text_purple400">{{travel.date | date:"dd/MM/yyyy"}}</div> </div> </h2>
M
www/templates/users.html
→
www/templates/users.html
@@ -12,9 +12,9 @@ {{'Pull_from_top_to_refresh' | translate}}
</div> </div> - <a ng-repeat="user in users | orderBy: 'date'" class="item item-avatar" ng-href="#/app/users/{{user.username}}"> + <a ng-repeat="user in users | orderBy: 'date'" class="item item-avatar" ng-href="#/app/users/{{user._id}}"> <img ng-src="{{user.avatar}}"> - <h2>{{user.username}}</h2> + <h2 class="o_text_purple600">{{user.username}}</h2> <p> {{user.description}} </p>