MycroftAI
/
selene-ui
mirror of https://github.com/MycroftAI/selene-ui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

changed marketplace scss to use refactored theming stylesheets

pull/1/head
Chris Veilleux 2019-01-28 17:48:29 -06:00
parent 27912b4005
commit f0c9244b91
9 changed files with 45 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
projects/market/src/app/skills/install-button/install-button.component.scss
View File

@ -1,3 +1,4 @@
@import '~@angular/material/theming';
@import 'mycroft-colors'; @import 'mycroft-colors';
@mixin install-status { @mixin install-status {
@ -26,13 +27,13 @@ fa-icon {
#install-button { #install-button {
@include install-status; @include install-status;
background-color: $mycroft-primary ; background-color: mat-color($mycroft-primary) ;
color: $mycroft-white; color: mat-contrast($mycroft-primary, 500);
} }
#install-button:hover { #install-button:hover {
@include install-status; @include install-status;
background-color: $mycroft-tertiary-green; background-color: mat-color($mycroft-accent, A100);
color: $mycroft-secondary; color: mat-color($mycroft-accent);
} }
#installed-button { #installed-button {
@ -41,8 +42,8 @@ fa-icon {
#installing-button { #installing-button {
@include install-status; @include install-status;
background-color: $mycroft-tertiary-green; background-color: mat-color($mycroft-accent, A100);;
color: $mycroft-secondary; color: mat-color($mycroft-accent);
mat-spinner { mat-spinner {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
@ -51,30 +52,30 @@ fa-icon {
} }
#installing-spinner { #installing-spinner {
@include spinner-common; @include spinner-common;
border-right-color: $mycroft-secondary; border-right-color: mat-color($mycroft-accent);
border-top-color: $mycroft-secondary; border-top-color: mat-color($mycroft-accent);
} }
#uninstall-button { #uninstall-button {
@include install-status; @include install-status;
background-color: $mycroft-dark-grey; background-color: mat-color($mycroft-accent, A700);
color: $mycroft-white; color: mat-contrast($mycroft-accent, 500);
} }
.uninstall-button:hover { .uninstall-button:hover {
@include install-status; @include install-status;
border: none; border: none;
background-color: #eb5757; background-color: mat-color($mycroft-warn);
color: $mycroft-white; color: mat-contrast($mycroft-primary, 500);
} }
#uninstalling-button { #uninstalling-button {
@include install-status; @include install-status;
background-color: #eb5757; background-color: mat-color($mycroft-warn);
color: $mycroft-white; color: mat-contrast($mycroft-primary, 500);
} }
#uninstalling-spinner { #uninstalling-spinner {
@include spinner-common; @include spinner-common;
border-right-color: $mycroft-white; border-right-color: mat-contrast($mycroft-primary, 500);
border-top-color: $mycroft-white; border-top-color: mat-contrast($mycroft-primary, 500);
} }

7
projects/market/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.scss
View File

@ -1,8 +1,9 @@
@import '~@angular/material/theming';
@import 'mycroft-colors'; @import 'mycroft-colors';
@import "components/text"; @import "components/text";
#skill-detail-body { #skill-detail-body {
background-color: $mycroft-white; background-color: mat-contrast($mycroft-primary, 500);
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
margin-bottom: 50px; margin-bottom: 50px;
@ -12,14 +13,14 @@
padding-top: 3vh; padding-top: 3vh;
.mat-subheading-1 { .mat-subheading-1 {
color: $mycroft-dark-grey; color: mat-color($mycroft-accent, A700);
font-variant: small-caps; font-variant: small-caps;
font-weight: 500; font-weight: 500;
margin-bottom: 5px; margin-bottom: 5px;
} }
.mat-body-1 { .mat-body-1 {
color: $mycroft-secondary; color: mat-color($mycroft-accent);
} }
#kde-icon { #kde-icon {

9
projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.scss
View File

@ -1,3 +1,4 @@
@import "~@angular/material/theming";
@import 'mycroft-colors'; @import 'mycroft-colors';
@import "components/buttons"; @import "components/buttons";
@ -10,7 +11,7 @@
padding-right: 4vw; padding-right: 4vw;
padding-top: 4vh; padding-top: 4vh;
#skill-detail-header-left { #skill-detail-header-left {
color: $mycroft-secondary; color: mat-color($mycroft-accent);
margin-right: 50px; margin-right: 50px;
min-width: 340px; min-width: 340px;
fa { fa {
@ -34,13 +35,13 @@
@include action-button; @include action-button;
width: 140px; width: 140px;
&:hover { &:hover {
background-color: $mycroft-tertiary-green; background-color: mat-color($mycroft-accent, A100);
color: $mycroft-secondary; color: mat-color($mycroft-accent);
} }
} }
#github-button { #github-button {
color: $mycroft-dark-grey; color: mat-color($mycroft-accent, A700);
font-weight: normal; font-weight: normal;
width: 135px; width: 135px;
fa-icon { fa-icon {

3
projects/market/src/app/skills/skill-detail/skill-detail.component.scss
View File

@ -1,3 +1,4 @@
@import "~@angular/material/theming";
@import 'mycroft-colors'; @import 'mycroft-colors';
@mixin skill-detail-size { @mixin skill-detail-size {
@ -7,7 +8,7 @@
#navigate-back { #navigate-back {
@include skill-detail-size; @include skill-detail-size;
color: $mycroft-dark-grey; color: mat-color($mycroft-accent, A700);
padding-bottom: 10px; padding-bottom: 10px;
} }

3
projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.scss
View File

@ -1,3 +1,4 @@
@import "~@angular/material/theming";
@import 'mycroft-colors'; @import 'mycroft-colors';
#card-header { #card-header {
@ -16,7 +17,7 @@
width: 20px; width: 20px;
fa-icon { fa-icon {
color: $mycroft-tertiary-green; color: mat-color($mycroft-accent, A100);
font-size: 20px; font-size: 20px;
} }
} }

5
projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.scss
View File

@ -1,3 +1,4 @@
@import "~@angular/material/theming";
@import 'mycroft-colors'; @import 'mycroft-colors';
@import "components/text"; @import "components/text";
@ -19,7 +20,7 @@ mat-card {
mat-card-title { mat-card-title {
@include ellipsis-overflow; @include ellipsis-overflow;
color: $mycroft-secondary; color: mat-color($mycroft-accent);
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
font-weight: bold; font-weight: bold;
margin-bottom: 16px; margin-bottom: 16px;
@ -34,7 +35,7 @@ mat-card {
} }
mat-card-content { mat-card-content {
color: $mycroft-secondary; color: mat-color($mycroft-accent);
@include ellipsis-overflow; @include ellipsis-overflow;
text-align: center; text-align: center;
} }

7
projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.scss
View File

@ -1,7 +1,8 @@
@import "~@angular/material/theming";
@import 'mycroft-colors'; @import 'mycroft-colors';
fa-icon { fa-icon {
color: $mycroft-dark-grey; color: mat-color($mycroft-accent, A700);
} }
#skill-toolbar { #skill-toolbar {
@ -10,7 +11,7 @@ fa-icon {
#search-field { #search-field {
background-color: white; background-color: white;
border-radius: 10px; border-radius: 10px;
color: $mycroft-dark-grey; color: mat-color($mycroft-accent, A700);
min-width: 330px; min-width: 330px;
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
@ -23,7 +24,7 @@ fa-icon {
} }
#back-button { #back-button {
color: $mycroft-dark-grey; color: mat-color($mycroft-accent, A700);
margin-left: 20px; margin-left: 20px;
width: 100px; width: 100px;
} }

7
projects/market/src/app/skills/skill-summary/skill-summary.component.scss
View File

@ -1,11 +1,12 @@
@import "~@angular/material/theming";
@import 'mycroft-colors'; @import 'mycroft-colors';
#skill-category { #skill-category {
background-color: $market-background; //background-color: $market-background;
mat-toolbar { mat-toolbar {
background-color: $market-background; //background-color: $market-background;
color: $mycroft-dark-grey; color: mat-color($mycroft-accent, A700);
font-size: xx-large; font-size: xx-large;
margin-top: 20px; margin-top: 20px;
padding-left: 10px; padding-left: 10px;

7
src/stylesheets/components/_text.scss
View File

@ -1,3 +1,4 @@
@import "~@angular/material/theming";
@import "../mycroft-colors"; @import "../mycroft-colors";
@mixin ellipsis-overflow { @mixin ellipsis-overflow {
@ -7,16 +8,16 @@
} }
@mixin skill-trigger { @mixin skill-trigger {
background-color: $mycroft-blue-grey; background-color: mat-color($mycroft-accent, A700);
border-radius: 4px; border-radius: 4px;
color: $mycroft-secondary; color: mat-color($mycroft-accent);
font-weight: normal; font-weight: normal;
padding-bottom: 7px; padding-bottom: 7px;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
padding-top: 7px; padding-top: 7px;
fa-icon { fa-icon {
color: $mycroft-primary; color: mat-color($mycroft-primary);
margin-right: 5px; margin-right: 5px;
} }
} }