diff --git a/src/app/pages/ui/components/grid/grid.component.ts b/src/app/pages/ui/components/grid/grid.component.ts new file mode 100644 index 00000000..eae1892c --- /dev/null +++ b/src/app/pages/ui/components/grid/grid.component.ts @@ -0,0 +1,16 @@ +import {Component, ViewEncapsulation} from '@angular/core'; + +import {BaCard} from '../../../../theme/components'; + +@Component({ + selector: 'grid', + encapsulation: ViewEncapsulation.None, + directives: [BaCard], + styles: [require('./grid.scss')], + template: require('./grid.html'), +}) +export class Grid { + + constructor() { + } +} diff --git a/src/app/pages/ui/components/grid/grid.html b/src/app/pages/ui/components/grid/grid.html new file mode 100644 index 00000000..2dde920f --- /dev/null +++ b/src/app/pages/ui/components/grid/grid.html @@ -0,0 +1,253 @@ +
+ +
+
+ + + +

Stacked to horizontal

+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
.col-md-1
+
+
+
+
+
.col-md-8
+
+
+
.col-md-4
+
+
+
+
+
.col-md-4
+
+
+
.col-md-4
+
+
+
.col-md-4
+
+
+
+
+
.col-md-6
+
+
+
.col-md-6
+
+
+ +

Mobile and desktop

+
+
+
xs-12 .col-md-8
+
+
+
xs-6 .col-md-4
+
+
+
+
+
xs-6 .col-md-4
+
+
+
xs-6 .col-md-4
+
+
+
xs-6 .col-md-4
+
+
+
+
+
.col-xs-6
+
+
+
.col-xs-6
+
+
+ +

Mobile, tablet, desktop

+
+
+
.col-xs-12 .col-sm-6 .col-md-8
+
+
+
.col-xs-6 .col-md-4
+
+
+
+
+
.col-xs-6 .col-sm-4
+
+
+
.col-xs-6 .col-sm-4
+
+
+
+
.col-xs-6 .col-sm-4
+
+
+ +

Column wrapping

+
+
+
.col-xs-9
+
+
+
.col-xs-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous + unit. +
+
+
+
.col-xs-6
Subsequent columns continue along the new line.
+
+
+ +

Responsive column resets

+
+
+
.col-xs-6 .col-sm-3

Resize your viewport or check it out on your phone for an example.

+
+
+
.col-xs-6 .col-sm-3
+
+
+
+
.col-xs-6 .col-sm-3
+
+
+
.col-xs-6 .col-sm-3
+
+
+ +

Offsetting columns

+
+
+
.col-md-4
+
+
+
.col-md-4 .col-md-offset-4
+
+
+
+
+
.col-md-3 .col-md-offset-3
+
+
+
.col-md-3 .col-md-offset-3
+
+
+
+
+
.col-md-6 .col-md-offset-3
+
+
+ +

Grid options

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Extra small devices + Phones (<544px) + Small devices + Tablets (≥544px) + Medium devices + Desktops (≥768px) + Large devices + Desktops (≥992px) + Large devices + Desktops (≥1200px) +
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)576px720px940px1140px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-.col-xl-
# of columns12
Gutter width1.875rem / 30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes
+
+ +
+
+ +
diff --git a/src/app/pages/ui/components/grid/grid.scss b/src/app/pages/ui/components/grid/grid.scss new file mode 100644 index 00000000..7de12949 --- /dev/null +++ b/src/app/pages/ui/components/grid/grid.scss @@ -0,0 +1,30 @@ +@import '../../../../theme/sass/conf/conf'; + +.show-grid div[class^=col-]{ + padding: 10px; + box-sizing: border-box; + div { + color: $default-text; + text-align: center; + font-size: 18px; + background-color: $border-light; + padding: 12px 5px; + } +} + +.grid-h{ + margin-top: 10px; + margin-bottom: 0; + &:first-child{ + margin-top: 0; + } +} + +body.badmin-transparent { + .show-grid div[class^=col-]{ + div { + color: $default; + background-color: rgba(255, 255, 255, 0.3); + } + } +} diff --git a/src/app/pages/ui/components/grid/index.ts b/src/app/pages/ui/components/grid/index.ts new file mode 100644 index 00000000..4bf91847 --- /dev/null +++ b/src/app/pages/ui/components/grid/index.ts @@ -0,0 +1 @@ +export * from './grid.component'; diff --git a/src/app/pages/ui/ui.component.ts b/src/app/pages/ui/ui.component.ts index c34e8ae3..a59df0ae 100644 --- a/src/app/pages/ui/ui.component.ts +++ b/src/app/pages/ui/ui.component.ts @@ -4,6 +4,7 @@ import {RouteConfig} from '@angular/router-deprecated'; import {Typography} from './components/typography'; import {Buttons} from './components/buttons'; import {Icons} from './components/incons'; +import {Grid} from './components/grid'; @Component({ selector: 'ui', @@ -28,6 +29,11 @@ import {Icons} from './components/incons'; name: 'Icons', component: Icons, path: '/icons', + }, + { + name: 'Grid', + component: Grid, + path: '/grid', } ]) export class Ui { diff --git a/src/app/theme/components/sidebar/sidebar.service.ts b/src/app/theme/components/sidebar/sidebar.service.ts index 297909c1..4826cf90 100644 --- a/src/app/theme/components/sidebar/sidebar.service.ts +++ b/src/app/theme/components/sidebar/sidebar.service.ts @@ -32,6 +32,10 @@ export class SidebarService { title: 'Icons', name: 'Icons', }, + { + title: 'Grid', + name: 'Grid', + }, ] }, {