From 85072185e9e8a7b5fbd14f95e8a5c31d43c4c3b0 Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Thu, 12 May 2016 12:04:08 +0300 Subject: [PATCH] buttons page in progress --- .../components/buttons/buttons.component.ts | 20 +++ .../pages/ui/components/buttons/buttons.html | 65 +++++++++ .../pages/ui/components/buttons/buttons.scss | 130 ++++++++++++++++++ .../disabledButtons.component.ts | 12 ++ .../disabledButtons/disabledButtons.html | 18 +++ .../components/disabledButtons/index.ts | 1 + .../flatButtons/flatButtons.component.ts | 12 ++ .../components/flatButtons/flatButtons.html | 18 +++ .../buttons/components/flatButtons/index.ts | 1 + .../buttons/components/raisedButtons/index.ts | 1 + .../raisedButtons/raisedButtons.component.ts | 12 ++ .../raisedButtons/raisedButtons.html | 18 +++ .../buttons/components/sizedButtons/index.ts | 1 + .../sizedButtons/sizedButtons.component.ts | 12 ++ .../components/sizedButtons/sizedButtons.html | 18 +++ src/app/pages/ui/components/buttons/index.ts | 1 + src/app/pages/ui/ui.component.ts | 6 + .../components/sidebar/sidebar.service.ts | 4 + src/app/theme/sass/_buttons.scss | 22 +++ 19 files changed, 372 insertions(+) create mode 100644 src/app/pages/ui/components/buttons/buttons.component.ts create mode 100644 src/app/pages/ui/components/buttons/buttons.html create mode 100644 src/app/pages/ui/components/buttons/buttons.scss create mode 100644 src/app/pages/ui/components/buttons/components/disabledButtons/disabledButtons.component.ts create mode 100644 src/app/pages/ui/components/buttons/components/disabledButtons/disabledButtons.html create mode 100644 src/app/pages/ui/components/buttons/components/disabledButtons/index.ts create mode 100644 src/app/pages/ui/components/buttons/components/flatButtons/flatButtons.component.ts create mode 100644 src/app/pages/ui/components/buttons/components/flatButtons/flatButtons.html create mode 100644 src/app/pages/ui/components/buttons/components/flatButtons/index.ts create mode 100644 src/app/pages/ui/components/buttons/components/raisedButtons/index.ts create mode 100644 src/app/pages/ui/components/buttons/components/raisedButtons/raisedButtons.component.ts create mode 100644 src/app/pages/ui/components/buttons/components/raisedButtons/raisedButtons.html create mode 100644 src/app/pages/ui/components/buttons/components/sizedButtons/index.ts create mode 100644 src/app/pages/ui/components/buttons/components/sizedButtons/sizedButtons.component.ts create mode 100644 src/app/pages/ui/components/buttons/components/sizedButtons/sizedButtons.html create mode 100644 src/app/pages/ui/components/buttons/index.ts diff --git a/src/app/pages/ui/components/buttons/buttons.component.ts b/src/app/pages/ui/components/buttons/buttons.component.ts new file mode 100644 index 00000000..98bf710a --- /dev/null +++ b/src/app/pages/ui/components/buttons/buttons.component.ts @@ -0,0 +1,20 @@ +import {Component, ViewEncapsulation} from '@angular/core'; + +import {BaCard} from '../../../../theme/components'; +import {FlatButtons} from './components/flatButtons'; +import {RaisedButtons} from './components/raisedButtons'; +import {SizedButtons} from './components/sizedButtons'; +import {DisabledButtons} from './components/disabledButtons'; + +@Component({ + selector: 'buttons', + encapsulation: ViewEncapsulation.None, + directives: [BaCard, FlatButtons, RaisedButtons, SizedButtons, DisabledButtons], + styles: [require('./buttons.scss')], + template: require('./buttons.html'), +}) +export class Buttons { + + constructor() { + } +} diff --git a/src/app/pages/ui/components/buttons/buttons.html b/src/app/pages/ui/components/buttons/buttons.html new file mode 100644 index 00000000..c0c3384d --- /dev/null +++ b/src/app/pages/ui/components/buttons/buttons.html @@ -0,0 +1,65 @@ +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
diff --git a/src/app/pages/ui/components/buttons/buttons.scss b/src/app/pages/ui/components/buttons/buttons.scss new file mode 100644 index 00000000..a3455c10 --- /dev/null +++ b/src/app/pages/ui/components/buttons/buttons.scss @@ -0,0 +1,130 @@ +.basic-btns { + padding-top: 8px; + margin-bottom: -8px; + h5 { + line-height: 35px; + font-size: 12px; + &.row-sm { + line-height: 30px; + } + &.row-xs { + line-height: 22px; + } + } + & > .row { + padding-bottom: 4px; + } +} + +.btns-row { + & > div { + margin-bottom: 12px; + } +} + +.btns-same-width-sm { + .btn { + width: 48px; + } +} + +.btns-same-width-md { + .btn { + width: 79px; + } +} + +.btns-same-width-lg { + .btn { + width: 112px; + } +} + +ul.btn-list { + margin: 0 0 0 -18px; + padding: 0; + padding-top: 6px; + clear: both; + li { + margin: 0px 0 12px 18px; + padding: 0; + list-style: none; + float: left; + } +} + +.btn-group-wrapper { + margin-bottom: 12px; +} + +$btn-icon-size: 34px; +.btn-icon { + width: $btn-icon-size; + height: $btn-icon-size; + line-height: $btn-icon-size; + padding: 0; + text-align: center; +} + +.btn-group-example { + float: left; + margin-right: 30px; + margin-bottom: 12px; +} + +.btn-toolbar-example { + float: left; +} + +.progress-buttons-container { + text-align: center; + font-size: 16px; + span.button-title { + display: inline-block; + width: 100%; + line-height: 1; + font-size: 14px; + margin-bottom: 10px; + margin-top: 10px; + } + .row + .row { + margin-top: 30px; + } +} + +.button-panel { + height: 315px; + .btn { + width: 150px; + } +} + +.large-buttons-panel { + height: 202px; +} + +.button-panel.df-size-button-panel { + .btn-xs { + width: 60px; + } + .btn-sm { + width: 90px; + } + .btn-mm { + width: 120px; + } + .btn-md { + width: 150px; + } + .btn-xm { + width: 175px; + } + .btn-lg { + width: 200px; + } +} + +.button-wrapper { + text-align: center; + margin: 5px 0; +} diff --git a/src/app/pages/ui/components/buttons/components/disabledButtons/disabledButtons.component.ts b/src/app/pages/ui/components/buttons/components/disabledButtons/disabledButtons.component.ts new file mode 100644 index 00000000..8e20eef8 --- /dev/null +++ b/src/app/pages/ui/components/buttons/components/disabledButtons/disabledButtons.component.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'disabled-buttons', + template: require('./disabledButtons.html'), +}) +export class DisabledButtons { + + constructor() { + } +} diff --git a/src/app/pages/ui/components/buttons/components/disabledButtons/disabledButtons.html b/src/app/pages/ui/components/buttons/components/disabledButtons/disabledButtons.html new file mode 100644 index 00000000..b38e8ed7 --- /dev/null +++ b/src/app/pages/ui/components/buttons/components/disabledButtons/disabledButtons.html @@ -0,0 +1,18 @@ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
diff --git a/src/app/pages/ui/components/buttons/components/disabledButtons/index.ts b/src/app/pages/ui/components/buttons/components/disabledButtons/index.ts new file mode 100644 index 00000000..e5600a26 --- /dev/null +++ b/src/app/pages/ui/components/buttons/components/disabledButtons/index.ts @@ -0,0 +1 @@ +export * from './disabledButtons.component'; diff --git a/src/app/pages/ui/components/buttons/components/flatButtons/flatButtons.component.ts b/src/app/pages/ui/components/buttons/components/flatButtons/flatButtons.component.ts new file mode 100644 index 00000000..0cc4b092 --- /dev/null +++ b/src/app/pages/ui/components/buttons/components/flatButtons/flatButtons.component.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'flat-buttons', + template: require('./flatButtons.html'), +}) +export class FlatButtons { + + constructor() { + } +} diff --git a/src/app/pages/ui/components/buttons/components/flatButtons/flatButtons.html b/src/app/pages/ui/components/buttons/components/flatButtons/flatButtons.html new file mode 100644 index 00000000..4dcdff70 --- /dev/null +++ b/src/app/pages/ui/components/buttons/components/flatButtons/flatButtons.html @@ -0,0 +1,18 @@ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
diff --git a/src/app/pages/ui/components/buttons/components/flatButtons/index.ts b/src/app/pages/ui/components/buttons/components/flatButtons/index.ts new file mode 100644 index 00000000..f20254b4 --- /dev/null +++ b/src/app/pages/ui/components/buttons/components/flatButtons/index.ts @@ -0,0 +1 @@ +export * from './flatButtons.component'; diff --git a/src/app/pages/ui/components/buttons/components/raisedButtons/index.ts b/src/app/pages/ui/components/buttons/components/raisedButtons/index.ts new file mode 100644 index 00000000..2dde17b4 --- /dev/null +++ b/src/app/pages/ui/components/buttons/components/raisedButtons/index.ts @@ -0,0 +1 @@ +export * from './raisedButtons.component'; diff --git a/src/app/pages/ui/components/buttons/components/raisedButtons/raisedButtons.component.ts b/src/app/pages/ui/components/buttons/components/raisedButtons/raisedButtons.component.ts new file mode 100644 index 00000000..c339552e --- /dev/null +++ b/src/app/pages/ui/components/buttons/components/raisedButtons/raisedButtons.component.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'raised-buttons', + template: require('./raisedButtons.html'), +}) +export class RaisedButtons { + + constructor() { + } +} diff --git a/src/app/pages/ui/components/buttons/components/raisedButtons/raisedButtons.html b/src/app/pages/ui/components/buttons/components/raisedButtons/raisedButtons.html new file mode 100644 index 00000000..65ce60af --- /dev/null +++ b/src/app/pages/ui/components/buttons/components/raisedButtons/raisedButtons.html @@ -0,0 +1,18 @@ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
diff --git a/src/app/pages/ui/components/buttons/components/sizedButtons/index.ts b/src/app/pages/ui/components/buttons/components/sizedButtons/index.ts new file mode 100644 index 00000000..7d8977d5 --- /dev/null +++ b/src/app/pages/ui/components/buttons/components/sizedButtons/index.ts @@ -0,0 +1 @@ +export * from './sizedButtons.component'; diff --git a/src/app/pages/ui/components/buttons/components/sizedButtons/sizedButtons.component.ts b/src/app/pages/ui/components/buttons/components/sizedButtons/sizedButtons.component.ts new file mode 100644 index 00000000..5462a293 --- /dev/null +++ b/src/app/pages/ui/components/buttons/components/sizedButtons/sizedButtons.component.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; + + +@Component({ + selector: 'sized-buttons', + template: require('./sizedButtons.html'), +}) +export class SizedButtons { + + constructor() { + } +} diff --git a/src/app/pages/ui/components/buttons/components/sizedButtons/sizedButtons.html b/src/app/pages/ui/components/buttons/components/sizedButtons/sizedButtons.html new file mode 100644 index 00000000..f26f2195 --- /dev/null +++ b/src/app/pages/ui/components/buttons/components/sizedButtons/sizedButtons.html @@ -0,0 +1,18 @@ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
diff --git a/src/app/pages/ui/components/buttons/index.ts b/src/app/pages/ui/components/buttons/index.ts new file mode 100644 index 00000000..21c27a31 --- /dev/null +++ b/src/app/pages/ui/components/buttons/index.ts @@ -0,0 +1 @@ +export * from './buttons.component'; diff --git a/src/app/pages/ui/ui.component.ts b/src/app/pages/ui/ui.component.ts index d2dfac3b..37974a1d 100644 --- a/src/app/pages/ui/ui.component.ts +++ b/src/app/pages/ui/ui.component.ts @@ -2,6 +2,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; import {RouteConfig} from '@angular/router-deprecated'; import {Typography} from './components/typography'; +import {Buttons} from './components/buttons'; @Component({ selector: 'ui', @@ -17,6 +18,11 @@ import {Typography} from './components/typography'; path: '/typography', useAsDefault: true }, + { + name: 'Buttons', + component: Buttons, + path: '/buttons', + } ]) export class Ui { diff --git a/src/app/theme/components/sidebar/sidebar.service.ts b/src/app/theme/components/sidebar/sidebar.service.ts index c172633c..81b6d815 100644 --- a/src/app/theme/components/sidebar/sidebar.service.ts +++ b/src/app/theme/components/sidebar/sidebar.service.ts @@ -24,6 +24,10 @@ export class SidebarService { title: 'Typography', name: 'Typography', }, + { + title: 'Buttons', + name: 'Buttons', + }, ] }, { diff --git a/src/app/theme/sass/_buttons.scss b/src/app/theme/sass/_buttons.scss index d70b7262..495adb41 100644 --- a/src/app/theme/sass/_buttons.scss +++ b/src/app/theme/sass/_buttons.scss @@ -7,6 +7,8 @@ $hover: 24; .btn { border-radius: 5px; transition: all 0.1s ease; + padding: 0.344rem 1rem; + font-size: 0.9rem; } .btn:hover { @@ -274,3 +276,23 @@ button.progress-button { padding: 8px 14px; font-size: 16px; } + +.btn-group-xs>.btn, .btn-xs { + padding: 1px 5px; + font-size: 12px; + line-height: 1.5; +} + +.btn-group-sm>.btn, .btn-sm { + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} + +.btn-group-lg>.btn, .btn-lg { + padding: 10px 16px; + font-size: 18px; + line-height: 1.3333333; + border-radius: 6px; +}