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';
@mixin install-status {
@ -26,13 +27,13 @@ fa-icon {
#install-button {
@include install-status;
background-color: $mycroft-primary ;
color: $mycroft-white;
background-color: mat-color($mycroft-primary) ;
color: mat-contrast($mycroft-primary, 500);
}
#install-button:hover {
@include install-status;
background-color: $mycroft-tertiary-green;
color: $mycroft-secondary;
background-color: mat-color($mycroft-accent, A100);
color: mat-color($mycroft-accent);
}
#installed-button {
@ -41,8 +42,8 @@ fa-icon {
#installing-button {
@include install-status;
background-color: $mycroft-tertiary-green;
color: $mycroft-secondary;
background-color: mat-color($mycroft-accent, A100);;
color: mat-color($mycroft-accent);
mat-spinner {
float: left;
margin-right: 10px;
@ -51,30 +52,30 @@ fa-icon {
}
#installing-spinner {
@include spinner-common;
border-right-color: $mycroft-secondary;
border-top-color: $mycroft-secondary;
border-right-color: mat-color($mycroft-accent);
border-top-color: mat-color($mycroft-accent);
}
#uninstall-button {
@include install-status;
background-color: $mycroft-dark-grey;
color: $mycroft-white;
background-color: mat-color($mycroft-accent, A700);
color: mat-contrast($mycroft-accent, 500);
}
.uninstall-button:hover {
@include install-status;
border: none;
background-color: #eb5757;
color: $mycroft-white;
background-color: mat-color($mycroft-warn);
color: mat-contrast($mycroft-primary, 500);
}
#uninstalling-button {
@include install-status;
background-color: #eb5757;
color: $mycroft-white;
background-color: mat-color($mycroft-warn);
color: mat-contrast($mycroft-primary, 500);
}
#uninstalling-spinner {
@include spinner-common;
border-right-color: $mycroft-white;
border-top-color: $mycroft-white;
border-right-color: mat-contrast($mycroft-primary, 500);
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 "components/text";
#skill-detail-body {
background-color: $mycroft-white;
background-color: mat-contrast($mycroft-primary, 500);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
margin-bottom: 50px;
@ -12,14 +13,14 @@
padding-top: 3vh;
.mat-subheading-1 {
color: $mycroft-dark-grey;
color: mat-color($mycroft-accent, A700);
font-variant: small-caps;
font-weight: 500;
margin-bottom: 5px;
}
.mat-body-1 {
color: $mycroft-secondary;
color: mat-color($mycroft-accent);
}
#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 "components/buttons";
@ -10,7 +11,7 @@
padding-right: 4vw;
padding-top: 4vh;
#skill-detail-header-left {
color: $mycroft-secondary;
color: mat-color($mycroft-accent);
margin-right: 50px;
min-width: 340px;
fa {
@ -34,13 +35,13 @@
@include action-button;
width: 140px;
&:hover {
background-color: $mycroft-tertiary-green;
color: $mycroft-secondary;
background-color: mat-color($mycroft-accent, A100);
color: mat-color($mycroft-accent);
}
}
#github-button {
color: $mycroft-dark-grey;
color: mat-color($mycroft-accent, A700);
font-weight: normal;
width: 135px;
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';
@mixin skill-detail-size {
@ -7,7 +8,7 @@
#navigate-back {
@include skill-detail-size;
color: $mycroft-dark-grey;
color: mat-color($mycroft-accent, A700);
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';
#card-header {
@ -16,7 +17,7 @@
width: 20px;
fa-icon {
color: $mycroft-tertiary-green;
color: mat-color($mycroft-accent, A100);
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 "components/text";
@ -19,7 +20,7 @@ mat-card {
mat-card-title {
@include ellipsis-overflow;
color: $mycroft-secondary;
color: mat-color($mycroft-accent);
font-family: 'Roboto Mono', monospace;
font-weight: bold;
margin-bottom: 16px;
@ -34,7 +35,7 @@ mat-card {
}
mat-card-content {
color: $mycroft-secondary;
color: mat-color($mycroft-accent);
@include ellipsis-overflow;
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';
fa-icon {
color: $mycroft-dark-grey;
color: mat-color($mycroft-accent, A700);
}
#skill-toolbar {
@ -10,7 +11,7 @@ fa-icon {
#search-field {
background-color: white;
border-radius: 10px;
color: $mycroft-dark-grey;
color: mat-color($mycroft-accent, A700);
min-width: 330px;
padding-left: 20px;
padding-right: 20px;
@ -23,7 +24,7 @@ fa-icon {
}
#back-button {
color: $mycroft-dark-grey;
color: mat-color($mycroft-accent, A700);
margin-left: 20px;
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';
#skill-category {
background-color: $market-background;
//background-color: $market-background;
mat-toolbar {
background-color: $market-background;
color: $mycroft-dark-grey;
//background-color: $market-background;
color: mat-color($mycroft-accent, A700);
font-size: xx-large;
margin-top: 20px;
padding-left: 10px;

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

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