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

learned some things about scss so made scss files more "sassy"

pull/26/head
Chris Veilleux 2018-12-02 00:24:59 -06:00
parent 2dfa71eae1
commit e43117062e
37 changed files with 290 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/internet/angular.json
View File

@ -29,6 +29,11 @@
"styles": [ "styles": [
"src/styles.scss" "src/styles.scss"
], ],
"stylePreprocessorOptions": {
"includePaths": [
"./src/stylesheets"
]
},
"scripts": [] "scripts": []
}, },
"configurations": { "configurations": {
@ -85,6 +90,11 @@
"styles": [ "styles": [
"src/styles.scss" "src/styles.scss"
], ],
"stylePreprocessorOptions": {
"includePaths": [
"./src/stylesheets"
]
},
"scripts": [], "scripts": [],
"assets": [ "assets": [
"src/favicon.ico", "src/favicon.ico",
@ -177,8 +187,13 @@
"projects/market/src/assets" "projects/market/src/assets"
], ],
"styles": [ "styles": [
"projects/market/src/styles.scss" "src/styles.scss"
], ],
"stylePreprocessorOptions": {
"includePaths": [
"./src/stylesheets"
]
},
"scripts": [] "scripts": []
}, },
"configurations": { "configurations": {
@ -249,8 +264,13 @@
"tsConfig": "projects/market/tsconfig.spec.json", "tsConfig": "projects/market/tsconfig.spec.json",
"karmaConfig": "projects/market/karma.conf.js", "karmaConfig": "projects/market/karma.conf.js",
"styles": [ "styles": [
"projects/market/src/styles.scss" "src/styles.scss"
], ],
"stylePreprocessorOptions": {
"includePaths": [
"./src/stylesheets"
]
},
"scripts": [], "scripts": [],
"assets": [ "assets": [
"projects/market/src/favicon.ico", "projects/market/src/favicon.ico",
@ -343,8 +363,13 @@
"projects/sso/src/assets" "projects/sso/src/assets"
], ],
"styles": [ "styles": [
"projects/sso/src/styles.scss" "src/styles.scss"
], ],
"stylePreprocessorOptions": {
"includePaths": [
"./src/stylesheets"
]
},
"scripts": [] "scripts": []
}, },
"configurations": { "configurations": {
@ -415,8 +440,13 @@
"tsConfig": "projects/sso/tsconfig.spec.json", "tsConfig": "projects/sso/tsconfig.spec.json",
"karmaConfig": "projects/sso/karma.conf.js", "karmaConfig": "projects/sso/karma.conf.js",
"styles": [ "styles": [
"projects/sso/src/styles.scss" "src/styles.scss"
], ],
"stylePreprocessorOptions": {
"includePaths": [
"./src/stylesheets"
]
},
"scripts": [], "scripts": [],
"assets": [ "assets": [
"projects/sso/src/favicon.ico", "projects/sso/src/favicon.ico",
@ -544,8 +574,13 @@
"projects/account/src/assets" "projects/account/src/assets"
], ],
"styles": [ "styles": [
"projects/account/src/styles.scss" "src/styles.scss"
], ],
"stylePreprocessorOptions": {
"includePaths": [
"./src/stylesheets"
]
},
"scripts": [] "scripts": []
}, },
"configurations": { "configurations": {
@ -600,8 +635,13 @@
"tsConfig": "projects/account/tsconfig.spec.json", "tsConfig": "projects/account/tsconfig.spec.json",
"karmaConfig": "projects/account/karma.conf.js", "karmaConfig": "projects/account/karma.conf.js",
"styles": [ "styles": [
"projects/account/src/styles.scss" "src/styles.scss"
], ],
"stylePreprocessorOptions": {
"includePaths": [
"./src/stylesheets"
]
},
"scripts": [], "scripts": [],
"assets": [ "assets": [
"projects/account/src/favicon.ico", "projects/account/src/favicon.ico",

2
frontend/internet/projects/market/src/app/app.component.html
View File

@ -6,7 +6,7 @@
Inject the marketplace app into the <mat-sidenav-content> component Inject the marketplace app into the <mat-sidenav-content> component
of the global navigation menu library. of the global navigation menu library.
--> -->
<div appBody class="app-body"> <div appBody id="app-body">
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
</globalnav-sidenav> </globalnav-sidenav>

4
frontend/internet/projects/market/src/app/app.component.scss
View File

@ -1,6 +1,4 @@
@import '../stylesheets/global'; #app-body {
.app-body {
margin-left: 3vw; margin-left: 3vw;
margin-right: 3vw; margin-right: 3vw;
margin-top: 30px; margin-top: 30px;

14
frontend/internet/projects/market/src/app/skills/install-button/install-button.component.html
View File

@ -6,7 +6,7 @@
fxLayout="row" fxLayout="row"
fxLayoutAlign="center center" fxLayoutAlign="center center"
mat-flat-button mat-flat-button
class="uninstall-button" id="uninstall-button"
(click)="uninstallSkill()" (click)="uninstallSkill()"
[ngStyle]="installButtonStyle" [ngStyle]="installButtonStyle"
> >
@ -20,7 +20,7 @@
fxLayout="row" fxLayout="row"
fxLayoutAlign="center center" fxLayoutAlign="center center"
mat-flat-button mat-flat-button
class="installed-button" id="installed-button"
[disabled]="true" [disabled]="true"
[ngStyle]="installButtonStyle" [ngStyle]="installButtonStyle"
> >
@ -34,10 +34,10 @@
fxLayout="row" fxLayout="row"
fxLayoutAlign="center center" fxLayoutAlign="center center"
mat-flat-button mat-flat-button
class="installing-button" id="installing-button"
[ngStyle]="installButtonStyle" [ngStyle]="installButtonStyle"
> >
<div class="installing-spinner"></div> <div id="installing-spinner"></div>
ADDING... ADDING...
</button> </button>
@ -47,10 +47,10 @@
fxLayout="row" fxLayout="row"
fxLayoutAlign="center center" fxLayoutAlign="center center"
mat-flat-button mat-flat-button
class="uninstalling-button" id="uninstalling-button"
[ngStyle]="installButtonStyle" [ngStyle]="installButtonStyle"
> >
<div class="uninstalling-spinner"></div> <div id="uninstalling-spinner"></div>
REMOVING... REMOVING...
</button> </button>
@ -59,7 +59,7 @@
*ngSwitchDefault *ngSwitchDefault
fxLayout="row" fxLayout="row"
fxLayoutAlign="center center" fxLayoutAlign="center center"
class="install-button" id="install-button"
mat-flat-button mat-flat-button
(click)="install_skill()" (click)="install_skill()"
[ngStyle]="installButtonStyle" [ngStyle]="installButtonStyle"

18
frontend/internet/projects/market/src/app/skills/install-button/install-button.component.scss
View File

@ -1,4 +1,4 @@
@import '../../../stylesheets/global.scss'; @import 'mycroft-colors';
@mixin install-status { @mixin install-status {
border-radius: 4px; border-radius: 4px;
@ -24,22 +24,22 @@ fa-icon {
opacity: 0.6; opacity: 0.6;
} }
.install-button { #install-button {
@include install-status; @include install-status;
background-color: $mycroft-primary ; background-color: $mycroft-primary ;
color: $mycroft-white; color: $mycroft-white;
} }
.install-button:hover { #install-button:hover {
@include install-status; @include install-status;
background-color: $mycroft-tertiary-green; background-color: $mycroft-tertiary-green;
color: $mycroft-secondary; color: $mycroft-secondary;
} }
.installed-button { #installed-button {
@include install-status; @include install-status;
} }
.installing-button { #installing-button {
@include install-status; @include install-status;
background-color: $mycroft-tertiary-green; background-color: $mycroft-tertiary-green;
color: $mycroft-secondary; color: $mycroft-secondary;
@ -49,14 +49,14 @@ fa-icon {
margin-top: 7px; margin-top: 7px;
} }
} }
.installing-spinner { #installing-spinner {
@include spinner-common; @include spinner-common;
border-right-color: $mycroft-secondary; border-right-color: $mycroft-secondary;
border-top-color: $mycroft-secondary; border-top-color: $mycroft-secondary;
} }
.uninstall-button { #uninstall-button {
@include install-status; @include install-status;
background-color: $mycroft-dark-grey; background-color: $mycroft-dark-grey;
color: $mycroft-white; color: $mycroft-white;
@ -68,12 +68,12 @@ fa-icon {
color: $mycroft-white; color: $mycroft-white;
} }
.uninstalling-button { #uninstalling-button {
@include install-status; @include install-status;
background-color: #eb5757; background-color: #eb5757;
color: $mycroft-white; color: $mycroft-white;
} }
.uninstalling-spinner { #uninstalling-spinner {
@include spinner-common; @include spinner-common;
border-right-color: $mycroft-white; border-right-color: $mycroft-white;
border-top-color: $mycroft-white; border-top-color: $mycroft-white;

21
frontend/internet/projects/market/src/app/skills/skill-detail/skill-detail-body/skill-detail-body.component.scss
View File

@ -1,6 +1,7 @@
@import '../../../../stylesheets/global'; @import 'mycroft-colors';
@import "components/text";
.skill-detail-body { #skill-detail-body {
background-color: $mycroft-white; background-color: $mycroft-white;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
@ -9,26 +10,31 @@
padding-left: 4vw; padding-left: 4vw;
padding-right: 4vw; padding-right: 4vw;
padding-top: 3vh; padding-top: 3vh;
.mat-subheading-1 { .mat-subheading-1 {
color: $mycroft-dark-grey; color: $mycroft-dark-grey;
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: $mycroft-secondary;
} }
.kde-icon {
#kde-icon {
height: 40px; height: 40px;
width: 40px; width: 40px;
} }
.skill-detail-section {
#skill-detail-section {
margin-bottom: 30px; margin-bottom: 30px;
} }
.skill-detail-body-left {
#skill-detail-body-left {
min-width: 340px; min-width: 340px;
margin-right: 50px; margin-right: 50px;
.skill-trigger { #skill-trigger {
@include skill-trigger; @include skill-trigger;
@include ellipsis-overflow; @include ellipsis-overflow;
margin-right: 10px; margin-right: 10px;
@ -36,7 +42,8 @@
max-width: 340px; max-width: 340px;
} }
} }
.skill-detail-body-right {
#skill-detail-body-right {
margin-right: 20px; margin-right: 20px;
white-space: nowrap; white-space: nowrap;
img { img {

8
frontend/internet/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.html
View File

@ -1,8 +1,8 @@
<!-- Header block --> <!-- Header block -->
<div class="skill-detail-header" fxLayout="row wrap"> <div id="skill-detail-header" fxLayout="row wrap">
<!-- Left Side --> <!-- Left Side -->
<div class="skill-detail-header-left" fxFlex> <div id="skill-detail-header-left" fxFlex>
<!-- there cannot be an icon and an icon_image. show the <!-- there cannot be an icon and an icon_image. show the
image if it exists otherwise show the icon --> image if it exists otherwise show the icon -->
<img *ngIf="skill.iconImage" src={{skill.iconImage}} height="70" width="70"> <img *ngIf="skill.iconImage" src={{skill.iconImage}} height="70" width="70">
@ -19,13 +19,13 @@
</div> </div>
<!-- Right Side --> <!-- Right Side -->
<div class="skill-detail-header-right" fxFlex="20"> <div id="skill-detail-header-right" fxFlex="20">
<market-skill-install-button [skill]="skill" [component]="'skillDetail'"> <market-skill-install-button [skill]="skill" [component]="'skillDetail'">
</market-skill-install-button> </market-skill-install-button>
<div> <div>
<button <button
mat-icon-button mat-icon-button
class="github-button" id="github-button"
(click)="navigateToGithubRepo(skill.repositoryUrl)" (click)="navigateToGithubRepo(skill.repositoryUrl)"
> >
<fa-icon [icon]="githubIcon"></fa-icon> <fa-icon [icon]="githubIcon"></fa-icon>

23
frontend/internet/projects/market/src/app/skills/skill-detail/skill-detail-header/skill-detail-header.component.scss
View File

@ -1,6 +1,7 @@
@import '../../../../stylesheets/global'; @import 'mycroft-colors';
@import "components/buttons";
.skill-detail-header { #skill-detail-header {
background-color: #f7f9fa; background-color: #f7f9fa;
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
@ -8,7 +9,7 @@
padding-left: 4vw; padding-left: 4vw;
padding-right: 4vw; padding-right: 4vw;
padding-top: 4vh; padding-top: 4vh;
.skill-detail-header-left { #skill-detail-header-left {
color: $mycroft-secondary; color: $mycroft-secondary;
margin-right: 50px; margin-right: 50px;
min-width: 340px; min-width: 340px;
@ -25,18 +26,20 @@
margin-top: 0; margin-top: 0;
} }
} }
.skill-detail-header-right {
#skill-detail-header-right {
margin-right: 20px; margin-right: 20px;
.install-button {
#install-button {
@include action-button; @include action-button;
width: 140px; width: 140px;
} &:hover {
.install-button:hover { background-color: $mycroft-tertiary-green;
background-color: $mycroft-tertiary-green; color: $mycroft-secondary;
color: $mycroft-secondary; }
} }
.github-button { #github-button {
color: $mycroft-dark-grey; color: $mycroft-dark-grey;
font-weight: normal; font-weight: normal;
width: 135px; width: 135px;

4
frontend/internet/projects/market/src/app/skills/skill-detail/skill-detail.component.html
View File

@ -1,10 +1,10 @@
<div class="navigate-back"> <div id="navigate-back">
<button mat-icon-button [routerLink]="['/skills']"> <button mat-icon-button [routerLink]="['/skills']">
<fa-icon [icon]="backArrow"></fa-icon> <fa-icon [icon]="backArrow"></fa-icon>
Back to Skill Listing Back to Skill Listing
</button> </button>
</div> </div>
<div class="skill-detail" *ngIf="skill$ | async as skill"> <div id="skill-detail" *ngIf="skill$ | async as skill">
<market-skill-detail-header [skill]="skill"></market-skill-detail-header> <market-skill-detail-header [skill]="skill"></market-skill-detail-header>
<market-skill-detail-body [skill]="skill"></market-skill-detail-body> <market-skill-detail-body [skill]="skill"></market-skill-detail-body>
</div> </div>

6
frontend/internet/projects/market/src/app/skills/skill-detail/skill-detail.component.scss
View File

@ -1,17 +1,17 @@
@import '../../../stylesheets/global'; @import 'mycroft-colors';
@mixin skill-detail-size { @mixin skill-detail-size {
margin: 0 auto; margin: 0 auto;
max-width: 1000px; max-width: 1000px;
} }
.navigate-back { #navigate-back {
@include skill-detail-size; @include skill-detail-size;
color: $mycroft-dark-grey; color: $mycroft-dark-grey;
padding-bottom: 10px; padding-bottom: 10px;
} }
.skill-detail { #skill-detail {
@include skill-detail-size; @include skill-detail-size;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12);
border-radius: 10px; border-radius: 10px;

8
frontend/internet/projects/market/src/app/skills/skill-summary/skill-card/skill-card-header.component.html
View File

@ -1,9 +1,9 @@
<div fxLayout="row" fxLayoutAlign="space-between start" class="card-header"> <div fxLayout="row" fxLayoutAlign="space-between start" id="card-header">
<!-- Show a Mycroft icon in the upper left corner of the skill card <!-- Show a Mycroft icon in the upper left corner of the skill card
if the skill is written by the Mycroft staff. if the skill is written by the Mycroft staff.
--> -->
<div class="mycroft-icon"> <div id="mycroft-icon">
<img <img
src="../../../../assets/mycroft-logo.svg" src="../../../../assets/mycroft-logo.svg"
*ngIf="skill.isMycroftMade" *ngIf="skill.isMycroftMade"
@ -12,7 +12,7 @@
</div> </div>
<!-- Show the icon corresponding to the skill on the card --> <!-- Show the icon corresponding to the skill on the card -->
<div class="skill-icon"> <div id="skill-icon">
<fa <fa
*ngIf="!skill.iconImage" *ngIf="!skill.iconImage"
[ngStyle]="{'color': skill.icon.color}" [ngStyle]="{'color': skill.icon.color}"
@ -23,7 +23,7 @@
</div> </div>
<!-- Show a check mark icon in the upper right corner when skill is installed --> <!-- Show a check mark icon in the upper right corner when skill is installed -->
<div class="installed-icon"> <div id="installed-icon">
<fa-icon <fa-icon
*ngIf="isInstalled" *ngIf="isInstalled"
[icon]="installedIcon" [icon]="installedIcon"

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

@ -1,17 +1,20 @@
@import '../../../../stylesheets/global.scss'; @import 'mycroft-colors';
.card-header { #card-header {
margin-bottom: 16px; margin-bottom: 16px;
} }
.mycroft-icon {
#mycroft-icon {
width: 20px; width: 20px;
img { img {
height: 20px; height: 20px;
width: 20px; width: 20px;
} }
} }
.installed-icon {
#installed-icon {
width: 20px; width: 20px;
fa-icon { fa-icon {
color: $mycroft-tertiary-green; color: $mycroft-tertiary-green;
font-size: 20px; font-size: 20px;

2
frontend/internet/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.html
View File

@ -7,7 +7,7 @@
{{skill.title ? skill.title : '&nbsp;'}} {{skill.title ? skill.title : '&nbsp;'}}
</mat-card-title> </mat-card-title>
<mat-card-subtitle fxLayoutAlign="center"> <mat-card-subtitle fxLayoutAlign="center">
<div class="skill-trigger"> <div id="skill-trigger">
<fa-icon [icon]="voiceIcon"></fa-icon> <fa-icon [icon]="voiceIcon"></fa-icon>
{{skill.trigger}} {{skill.trigger}}
</div> </div>

18
frontend/internet/projects/market/src/app/skills/skill-summary/skill-card/skill-card.component.scss
View File

@ -1,4 +1,5 @@
@import '../../../../stylesheets/global.scss'; @import 'mycroft-colors';
@import "components/text";
@mixin card-width { @mixin card-width {
width: 320px; width: 320px;
@ -6,10 +7,16 @@
mat-card { mat-card {
@include card-width; @include card-width;
&:hover {
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
}
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
margin: 10px; margin: 10px;
padding: 18px; padding: 18px;
mat-card-title { mat-card-title {
@include ellipsis-overflow; @include ellipsis-overflow;
color: $mycroft-secondary; color: $mycroft-secondary;
@ -18,27 +25,26 @@ mat-card {
margin-bottom: 16px; margin-bottom: 16px;
text-align: center; text-align: center;
} }
mat-card-subtitle { mat-card-subtitle {
.skill-trigger { #skill-trigger {
@include ellipsis-overflow; @include ellipsis-overflow;
@include skill-trigger; @include skill-trigger;
} }
} }
mat-card-content { mat-card-content {
color: $mycroft-secondary; color: $mycroft-secondary;
@include ellipsis-overflow; @include ellipsis-overflow;
text-align: center; text-align: center;
} }
mat-card-actions { mat-card-actions {
margin-left: 0; margin-left: 0;
margin-bottom: 0; margin-bottom: 0;
} }
} }
mat-card:hover{
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
}
.login-snackbar { .login-snackbar {
text-align: center; text-align: center;
} }

6
frontend/internet/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.html
View File

@ -1,6 +1,6 @@
<!-- Search bar at top of skill listing page --> <!-- Search bar at top of skill listing page -->
<div fxLayout="row" fxLayoutAlign="center" class="skill-toolbar"> <div fxLayout="row" fxLayoutAlign="center" id="skill-toolbar">
<div fxFlex="60" (keydown.enter)="searchSkills()" class="search-field"> <div fxFlex="60" (keydown.enter)="searchSkills()" id="search-field">
<mat-form-field> <mat-form-field>
<input matInput placeholder="Search Skills" type="text" [(ngModel)]="searchTerm"> <input matInput placeholder="Search Skills" type="text" [(ngModel)]="searchTerm">
<button mat-icon-button matSuffix=""> <button mat-icon-button matSuffix="">
@ -12,7 +12,7 @@
<!-- Back to all skills button shown when skill listing is filtered --> <!-- Back to all skills button shown when skill listing is filtered -->
<div *ngIf="showBackButton"> <div *ngIf="showBackButton">
<button mat-icon-button class="back-button" (click)="clearSearch()"> <button mat-icon-button id="back-button" (click)="clearSearch()">
<fa-icon [icon]="backArrow"></fa-icon> <fa-icon [icon]="backArrow"></fa-icon>
All Skills All Skills
</button> </button>

14
frontend/internet/projects/market/src/app/skills/skill-summary/skill-search/skill-search.component.scss
View File

@ -1,12 +1,13 @@
@import '../../../../stylesheets/global'; @import 'mycroft-colors';
fa-icon { fa-icon {
color: $mycroft-dark-grey; color: $mycroft-dark-grey;
} }
.skill-toolbar { #skill-toolbar {
margin-left: 15px; margin-left: 15px;
.search-field {
#search-field {
background-color: white; background-color: white;
border-radius: 10px; border-radius: 10px;
color: $mycroft-dark-grey; color: $mycroft-dark-grey;
@ -14,8 +15,15 @@ fa-icon {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
padding-top: 10px; padding-top: 10px;
mat-form-field { mat-form-field {
width: 100%; width: 100%;
} }
} }
} }
#back-button {
color: $mycroft-dark-grey;
margin-left: 20px;
width: 100px;
}

2
frontend/internet/projects/market/src/app/skills/skill-summary/skill-summary.component.html
View File

@ -1,5 +1,5 @@
<market-skill-search (searchResults)="showSearchResults($event)"></market-skill-search> <market-skill-search (searchResults)="showSearchResults($event)"></market-skill-search>
<div class="skill-category" *ngFor="let category of skillCategories"> <div id="skill-category" *ngFor="let category of skillCategories">
<mat-toolbar align="center">{{category}}</mat-toolbar> <mat-toolbar align="center">{{category}}</mat-toolbar>
<div fxLayout="row wrap"> <div fxLayout="row wrap">
<ng-container *ngFor="let skill of filterSkillsByCategory(category)"> <ng-container *ngFor="let skill of filterSkillsByCategory(category)">

13
frontend/internet/projects/market/src/app/skills/skill-summary/skill-summary.component.scss
View File

@ -1,22 +1,17 @@
@import '../../../stylesheets/global'; @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: $mycroft-dark-grey;
font-size: xx-large; font-size: xx-large;
margin-top: 20px; margin-top: 20px;
padding-left: 10px; padding-left: 10px;
fa-icon { fa-icon {
margin-right: 15px; margin-right: 15px;
} }
} }
} }
.back-button {
color: $mycroft-dark-grey;
margin-left: 20px;
width: 100px;
}

3
frontend/internet/projects/market/src/stylesheets/global.scss
View File

@ -1,3 +0,0 @@
@import "base/mycroft-colors";
@import "components/buttons";
@import "components/text";

2
frontend/internet/projects/sso/src/app/app.component.scss
View File

@ -1,4 +1,4 @@
@import "../stylesheets/global"; @import "mycroft-colors";
/* Split the screen in half */ /* Split the screen in half */
.split { .split {

4
frontend/internet/projects/sso/src/app/background/background.component.html
View File

@ -1,5 +1,5 @@
<div class="split top"></div> <div id="top-half"></div>
<div class="split bottom"></div> <div id="bottom-half"></div>
<div fxLayout="column" fxLayoutAlign="center center"> <div fxLayout="column" fxLayoutAlign="center center">
<div align="center"> <div align="center">
<img src="../../assets/mycroft-ai-no-logo.svg"/> <img src="../../assets/mycroft-ai-no-logo.svg"/>

10
frontend/internet/projects/sso/src/app/background/background.component.scss
View File

@ -1,7 +1,7 @@
@import "../../stylesheets/global"; @import "mycroft-colors";
/* Split the screen in half */ /* Split the screen in half */
.split { @mixin half-screen {
height: 50%; height: 50%;
left: 0; left: 0;
overflow-x: hidden; overflow-x: hidden;
@ -12,13 +12,15 @@
} }
/* Top Half */ /* Top Half */
.top { #top-half {
@include half-screen;
top: 0; top: 0;
background-color: $mycroft-primary; background-color: $mycroft-primary;
} }
/* Bottom Half */ /* Bottom Half */
.bottom { #bottom-half {
@include half-screen;
bottom: 0; bottom: 0;
background-color: #e5e5e5; background-color: #e5e5e5;
} }

2
frontend/internet/projects/sso/src/app/login/antisocial/antisocial.component.html
View File

@ -28,6 +28,6 @@
> >
<mat-hint>Forgot password?</mat-hint> <mat-hint>Forgot password?</mat-hint>
</mat-form-field> </mat-form-field>
<button mat-button type="submit" class="login-button">LOG IN</button> <button mat-button type="submit">LOG IN</button>
</form> </form>
<div class="mat-body-2" *ngIf="authFailed">Invalid username/password combination; try again</div> <div class="mat-body-2" *ngIf="authFailed">Invalid username/password combination; try again</div>

25
frontend/internet/projects/sso/src/app/login/antisocial/antisocial.component.scss
View File

@ -1,36 +1,37 @@
@import '../../../stylesheets/global'; @import 'mycroft-colors';
@import "components/buttons";
button {
@include login-button;
}
form { form {
background-color: $mycroft-white; background-color: $mycroft-white;
border-radius: 10px; border-radius: 10px;
padding: 20px; padding: 20px;
fa-icon { fa-icon {
color: $mycroft-dark-grey; color: $mycroft-dark-grey;
margin-right: 15px; margin-right: 15px;
} }
mat-checkbox { mat-checkbox {
color: $mycroft-dark-grey; color: $mycroft-dark-grey;
} }
.forgot-password { #forgot-password {
margin-left: 30px; margin-left: 30px;
} }
button { button {
background-color: $mycroft-primary; @include action-button;
margin-top: 30px; margin-top: 30px;
text-align: center; text-align: center;
}
button:hover { &:hover {
background-color: $mycroft-tertiary-green; background-color: $mycroft-tertiary-green;
color: $mycroft-secondary; color: $mycroft-secondary;
}
} }
} }
.mat-body-2 { .mat-body-2 {
color: $mycroft-tertiary-red; color: red;
padding: 15px; padding: 15px;
} }

2
frontend/internet/projects/sso/src/app/login/login.component.html
View File

@ -1,5 +1,5 @@
<div fxLayout="column" fxLayoutAlign="center center"> <div fxLayout="column" fxLayoutAlign="center center">
<div class="login-options"> <div id="login-options">
<sso-social-login></sso-social-login> <sso-social-login></sso-social-login>
<div class="mat-subheading-2">OR</div> <div class="mat-subheading-2">OR</div>
<sso-antisocial-login></sso-antisocial-login> <sso-antisocial-login></sso-antisocial-login>

4
frontend/internet/projects/sso/src/app/login/login.component.scss
View File

@ -1,6 +1,6 @@
@import '../../stylesheets/global'; @import 'mycroft-colors';
.login-options { #login-options {
background-color: $mycroft-white; background-color: $mycroft-white;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12);

8
frontend/internet/projects/sso/src/app/login/social/social.component.html
View File

@ -1,13 +1,13 @@
<div class="social" fxLayout="column" fxLayoutAlign="center center"> <div id="social" fxLayout="column" fxLayoutAlign="center center">
<button mat-button class="google-button" (click)="authenticateGoogle()"> <button mat-button id="google-button" (click)="authenticateGoogle()">
<img src="../../../assets/google-logo.svg"> <img src="../../../assets/google-logo.svg">
Log in with Google Log in with Google
</button> </button>
<button mat-button class="facebook-button" (click)="authenticateFacebook()"> <button mat-button id="facebook-button" (click)="authenticateFacebook()">
<fa-icon [icon]="facebookIcon"></fa-icon> <fa-icon [icon]="facebookIcon"></fa-icon>
Continue with Facebook Continue with Facebook
</button> </button>
<button mat-button class="github-button" (click)="authenticateGithub()"> <button mat-button id="github-button" (click)="authenticateGithub()">
<fa-icon [icon]="githubIcon"></fa-icon> <fa-icon [icon]="githubIcon"></fa-icon>
Log in with GitHub Log in with GitHub
</button> </button>

21
frontend/internet/projects/sso/src/app/login/social/social.component.scss
View File

@ -1,10 +1,14 @@
@import '../../../stylesheets/global'; @import 'mycroft-colors';
button { @mixin login-button {
@include login-button; border-radius: 4px;
color: $mycroft-white;
font-weight: normal;
text-align: left;
width: 280px;
} }
.social { #social {
padding: 20px; padding: 20px;
button { button {
margin-bottom: 15px; margin-bottom: 15px;
@ -13,15 +17,18 @@ button {
margin-right: 15px; margin-right: 15px;
font-size: 28px; font-size: 28px;
} }
.facebook-button { #facebook-button {
@include login-button;
background-color: #3b5998; background-color: #3b5998;
padding-left: 5px; padding-left: 5px;
} }
.github-button { #github-button {
@include login-button;
background-color: #333333; background-color: #333333;
padding-left: 5px; padding-left: 5px;
} }
.google-button { #google-button {
@include login-button;
background-color: #4285F4; background-color: #4285F4;
padding-left: 1px; padding-left: 1px;
img { img {

2
frontend/internet/projects/sso/src/app/logout/logout.component.html
View File

@ -1,4 +1,4 @@
<div class="mat-h3"> <div class="mat-h3">
<div class="logout-spinner"></div> <div id="logout-spinner"></div>
LOGGING OUT LOGGING OUT
</div> </div>

4
frontend/internet/projects/sso/src/app/logout/logout.component.scss
View File

@ -1,4 +1,4 @@
@import "../../stylesheets/global"; @import "mycroft-colors";
// The angular material spinner was limiting in color choices we built our own // The angular material spinner was limiting in color choices we built our own
@mixin spinner-common { @mixin spinner-common {
@ -21,7 +21,7 @@
text-align: center; text-align: center;
} }
.logout-spinner { #logout-spinner {
@include spinner-common; @include spinner-common;
border-right-color: $mycroft-secondary; border-right-color: $mycroft-secondary;
border-top-color: $mycroft-secondary; border-top-color: $mycroft-secondary;

14
frontend/internet/projects/sso/src/stylesheets/base/_mycroft-colors.scss
View File

@ -1,14 +0,0 @@
// These are the official Mycroft colors as defined by the design team.
$mycroft-primary: #22a7f0;
$mycroft-secondary: #2c3e50;
$mycroft-tertiary-blue: #81cfe0;
$mycroft-tertiary-green: #36d7b7;
$mycroft-tertiary-yellow: #c8f7c5;
$mycroft-tertiary-red: #ec644b;
$mycroft-tertiary-orange: #e9d460;
$mycroft-white: #ffffff;
$mycroft-black: #000000;
$mycroft-dark-grey: #6c7a89;
$mycroft-light-grey: #bdc3c7;
$mycroft-blue-grey: #e4f1fe;
$market-background: #e5e5e5;

9
frontend/internet/projects/sso/src/stylesheets/components/_buttons.scss
View File

@ -1,9 +0,0 @@
@import "../base/mycroft-colors";
@mixin login-button {
border-radius: 4px;
color: $mycroft-white;
font-weight: normal;
text-align: left;
width: 280px;
}

2
frontend/internet/projects/sso/src/stylesheets/global.scss
View File

@ -1,2 +0,0 @@
@import 'base/mycroft-colors';
@import "components/buttons";

91
frontend/internet/src/styles.scss
View File

@ -1 +1,92 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@import '~@angular/material/theming';
// Be sure that you only ever include 'mat-core' mixin once!
// it should not be included for each theme.
@include mat-core();
// Mycroft palette defined using http://mcg.mbitson.com
$mycroft-color-primary: (
50 : #e4f4fd,
100 : #bde5fb,
200 : #91d3f8,
300 : #64c1f5,
400 : #43b4f2,
500 : #22a7f0,
600 : #1e9fee,
700 : #1996ec,
800 : #148ce9,
900 : #0c7ce5,
A100 : #ffffff,
A200 : #dcedff,
A400 : #a9d2ff,
A700 : #90c5ff,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$mycroft-color-secondary: (
50 : #e6e8ea,
100 : #c0c5cb,
200 : #969fa8,
300 : #6b7885,
400 : #4c5b6a,
500 : #2c3e50,
600 : #273849,
700 : #213040,
800 : #1b2837,
900 : #101b27,
A100 : #68abff,
A200 : #358fff,
A400 : #0272ff,
A700 : #0067e7,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #ffffff,
A700 : #ffffff,
)
);
// mandatory stuff for theming
$mycroft-palette-primary: mat-palette($mycroft-color-primary);
$mycroft-palette-accent: mat-palette($mycroft-color-secondary);
// include the custom theme components into a theme object
$mycroft-theme: mat-light-theme($mycroft-palette-primary, $mycroft-palette-accent);
// include the custom theme object into the angular material theme
@include angular-material-theme($mycroft-theme);
.mycroft-snackbar {
width: 500px;
}
.mycroft-snackbar .mat-simple-snackbar-action {
color: #22a7f0
}

0
frontend/internet/projects/market/src/stylesheets/base/_mycroft-colors.scss → frontend/internet/src/stylesheets/_mycroft-colors.scss
View File

3
frontend/internet/projects/market/src/stylesheets/components/_buttons.scss → frontend/internet/src/stylesheets/components/_buttons.scss
View File

@ -1,9 +1,10 @@
@import "../base/mycroft-colors"; @import "mycroft-colors";
$button-border-radius: 4px; $button-border-radius: 4px;
@mixin action-button { @mixin action-button {
border-radius: $button-border-radius; border-radius: $button-border-radius;
background-color: $mycroft-primary; background-color: $mycroft-primary;
color: $mycroft-white; color: $mycroft-white;
font-weight: normal;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }

2
frontend/internet/projects/market/src/stylesheets/components/_text.scss → frontend/internet/src/stylesheets/components/_text.scss
View File

@ -1,4 +1,4 @@
@import "../base/mycroft-colors"; @import "../mycroft-colors";
@mixin ellipsis-overflow { @mixin ellipsis-overflow {
overflow: hidden; overflow: hidden;