learned some things about scss so made scss files more "sassy"
Chris Veilleux
parent
0b853f6939
commit
edc956e4b8
54
angular.json
54
angular.json
|
|
@ -29,6 +29,11 @@
|
|||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"./src/stylesheets"
|
||||
]
|
||||
},
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
|
|
@ -85,6 +90,11 @@
|
|||
"styles": [
|
||||
"src/styles.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"./src/stylesheets"
|
||||
]
|
||||
},
|
||||
"scripts": [],
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
|
|
@ -177,8 +187,13 @@
|
|||
"projects/market/src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"projects/market/src/styles.scss"
|
||||
"src/styles.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"./src/stylesheets"
|
||||
]
|
||||
},
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
|
|
@ -249,8 +264,13 @@
|
|||
"tsConfig": "projects/market/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/market/karma.conf.js",
|
||||
"styles": [
|
||||
"projects/market/src/styles.scss"
|
||||
"src/styles.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"./src/stylesheets"
|
||||
]
|
||||
},
|
||||
"scripts": [],
|
||||
"assets": [
|
||||
"projects/market/src/favicon.ico",
|
||||
|
|
@ -343,8 +363,13 @@
|
|||
"projects/sso/src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"projects/sso/src/styles.scss"
|
||||
"src/styles.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"./src/stylesheets"
|
||||
]
|
||||
},
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
|
|
@ -415,8 +440,13 @@
|
|||
"tsConfig": "projects/sso/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/sso/karma.conf.js",
|
||||
"styles": [
|
||||
"projects/sso/src/styles.scss"
|
||||
"src/styles.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"./src/stylesheets"
|
||||
]
|
||||
},
|
||||
"scripts": [],
|
||||
"assets": [
|
||||
"projects/sso/src/favicon.ico",
|
||||
|
|
@ -544,8 +574,13 @@
|
|||
"projects/account/src/assets"
|
||||
],
|
||||
"styles": [
|
||||
"projects/account/src/styles.scss"
|
||||
"src/styles.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"./src/stylesheets"
|
||||
]
|
||||
},
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
|
|
@ -600,8 +635,13 @@
|
|||
"tsConfig": "projects/account/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/account/karma.conf.js",
|
||||
"styles": [
|
||||
"projects/account/src/styles.scss"
|
||||
"src/styles.scss"
|
||||
],
|
||||
"stylePreprocessorOptions": {
|
||||
"includePaths": [
|
||||
"./src/stylesheets"
|
||||
]
|
||||
},
|
||||
"scripts": [],
|
||||
"assets": [
|
||||
"projects/account/src/favicon.ico",
|
||||
|
|
@ -653,4 +693,4 @@
|
|||
}
|
||||
},
|
||||
"defaultProject": "internet"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
Inject the marketplace app into the <mat-sidenav-content> component
|
||||
of the global navigation menu library.
|
||||
-->
|
||||
<div appBody class="app-body">
|
||||
<div appBody id="app-body">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</globalnav-sidenav>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
@import '../stylesheets/global';
|
||||
|
||||
.app-body {
|
||||
#app-body {
|
||||
margin-left: 3vw;
|
||||
margin-right: 3vw;
|
||||
margin-top: 30px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
fxLayout="row"
|
||||
fxLayoutAlign="center center"
|
||||
mat-flat-button
|
||||
class="uninstall-button"
|
||||
id="uninstall-button"
|
||||
(click)="uninstallSkill()"
|
||||
[ngStyle]="installButtonStyle"
|
||||
>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
fxLayout="row"
|
||||
fxLayoutAlign="center center"
|
||||
mat-flat-button
|
||||
class="installed-button"
|
||||
id="installed-button"
|
||||
[disabled]="true"
|
||||
[ngStyle]="installButtonStyle"
|
||||
>
|
||||
|
|
@ -34,10 +34,10 @@
|
|||
fxLayout="row"
|
||||
fxLayoutAlign="center center"
|
||||
mat-flat-button
|
||||
class="installing-button"
|
||||
id="installing-button"
|
||||
[ngStyle]="installButtonStyle"
|
||||
>
|
||||
<div class="installing-spinner"></div>
|
||||
<div id="installing-spinner"></div>
|
||||
ADDING...
|
||||
</button>
|
||||
|
||||
|
|
@ -47,10 +47,10 @@
|
|||
fxLayout="row"
|
||||
fxLayoutAlign="center center"
|
||||
mat-flat-button
|
||||
class="uninstalling-button"
|
||||
id="uninstalling-button"
|
||||
[ngStyle]="installButtonStyle"
|
||||
>
|
||||
<div class="uninstalling-spinner"></div>
|
||||
<div id="uninstalling-spinner"></div>
|
||||
REMOVING...
|
||||
</button>
|
||||
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
*ngSwitchDefault
|
||||
fxLayout="row"
|
||||
fxLayoutAlign="center center"
|
||||
class="install-button"
|
||||
id="install-button"
|
||||
mat-flat-button
|
||||
(click)="install_skill()"
|
||||
[ngStyle]="installButtonStyle"
|
||||
|
|
@ -68,4 +68,4 @@
|
|||
<span>ADD</span>
|
||||
</button>
|
||||
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import '../../../stylesheets/global.scss';
|
||||
@import 'mycroft-colors';
|
||||
|
||||
@mixin install-status {
|
||||
border-radius: 4px;
|
||||
|
|
@ -24,22 +24,22 @@ fa-icon {
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.install-button {
|
||||
#install-button {
|
||||
@include install-status;
|
||||
background-color: $mycroft-primary ;
|
||||
color: $mycroft-white;
|
||||
}
|
||||
.install-button:hover {
|
||||
#install-button:hover {
|
||||
@include install-status;
|
||||
background-color: $mycroft-tertiary-green;
|
||||
color: $mycroft-secondary;
|
||||
}
|
||||
|
||||
.installed-button {
|
||||
#installed-button {
|
||||
@include install-status;
|
||||
}
|
||||
|
||||
.installing-button {
|
||||
#installing-button {
|
||||
@include install-status;
|
||||
background-color: $mycroft-tertiary-green;
|
||||
color: $mycroft-secondary;
|
||||
|
|
@ -49,14 +49,14 @@ fa-icon {
|
|||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
.installing-spinner {
|
||||
#installing-spinner {
|
||||
@include spinner-common;
|
||||
border-right-color: $mycroft-secondary;
|
||||
border-top-color: $mycroft-secondary;
|
||||
}
|
||||
|
||||
|
||||
.uninstall-button {
|
||||
#uninstall-button {
|
||||
@include install-status;
|
||||
background-color: $mycroft-dark-grey;
|
||||
color: $mycroft-white;
|
||||
|
|
@ -68,12 +68,12 @@ fa-icon {
|
|||
color: $mycroft-white;
|
||||
}
|
||||
|
||||
.uninstalling-button {
|
||||
#uninstalling-button {
|
||||
@include install-status;
|
||||
background-color: #eb5757;
|
||||
color: $mycroft-white;
|
||||
}
|
||||
.uninstalling-spinner {
|
||||
#uninstalling-spinner {
|
||||
@include spinner-common;
|
||||
border-right-color: $mycroft-white;
|
||||
border-top-color: $mycroft-white;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import '../../../../stylesheets/global';
|
||||
@import 'mycroft-colors';
|
||||
@import "components/text";
|
||||
|
||||
.skill-detail-body {
|
||||
#skill-detail-body {
|
||||
background-color: $mycroft-white;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
|
|
@ -9,26 +10,31 @@
|
|||
padding-left: 4vw;
|
||||
padding-right: 4vw;
|
||||
padding-top: 3vh;
|
||||
|
||||
.mat-subheading-1 {
|
||||
color: $mycroft-dark-grey;
|
||||
font-variant: small-caps;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.mat-body-1 {
|
||||
color: $mycroft-secondary;
|
||||
}
|
||||
.kde-icon {
|
||||
|
||||
#kde-icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
.skill-detail-section {
|
||||
|
||||
#skill-detail-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.skill-detail-body-left {
|
||||
|
||||
#skill-detail-body-left {
|
||||
min-width: 340px;
|
||||
margin-right: 50px;
|
||||
.skill-trigger {
|
||||
#skill-trigger {
|
||||
@include skill-trigger;
|
||||
@include ellipsis-overflow;
|
||||
margin-right: 10px;
|
||||
|
|
@ -36,7 +42,8 @@
|
|||
max-width: 340px;
|
||||
}
|
||||
}
|
||||
.skill-detail-body-right {
|
||||
|
||||
#skill-detail-body-right {
|
||||
margin-right: 20px;
|
||||
white-space: nowrap;
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<!-- Header block -->
|
||||
<div class="skill-detail-header" fxLayout="row wrap">
|
||||
<div id="skill-detail-header" fxLayout="row wrap">
|
||||
|
||||
<!-- 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
|
||||
image if it exists otherwise show the icon -->
|
||||
<img *ngIf="skill.iconImage" src={{skill.iconImage}} height="70" width="70">
|
||||
|
|
@ -19,13 +19,13 @@
|
|||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<div>
|
||||
<button
|
||||
mat-icon-button
|
||||
class="github-button"
|
||||
id="github-button"
|
||||
(click)="navigateToGithubRepo(skill.repositoryUrl)"
|
||||
>
|
||||
<fa-icon [icon]="githubIcon"></fa-icon>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import '../../../../stylesheets/global';
|
||||
@import 'mycroft-colors';
|
||||
@import "components/buttons";
|
||||
|
||||
.skill-detail-header {
|
||||
#skill-detail-header {
|
||||
background-color: #f7f9fa;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
|
|
@ -8,7 +9,7 @@
|
|||
padding-left: 4vw;
|
||||
padding-right: 4vw;
|
||||
padding-top: 4vh;
|
||||
.skill-detail-header-left {
|
||||
#skill-detail-header-left {
|
||||
color: $mycroft-secondary;
|
||||
margin-right: 50px;
|
||||
min-width: 340px;
|
||||
|
|
@ -25,18 +26,20 @@
|
|||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.skill-detail-header-right {
|
||||
|
||||
#skill-detail-header-right {
|
||||
margin-right: 20px;
|
||||
.install-button {
|
||||
|
||||
#install-button {
|
||||
@include action-button;
|
||||
width: 140px;
|
||||
}
|
||||
.install-button:hover {
|
||||
background-color: $mycroft-tertiary-green;
|
||||
color: $mycroft-secondary;
|
||||
&:hover {
|
||||
background-color: $mycroft-tertiary-green;
|
||||
color: $mycroft-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.github-button {
|
||||
#github-button {
|
||||
color: $mycroft-dark-grey;
|
||||
font-weight: normal;
|
||||
width: 135px;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<div class="navigate-back">
|
||||
<div id="navigate-back">
|
||||
<button mat-icon-button [routerLink]="['/skills']">
|
||||
<fa-icon [icon]="backArrow"></fa-icon>
|
||||
Back to Skill Listing
|
||||
</button>
|
||||
</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-body [skill]="skill"></market-skill-detail-body>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
@import '../../../stylesheets/global';
|
||||
@import 'mycroft-colors';
|
||||
|
||||
@mixin skill-detail-size {
|
||||
margin: 0 auto;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.navigate-back {
|
||||
#navigate-back {
|
||||
@include skill-detail-size;
|
||||
color: $mycroft-dark-grey;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.skill-detail {
|
||||
#skill-detail {
|
||||
@include skill-detail-size;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
if the skill is written by the Mycroft staff.
|
||||
-->
|
||||
<div class="mycroft-icon">
|
||||
<div id="mycroft-icon">
|
||||
<img
|
||||
src="../../../../assets/mycroft-logo.svg"
|
||||
*ngIf="skill.isMycroftMade"
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Show the icon corresponding to the skill on the card -->
|
||||
<div class="skill-icon">
|
||||
<div id="skill-icon">
|
||||
<fa
|
||||
*ngIf="!skill.iconImage"
|
||||
[ngStyle]="{'color': skill.icon.color}"
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Show a check mark icon in the upper right corner when skill is installed -->
|
||||
<div class="installed-icon">
|
||||
<div id="installed-icon">
|
||||
<fa-icon
|
||||
*ngIf="isInstalled"
|
||||
[icon]="installedIcon"
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
@import '../../../../stylesheets/global.scss';
|
||||
@import 'mycroft-colors';
|
||||
|
||||
.card-header {
|
||||
#card-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.mycroft-icon {
|
||||
|
||||
#mycroft-icon {
|
||||
width: 20px;
|
||||
img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
.installed-icon {
|
||||
|
||||
#installed-icon {
|
||||
width: 20px;
|
||||
|
||||
fa-icon {
|
||||
color: $mycroft-tertiary-green;
|
||||
font-size: 20px;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
{{skill.title ? skill.title : ' '}}
|
||||
</mat-card-title>
|
||||
<mat-card-subtitle fxLayoutAlign="center">
|
||||
<div class="skill-trigger">
|
||||
<div id="skill-trigger">
|
||||
<fa-icon [icon]="voiceIcon"></fa-icon>
|
||||
{{skill.trigger}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import '../../../../stylesheets/global.scss';
|
||||
@import 'mycroft-colors';
|
||||
@import "components/text";
|
||||
|
||||
@mixin card-width {
|
||||
width: 320px;
|
||||
|
|
@ -6,10 +7,16 @@
|
|||
|
||||
mat-card {
|
||||
@include card-width;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
margin: 10px;
|
||||
padding: 18px;
|
||||
|
||||
mat-card-title {
|
||||
@include ellipsis-overflow;
|
||||
color: $mycroft-secondary;
|
||||
|
|
@ -18,27 +25,26 @@ mat-card {
|
|||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
mat-card-subtitle {
|
||||
.skill-trigger {
|
||||
#skill-trigger {
|
||||
@include ellipsis-overflow;
|
||||
@include skill-trigger;
|
||||
}
|
||||
}
|
||||
|
||||
mat-card-content {
|
||||
color: $mycroft-secondary;
|
||||
@include ellipsis-overflow;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
mat-card-actions {
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
mat-card:hover{
|
||||
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.login-snackbar {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!-- Search bar at top of skill listing page -->
|
||||
<div fxLayout="row" fxLayoutAlign="center" class="skill-toolbar">
|
||||
<div fxFlex="60" (keydown.enter)="searchSkills()" class="search-field">
|
||||
<div fxLayout="row" fxLayoutAlign="center" id="skill-toolbar">
|
||||
<div fxFlex="60" (keydown.enter)="searchSkills()" id="search-field">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Search Skills" type="text" [(ngModel)]="searchTerm">
|
||||
<button mat-icon-button matSuffix="">
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
<!-- Back to all skills button shown when skill listing is filtered -->
|
||||
<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>
|
||||
All Skills
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
@import '../../../../stylesheets/global';
|
||||
@import 'mycroft-colors';
|
||||
|
||||
fa-icon {
|
||||
color: $mycroft-dark-grey;
|
||||
}
|
||||
|
||||
.skill-toolbar {
|
||||
#skill-toolbar {
|
||||
margin-left: 15px;
|
||||
.search-field {
|
||||
|
||||
#search-field {
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
color: $mycroft-dark-grey;
|
||||
|
|
@ -14,8 +15,15 @@ fa-icon {
|
|||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-top: 10px;
|
||||
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#back-button {
|
||||
color: $mycroft-dark-grey;
|
||||
margin-left: 20px;
|
||||
width: 100px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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>
|
||||
<div fxLayout="row wrap">
|
||||
<ng-container *ngFor="let skill of filterSkillsByCategory(category)">
|
||||
|
|
|
|||
|
|
@ -1,22 +1,17 @@
|
|||
@import '../../../stylesheets/global';
|
||||
@import 'mycroft-colors';
|
||||
|
||||
.skill-category {
|
||||
#skill-category {
|
||||
background-color: $market-background;
|
||||
|
||||
mat-toolbar {
|
||||
background-color: $market-background;
|
||||
color: $mycroft-dark-grey;
|
||||
font-size: xx-large;
|
||||
margin-top: 20px;
|
||||
padding-left: 10px;
|
||||
|
||||
fa-icon {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back-button {
|
||||
color: $mycroft-dark-grey;
|
||||
margin-left: 20px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
@import "base/mycroft-colors";
|
||||
@import "components/buttons";
|
||||
@import "components/text";
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../stylesheets/global";
|
||||
@import "mycroft-colors";
|
||||
|
||||
/* Split the screen in half */
|
||||
.split {
|
||||
|
|
@ -40,4 +40,4 @@ img {
|
|||
margin-bottom: 50px;
|
||||
margin-top: 50px;
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="split top"></div>
|
||||
<div class="split bottom"></div>
|
||||
<div id="top-half"></div>
|
||||
<div id="bottom-half"></div>
|
||||
<div fxLayout="column" fxLayoutAlign="center center">
|
||||
<div align="center">
|
||||
<img src="../../assets/mycroft-ai-no-logo.svg"/>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../../stylesheets/global";
|
||||
@import "mycroft-colors";
|
||||
|
||||
/* Split the screen in half */
|
||||
.split {
|
||||
@mixin half-screen {
|
||||
height: 50%;
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -12,13 +12,15 @@
|
|||
}
|
||||
|
||||
/* Top Half */
|
||||
.top {
|
||||
#top-half {
|
||||
@include half-screen;
|
||||
top: 0;
|
||||
background-color: $mycroft-primary;
|
||||
}
|
||||
|
||||
/* Bottom Half */
|
||||
.bottom {
|
||||
#bottom-half {
|
||||
@include half-screen;
|
||||
bottom: 0;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,6 @@
|
|||
>
|
||||
<mat-hint>Forgot password?</mat-hint>
|
||||
</mat-form-field>
|
||||
<button mat-button type="submit" class="login-button">LOG IN</button>
|
||||
<button mat-button type="submit">LOG IN</button>
|
||||
</form>
|
||||
<div class="mat-body-2" *ngIf="authFailed">Invalid username/password combination; try again</div>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,37 @@
|
|||
@import '../../../stylesheets/global';
|
||||
|
||||
button {
|
||||
@include login-button;
|
||||
}
|
||||
@import 'mycroft-colors';
|
||||
@import "components/buttons";
|
||||
|
||||
form {
|
||||
background-color: $mycroft-white;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
|
||||
fa-icon {
|
||||
color: $mycroft-dark-grey;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
mat-checkbox {
|
||||
color: $mycroft-dark-grey;
|
||||
}
|
||||
.forgot-password {
|
||||
#forgot-password {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: $mycroft-primary;
|
||||
@include action-button;
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
button:hover {
|
||||
background-color: $mycroft-tertiary-green;
|
||||
color: $mycroft-secondary;
|
||||
|
||||
&:hover {
|
||||
background-color: $mycroft-tertiary-green;
|
||||
color: $mycroft-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.mat-body-2 {
|
||||
color: $mycroft-tertiary-red;
|
||||
color: red;
|
||||
padding: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div fxLayout="column" fxLayoutAlign="center center">
|
||||
<div class="login-options">
|
||||
<div id="login-options">
|
||||
<sso-social-login></sso-social-login>
|
||||
<div class="mat-subheading-2">OR</div>
|
||||
<sso-antisocial-login></sso-antisocial-login>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import '../../stylesheets/global';
|
||||
@import 'mycroft-colors';
|
||||
|
||||
.login-options {
|
||||
#login-options {
|
||||
background-color: $mycroft-white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
<div class="social" fxLayout="column" fxLayoutAlign="center center">
|
||||
<button mat-button class="google-button" (click)="authenticateGoogle()">
|
||||
<div id="social" fxLayout="column" fxLayoutAlign="center center">
|
||||
<button mat-button id="google-button" (click)="authenticateGoogle()">
|
||||
<img src="../../../assets/google-logo.svg">
|
||||
Log in with Google
|
||||
</button>
|
||||
<button mat-button class="facebook-button" (click)="authenticateFacebook()">
|
||||
<button mat-button id="facebook-button" (click)="authenticateFacebook()">
|
||||
<fa-icon [icon]="facebookIcon"></fa-icon>
|
||||
Continue with Facebook
|
||||
</button>
|
||||
<button mat-button class="github-button" (click)="authenticateGithub()">
|
||||
<button mat-button id="github-button" (click)="authenticateGithub()">
|
||||
<fa-icon [icon]="githubIcon"></fa-icon>
|
||||
Log in with GitHub
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
@import '../../../stylesheets/global';
|
||||
@import 'mycroft-colors';
|
||||
|
||||
button {
|
||||
@include login-button;
|
||||
@mixin login-button {
|
||||
border-radius: 4px;
|
||||
color: $mycroft-white;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.social {
|
||||
#social {
|
||||
padding: 20px;
|
||||
button {
|
||||
margin-bottom: 15px;
|
||||
|
|
@ -13,15 +17,18 @@ button {
|
|||
margin-right: 15px;
|
||||
font-size: 28px;
|
||||
}
|
||||
.facebook-button {
|
||||
#facebook-button {
|
||||
@include login-button;
|
||||
background-color: #3b5998;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.github-button {
|
||||
#github-button {
|
||||
@include login-button;
|
||||
background-color: #333333;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.google-button {
|
||||
#google-button {
|
||||
@include login-button;
|
||||
background-color: #4285F4;
|
||||
padding-left: 1px;
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="mat-h3">
|
||||
<div class="logout-spinner"></div>
|
||||
<div id="logout-spinner"></div>
|
||||
LOGGING OUT
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../../stylesheets/global";
|
||||
@import "mycroft-colors";
|
||||
|
||||
// The angular material spinner was limiting in color choices we built our own
|
||||
@mixin spinner-common {
|
||||
|
|
@ -21,8 +21,8 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.logout-spinner {
|
||||
#logout-spinner {
|
||||
@include spinner-common;
|
||||
border-right-color: $mycroft-secondary;
|
||||
border-top-color: $mycroft-secondary;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
@import 'base/mycroft-colors';
|
||||
@import "components/buttons";
|
||||
|
|
@ -1 +1,92 @@
|
|||
|
||||
/* 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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
@import "../base/mycroft-colors";
|
||||
@import "mycroft-colors";
|
||||
$button-border-radius: 4px;
|
||||
|
||||
@mixin action-button {
|
||||
border-radius: $button-border-radius;
|
||||
background-color: $mycroft-primary;
|
||||
color: $mycroft-white;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../base/mycroft-colors";
|
||||
@import "../mycroft-colors";
|
||||
|
||||
@mixin ellipsis-overflow {
|
||||
overflow: hidden;
|
||||
Loading…
Reference in New Issue