Skip to content

Commit

Permalink
feat: input & icon added dark-theme (#62)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lskramarov @pimenovoleg
lskramarov authored and pimenovoleg committed Nov 2, 2018
1 parent 088aa4d commit 2a8cbf4
Show file tree
Hide file tree
Showing 28 changed files with 380 additions and 265 deletions.
1 change: 0 additions & 1 deletion src/lib-dev/button/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';

//@import '../../lib/core/theming/prebuilt/default-theme';

@import '../../lib/core/theming/prebuilt/dark-theme';


Expand Down
61 changes: 30 additions & 31 deletions src/lib-dev/button/template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,57 +60,56 @@
<br>
<br>

<button mc-button color="primary" disabled>disabled</button>&nbsp;
<button mc-button color="primary">normal</button>&nbsp;
<button class="mc-hover" mc-button color="primary">hover</button>&nbsp;
<button class="mc-active" mc-button color="primary">pressed</button>&nbsp;
<button class="cdk-keyboard-focused" mc-button color="primary">focus</button>&nbsp;
<button mc-icon-button color="primary" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-hover" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
<button class="mc-active" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
<button class="cdk-keyboard-focused" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;

<br>
<br>
<br>

<button class="mc-progress" mc-button color="primary" disabled>disabled</button>&nbsp;
<button class="mc-progress" mc-button color="primary">normal</button>&nbsp;
<button class="mc-hover mc-progress" mc-button color="primary">hover</button>&nbsp;
<button class="mc-active mc-progress" mc-button color="primary">pressed</button>&nbsp;
<button class="cdk-keyboard-focused mc-progress" mc-button color="primary">focus</button>&nbsp;
<button class="mc-progress" mc-icon-button color="primary" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button class="mc-progress" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-hover mc-progress" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
<button class="mc-active mc-progress" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
<button class="cdk-keyboard-focused mc-progress" mc-icon-button color="primary"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;

<br>
<br>
<br>

<button mc-button color="second" disabled>disabled</button>&nbsp;
<button mc-button color="second">normal</button>&nbsp;
<button class="mc-hover" mc-button color="second">hover</button>&nbsp;
<button class="mc-active" mc-button color="second">pressed</button>&nbsp;
<button class="cdk-keyboard-focused" mc-button color="second">focus</button>&nbsp;
<button mc-icon-button color="second" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button mc-icon-button color="second"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-hover" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
<button class="mc-active" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
<button class="cdk-keyboard-focused" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;

<br>
<br>

<button class="mc-progress" mc-button color="second" disabled>disabled</button>&nbsp;
<button class="mc-progress" mc-button color="second">normal</button>&nbsp;
<button class="mc-hover mc-progress" mc-button color="second">hover</button>&nbsp;
<button class="mc-active mc-progress" mc-button color="second">pressed</button>&nbsp;
<button class="cdk-keyboard-focused mc-progress" mc-button color="second">focus</button>&nbsp;
<button class="mc-progress" mc-icon-button color="second" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button class="mc-progress" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-hover mc-progress" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
<button class="mc-active mc-progress" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
<button class="cdk-keyboard-focused mc-progress" mc-icon-button color="second"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;

<br>
<br>
<br>

<button mc-button color="error" disabled>disabled</button>&nbsp;
<button mc-button color="error">normal</button>&nbsp;
<button class="mc-hover" mc-button color="error">hover</button>&nbsp;
<button class="mc-active" mc-button color="error">pressed</button>&nbsp;
<button class="cdk-keyboard-focused" mc-button color="error">focus</button>&nbsp;
<button mc-icon-button color="error" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button mc-icon-button color="error"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-hover" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
<button class="mc-active" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
<button class="cdk-keyboard-focused" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;

<br>
<br>

<button class="mc-progress" mc-button color="error" disabled>disabled</button>&nbsp;
<button class="mc-progress" mc-button color="error">normal</button>&nbsp;
<button class="mc-hover mc-progress" mc-button color="error">hover</button>&nbsp;
<button class="mc-active mc-progress" mc-button color="error">pressed</button>&nbsp;
<button class="cdk-keyboard-focused mc-progress" mc-button color="error">focus</button>&nbsp;
<button class="mc-progress" mc-icon-button color="error" disabled><i mc-icon="mc-play_16"></i>disabled</button>&nbsp;
<button class="mc-progress" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>normal</button>&nbsp;
<button class="mc-hover mc-progress" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>hover</button>&nbsp;
<button class="mc-active mc-progress" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>pressed</button>&nbsp;
<button class="cdk-keyboard-focused mc-progress" mc-icon-button color="error"><i mc-icon="mc-play_16"></i>focus</button>&nbsp;
</div>
5 changes: 3 additions & 2 deletions src/lib-dev/icon/module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, NgModule } from '@angular/core';
import { Component, NgModule, ViewEncapsulation } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

Expand All @@ -8,7 +8,8 @@ import { McIconModule } from '../../lib/icon/';
@Component({
selector: 'app',
template: require('./template.html'),
styleUrls: ['./styles.scss']
styleUrls: ['./styles.scss'],
encapsulation: ViewEncapsulation.None
})
export class DemoComponent {}

Expand Down
8 changes: 7 additions & 1 deletion src/lib-dev/icon/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';

@import '../../lib/core/theming/prebuilt/default-theme';
//@import '../../lib/core/theming/prebuilt/default-theme';
@import '../../lib/core/theming/prebuilt/dark-theme';


table {
width: 250px;
}
114 changes: 111 additions & 3 deletions src/lib-dev/icon/template.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,111 @@
<div>
<i mc-icon="mc-angle-L_16"></i>
</div>
normal
<table>
<thead>
<tr>
<td>default</td>
<td>primary</td>
<td>second</td>
<td>error</td>
</tr>
</thead>
<tr>
<td><i mc-icon="mc-angle-L_16"></i></td>
<td><i mc-icon="mc-angle-L_16" color="primary"></i></td>
<td><i mc-icon="mc-angle-L_16" color="second"></i></td>
<td><i mc-icon="mc-angle-L_16" color="error"></i></td>
</tr>
<tr>
<td><i mc-icon="mc-calendar_16"></i></td>
<td><i mc-icon="mc-calendar_16" color="primary"></i></td>
<td><i mc-icon="mc-calendar_16" color="second"></i></td>
<td><i mc-icon="mc-calendar_16" color="error"></i></td>
</tr>
<tr>
<td><i mc-icon="mc-clock_16"></i></td>
<td><i mc-icon="mc-clock_16" color="primary"></i></td>
<td><i mc-icon="mc-clock_16" color="second"></i></td>
<td><i mc-icon="mc-clock_16" color="error"></i></td>
</tr>
<tr>
<td><i mc-icon="mc-folder-opened_16"></i></td>
<td><i mc-icon="mc-folder-opened_16" color="primary"></i></td>
<td><i mc-icon="mc-folder-opened_16" color="second"></i></td>
<td><i mc-icon="mc-folder-opened_16" color="error"></i></td>
</tr>
</table>

<br><br><br>

disabled
<table>
<thead>
<tr>
<td>default</td>
<td>primary</td>
<td>second</td>
<td>error</td>
</tr>
</thead>
<tr>
<td><i class="mc-disabled" mc-icon="mc-angle-L_16"></i></td>
<td><i class="mc-disabled" mc-icon="mc-angle-L_16" color="primary"></i></td>
<td><i class="mc-disabled" mc-icon="mc-angle-L_16" color="second"></i></td>
<td><i class="mc-disabled" mc-icon="mc-angle-L_16" color="error"></i></td>
</tr>
<tr>
<td><i class="mc-disabled" mc-icon="mc-calendar_16"></i></td>
<td><i class="mc-disabled" mc-icon="mc-calendar_16" color="primary"></i></td>
<td><i class="mc-disabled" mc-icon="mc-calendar_16" color="second"></i></td>
<td><i class="mc-disabled" mc-icon="mc-calendar_16" color="error"></i></td>
</tr>
<tr>
<td><i class="mc-disabled" mc-icon="mc-clock_16"></i></td>
<td><i class="mc-disabled" mc-icon="mc-clock_16" color="primary"></i></td>
<td><i class="mc-disabled" mc-icon="mc-clock_16" color="second"></i></td>
<td><i class="mc-disabled" mc-icon="mc-clock_16" color="error"></i></td>
</tr>
<tr>
<td><i class="mc-disabled" mc-icon="mc-folder-opened_16"></i></td>
<td><i class="mc-disabled" mc-icon="mc-folder-opened_16" color="primary"></i></td>
<td><i class="mc-disabled" mc-icon="mc-folder-opened_16" color="second"></i></td>
<td><i class="mc-disabled" mc-icon="mc-folder-opened_16" color="error"></i></td>
</tr>
</table>

<br><br><br>

light
<table>
<thead>
<tr>
<td>default</td>
<td>primary</td>
<td>second</td>
<td>error</td>
</tr>
</thead>
<tr>
<td><i class="mc-icon_light" mc-icon="mc-angle-L_16"></i></td>
<td><i class="mc-icon_light" mc-icon="mc-angle-L_16" color="primary"></i></td>
<td><i class="mc-icon_light" mc-icon="mc-angle-L_16" color="second"></i></td>
<td><i class="mc-icon_light" mc-icon="mc-angle-L_16" color="error"></i></td>
</tr>
<tr>
<td><i class="mc-icon_light" mc-icon="mc-calendar_16"></i></td>
<td><i class="mc-icon_light" mc-icon="mc-calendar_16" color="primary"></i></td>
<td><i class="mc-icon_light" mc-icon="mc-calendar_16" color="second"></i></td>
<td><i class="mc-icon_light" mc-icon="mc-calendar_16" color="error"></i></td>
</tr>
<tr>
<td><i class="mc-icon_light" mc-icon="mc-clock_16"></i></td>
<td><i class="mc-icon_light" mc-icon="mc-clock_16" color="primary"></i></td>
<td><i class="mc-icon_light" mc-icon="mc-clock_16" color="second"></i></td>
<td><i class="mc-icon_light" mc-icon="mc-clock_16" color="error"></i></td>
</tr>
<tr>
<td><i class="mc-icon_light" mc-icon="mc-folder-opened_16"></i></td>
<td><i class="mc-icon_light" mc-icon="mc-folder-opened_16" color="primary"></i></td>
<td><i class="mc-icon_light" mc-icon="mc-folder-opened_16" color="second"></i></td>
<td><i class="mc-icon_light" mc-icon="mc-folder-opened_16" color="error"></i></td>
</tr>
</table>
2 changes: 2 additions & 0 deletions src/lib-dev/input/module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Component, NgModule, ViewEncapsulation } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { McButtonModule } from '@ptsecurity/mosaic/button';

import { McFormFieldModule } from '../../lib/form-field';
import { McIconModule } from '../../lib/icon';
Expand All @@ -27,6 +28,7 @@ export class InputDemoComponent {
],
imports: [
BrowserModule,
McButtonModule,
McInputModule,
McFormFieldModule,
FormsModule,
Expand Down
4 changes: 3 additions & 1 deletion src/lib-dev/input/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
@import '~@ptsecurity/mosaic-icons/dist/styles/mc-icons';
@import '../../lib/core/theming/prebuilt/default-theme';
//@import '../../lib/core/theming/prebuilt/default-theme';
@import '../../lib/core/theming/prebuilt/dark-theme';


.container .mc-form-field {
width: 200px;
Expand Down
52 changes: 12 additions & 40 deletions src/lib-dev/input/template.html
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,31 @@
<div class="container">

<header>Number Value: {{numberValue}}</header>
<header>Number Value: {{ numberValue }}</header>
<br>

<header>Without placeholder:</header>
<mc-form-field>
<input mcInput [(ngModel)]="numberValue" type="number">
<mc-stepper></mc-stepper>
</mc-form-field>

<br><br>
<button mc-icon-button>
<i mc-icon="mc-angle-L_16"></i>
</button>

<header>With placeholder:</header>
<mc-form-field>
<input mcInput [(ngModel)]="numberValue" type="number" placeholder="Number Value">
<mc-stepper></mc-stepper>
</mc-form-field>

<br><br>
<br>
<br>

<header>Min = -5 Max = 7 Step = 0.5 Big step = 1.5 </header>
<mc-form-field>
<input mcInput [(ngModel)]="numberValue" type="number" placeholder="Number MaxMin Step"
[min]="min" max="7" step="0.5" big-step="1.5">
<mc-stepper></mc-stepper>
</mc-form-field>

<br><br>

<header>Min = -5 </header>
<mc-form-field>
<input mcInput [(ngModel)]="numberValue" type="number" placeholder="Min only" min="-5">
<mc-stepper></mc-stepper>
</mc-form-field>

<br><br>

<header>Step = 0.5 </header>
<mc-form-field>
<input mcInput [(ngModel)]="numberValue" type="number" placeholder="Step only" step="0.5">
<mc-stepper></mc-stepper>
</mc-form-field>
<br>
<br>

<br><br>
<mc-form-field class="mc-focused">
<input mcInput [(ngModel)]="value" placeholder="Placeholder">

<header>Without placeholder:</header>
<mc-form-field>
<input mcInput [(ngModel)]="numberValue" type="number" disabled>
<mc-stepper></mc-stepper>
<i mcSuffix mc-icon="mc-calendar_16"></i>
</mc-form-field>

<br><br>


<header>Value: {{value}}</header>
<br>
<br>

<header>Without placeholder:</header>
Expand Down
19 changes: 1 addition & 18 deletions src/lib/button/_button-base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,16 @@ $mc-button-border-size: 1px;
$mc-button-margin: 0 !default;
$mc-button-border-radius: 3px;

$mc-button-padding_xs: 3px 7px;
$mc-button-line-height_xs: 16px;
$mc-button-font_xs: 12px;

$mc-button-padding_sm: 3px 15px;
$mc-button-line-height_sm: 16px;
$mc-button-font_sm: 12px;

// TODO: convert it to common values from typography
$mc-button-padding: 5px 15px;
$mc-button-line-height: 20px;
$mc-button-font: 15px;

$mc-button-padding_lg: 9px 15px;
$mc-button-line-height_lg: 20px;
$mc-button-font_lg: 15px;

$mc-button-padding_xl: 9px 59px;
$mc-button-line-height_xl: 28px;
$mc-button-font_xl: 18px;


$mc-icon-button-padding: 5px 7px;
$mc-icon-button-text-padding: 15px;
$mc-icon-button-icon-padding: 7px;
$mc-icon-button-line-height: 20px;
$mc-icon-button-font: 16px;
$mc-icon-button-font: 15px;


%mc-button-base {
Expand Down
Loading

0 comments on commit 2a8cbf4

Please sign in to comment.