From 9cfe681c9e5e8f4e32692fb915b10000ddd08e83 Mon Sep 17 00:00:00 2001 From: Philip Viktor Schulz-Klingauf Date: Tue, 13 Oct 2020 12:23:56 +0200 Subject: [PATCH] Rm uppercase (#75) * removed uppercase style on grouped tabs * reconfigured heading sizes * fixed semantically wrong heading markup * reduce vertical space required by tabs * adjusted heading level in sample code * fixed heading hierarchy in markup * fine-tuned heading sizes * removed unneeded overrides --- src/components/checkbox/checkbox.component.ts | 2 +- .../dropdown-list/dropdown-list.component.ts | 2 +- .../grouped-tabs/grouped-tabs.component.ts | 6 +-- src/components/grouped-tabs/grouped-tabs.scss | 28 ++++++++++--- src/components/modal/modal.service.ts | 8 ++-- .../notification/notification.service.ts | 2 +- .../progress-bar/progress-bar.component.ts | 4 +- .../radio-button/radio-button.component.ts | 2 +- .../search-bar/search-bar.component.ts | 6 +-- .../sortable-list/sortable-list.component.ts | 4 +- .../split-view-container.component.ts | 2 +- src/components/tabs/tabs.component.ts | 6 +-- .../breadcrumbs-demo.tpl.html | 4 +- .../pages/button-demo/button-demo.tpl.html | 16 +++---- .../checkbox-demo/checkbox-demo.tpl.html | 4 +- .../pages/colors-demo/colors-demo.tpl.html | 6 +-- .../contents-list-item-demo.tpl.html | 4 +- .../date-time-picker-controls-demo.tpl.html | 4 +- .../date-time-picker-demo.tpl.html | 6 +-- .../dropdown-list-demo.tpl.html | 8 ++-- .../file-drop-area-demo.tpl.html | 8 ++-- .../file-picker-demo.tpl.html | 4 +- src/docs/pages/grid-demo/grid-demo.tpl.html | 42 +++++++++---------- .../grouped-tabs-demo.tpl.html | 4 +- src/docs/pages/icons-demo/icons-demo.tpl.html | 4 +- src/docs/pages/input-demo/input-demo.tpl.html | 4 +- .../pages/instructions/instructions.tpl.html | 8 ++-- .../menu-toggle-button-demo.tpl.html | 4 +- .../modal-service-demo.tpl.html | 6 +-- .../notification-demo.tpl.html | 4 +- .../overlay-host-demo.tpl.html | 2 +- .../progress-bar-demo.tpl.html | 4 +- .../radio-button-demo.tpl.html | 4 +- src/docs/pages/range-demo/range-demo.tpl.html | 4 +- .../search-bar-demo/search-bar-demo.tpl.html | 4 +- .../pages/select-demo/select-demo.tpl.html | 4 +- .../side-menu-demo/side-menu-demo.tpl.html | 4 +- .../sortable-list-demo.tpl.html | 4 +- .../split-button-demo.tpl.html | 4 +- .../split-view-container-demo.tpl.html | 4 +- src/docs/pages/tabs-demo/tabs-demo.tpl.html | 4 +- .../textarea-demo/textarea-demo.tpl.html | 4 +- .../pages/top-bar-demo/top-bar-demo.tpl.html | 4 +- .../typography-demo/typography-demo.tpl.html | 8 ++-- src/styles/_materialize-overrides.scss | 13 ++++++ src/styles/_materialize.scss | 1 + 46 files changed, 157 insertions(+), 127 deletions(-) create mode 100644 src/styles/_materialize-overrides.scss diff --git a/src/components/checkbox/checkbox.component.ts b/src/components/checkbox/checkbox.component.ts index e02b7fa9..ac0a8483 100644 --- a/src/components/checkbox/checkbox.component.ts +++ b/src/components/checkbox/checkbox.component.ts @@ -28,7 +28,7 @@ const GTX_CHECKBOX_VALUE_ACCESSOR = { * * ``` * - * ##### Stateless Mode + * ## Stateless Mode * By default, the Checkbox keeps track of its own internal checked state. This makes sense * for most use cases, such as when used in a form bound to NgControl. * diff --git a/src/components/dropdown-list/dropdown-list.component.ts b/src/components/dropdown-list/dropdown-list.component.ts index 804a83b6..92d64cc8 100644 --- a/src/components/dropdown-list/dropdown-list.component.ts +++ b/src/components/dropdown-list/dropdown-list.component.ts @@ -51,7 +51,7 @@ export type DropdownWidth = 'contents' | 'trigger' | 'expand' | number; * * ``` * - * ##### Programmatic Use + * ## Programmatic Use * When used programmatically (e.g. by getting a reference to the component via `@ContentChild(DropdownList)`, the * following extended API is available: * diff --git a/src/components/grouped-tabs/grouped-tabs.component.ts b/src/components/grouped-tabs/grouped-tabs.component.ts index b46063a1..f75d8e24 100644 --- a/src/components/grouped-tabs/grouped-tabs.component.ts +++ b/src/components/grouped-tabs/grouped-tabs.component.ts @@ -12,7 +12,7 @@ let uniqueGroupedTabsId = 0; * * Pure tabs will only change the active tab when the `activeId` property is updated. * - * ##### Tabs with simple labels + * ## Tabs with simple labels * ```html * * Content 1 @@ -27,7 +27,7 @@ let uniqueGroupedTabsId = 0; * * ``` * - * ##### Tabs with template labels + * ## Tabs with template labels * ```html * * @@ -53,7 +53,7 @@ let uniqueGroupedTabsId = 0; * * ``` * - * ##### Export components to use in templates + * ## Export components to use in templates * ```html * * First content diff --git a/src/components/grouped-tabs/grouped-tabs.scss b/src/components/grouped-tabs/grouped-tabs.scss index cf0c5010..1897fb9f 100644 --- a/src/components/grouped-tabs/grouped-tabs.scss +++ b/src/components/grouped-tabs/grouped-tabs.scss @@ -20,7 +20,9 @@ $tab-readonly-icon: material-icons-content(map-get($material-icons-codepoints, ' content: $tab-active-icon; position: absolute; left: -9px; - top: 13px; + top: 0; + bottom: 0; + margin: auto; width: 16px; height: 13px; font-family: 'Material Icons'; @@ -56,7 +58,7 @@ gtx-grouped-tabs { & > li { background: white; - text-transform: uppercase; + // text-transform: uppercase; border-top: 1px solid $gtx-color-light-gray; margin-bottom: 0; position: relative; @@ -66,12 +68,18 @@ gtx-grouped-tabs { margin-bottom: 0; border-bottom: 1px solid $gtx-color-light-gray; } + + icon[left] { + float: left; + margin-right: 8px; + font-size: $gtx-font-size-regular; + } } .tab-link { @include noselect; cursor: pointer; - text-transform: uppercase; + // text-transform: uppercase; color: $gtx-color-dark-gray; transition: border-left 0.3s, color 0.2s; border-right: 1px solid $gtx-color-light-gray; @@ -80,6 +88,8 @@ gtx-grouped-tabs { > a { @include inline-ellipsis-text; + display: flex; + align-items: center; &, &:link, &:visited { color: inherit; @@ -140,7 +150,7 @@ gtx-grouped-tabs { & > li.tab-link { cursor: pointer; line-height: 1.5; - padding: 0.5rem; + padding: 0.3rem; padding-left: 1rem; border-left: 2px solid $gtx-color-light-gray; @@ -159,9 +169,10 @@ gtx-grouped-tabs { .collapsible-header { border: none; - padding: 0.5rem 1rem; + padding: 0.3rem 1rem; color: $gtx-color-dark-gray; border-right: 1px solid $gtx-color-light-gray; + font-size: $gtx-font-size-small; @include inline-ellipsis-text; @include noselect; @@ -182,7 +193,7 @@ gtx-grouped-tabs { overflow: hidden; & > ul > li { - padding: 0.5rem 1rem; + padding: 0.3rem 1rem; padding-right: 0; margin: 0; margin-left: 1rem; @@ -202,6 +213,11 @@ gtx-grouped-tabs { &.is-active { @include is-active; } + + a span { + display: flex; + align-items: center; + } } } diff --git a/src/components/modal/modal.service.ts b/src/components/modal/modal.service.ts index e62e2e17..1fbd1958 100644 --- a/src/components/modal/modal.service.ts +++ b/src/components/modal/modal.service.ts @@ -18,7 +18,7 @@ import {IModalInstance, IDialogConfig, IModalDialog, IModalOptions} from './moda * A promise-based service for creating modal windows and dialogs. * Depends on the [``](#/overlay-host) being present in the app. * - * ##### Return Values + * ## Return Values * All the public methods return the `IModalInstance` object: * * ``` @@ -31,7 +31,7 @@ import {IModalInstance, IDialogConfig, IModalDialog, IModalOptions} from './moda * Calling the `open()` method returns a promise which will be resolved when the modal is closed * or rejected when a button is set to `shouldReject` or the modal calls the passed error handler. * - * ##### `.dialog()` + * ## `.dialog()` * To create a basic dialog modal, use the `.dialog()` method. This accepts an `IDialogConfig` object: * * ```TypeScript @@ -65,7 +65,7 @@ import {IModalInstance, IDialogConfig, IModalDialog, IModalOptions} from './moda * .catch(() => console.log('cancelled'); * ``` * - * ##### `.fromComponent()` + * ## `.fromComponent()` * For more complex modals, a component can be passed to the `.fromComponent()` method which will then be * placed inside a modal window. The component must implement the IModalDialog interface, which allows the * ModalService to hook into a `closeFn` & `cancelFn` so it knows to close the modal and resolve the promise. @@ -108,7 +108,7 @@ import {IModalInstance, IDialogConfig, IModalDialog, IModalOptions} from './moda * .then(result => console.log(result)); * ``` * - * ##### Modal Options + * ## Modal Options * All public methods take an optional options parameter to describe the behavior and appearance of the modal window * itself: * ```TypeScript diff --git a/src/components/notification/notification.service.ts b/src/components/notification/notification.service.ts index 8562c7b7..3cc02267 100644 --- a/src/components/notification/notification.service.ts +++ b/src/components/notification/notification.service.ts @@ -49,7 +49,7 @@ interface IOpenToast { * dismiss(); * ``` * - * ##### `INotificationOptions` + * ## `INotificationOptions` * * The `show()` method takes an `INotificationOptions` object as its argument: * diff --git a/src/components/progress-bar/progress-bar.component.ts b/src/components/progress-bar/progress-bar.component.ts index b9fa699b..a7625800 100644 --- a/src/components/progress-bar/progress-bar.component.ts +++ b/src/components/progress-bar/progress-bar.component.ts @@ -27,7 +27,7 @@ function noop(): void {} * * ``` * - * ##### Using the progress bar with observables + * ## Using the progress bar with observables * * When an observable is assigned to the ProgressBar with "for", the observable should emit numbers * in the range [0..1] for a determinate progress bar or boolean values for indeterminate progress. @@ -44,7 +44,7 @@ function noop(): void {} * } * ``` * - * ##### Using the progress bar programmatically inside another component + * ## Using the progress bar programmatically inside another component * * The ProgressBar instance exposes two public methods, `start()`, `complete()` which can be used * to manually control the progress bar visibility and progress in a parent component. diff --git a/src/components/radio-button/radio-button.component.ts b/src/components/radio-button/radio-button.component.ts index ce0503c0..44197951 100644 --- a/src/components/radio-button/radio-button.component.ts +++ b/src/components/radio-button/radio-button.component.ts @@ -109,7 +109,7 @@ export class RadioGroup implements ControlValueAccessor { * * ``` * - * ##### Stateless Mode + * ## Stateless Mode * By default, the RadioButton keeps track of its own internal checked state. This makes sense * for most use cases, such as when used in a form bound to ngModel. * diff --git a/src/components/search-bar/search-bar.component.ts b/src/components/search-bar/search-bar.component.ts index f2103f71..9ff3c5c7 100644 --- a/src/components/search-bar/search-bar.component.ts +++ b/src/components/search-bar/search-bar.component.ts @@ -18,7 +18,7 @@ const GTX_SEARCH_BAR_VALUE_ACCESSOR = { * * ``` * - * ##### Use With NgModel + * ## Use With NgModel * The search query can be bound with `NgModel`, which can be useful for implementing a reset function: * * ```html @@ -27,7 +27,7 @@ const GTX_SEARCH_BAR_VALUE_ACCESSOR = { * * ``` * - * ##### Content Projection + * ## Content Projection * Content inside the `` tags will be projected inside the component, to the left of the * search bar. This can be used, for example, to display current filters being applied to the search. * @@ -37,7 +37,7 @@ const GTX_SEARCH_BAR_VALUE_ACCESSOR = { * * ``` * - * ##### Custom Icons + * ## Custom Icons * Icons in the `` can be replaced with custom ones. * * ```html diff --git a/src/components/sortable-list/sortable-list.component.ts b/src/components/sortable-list/sortable-list.component.ts index c8cb3807..ae1e5ec6 100644 --- a/src/components/sortable-list/sortable-list.component.ts +++ b/src/components/sortable-list/sortable-list.component.ts @@ -51,7 +51,7 @@ export type SortableGroup = string | ISortableGroupOptions; * } * ``` * - * ##### `ISortableEvent` + * ## `ISortableEvent` * * The `dragEnd` event emits an `ISortableEvent` object. For a full listing of its properties, see the source. Below * are the more important properties: @@ -62,7 +62,7 @@ export type SortableGroup = string | ISortableGroupOptions; * | **newIndex** | `number` | The index in the list that the item was dropped | * | **sort()** | `Function` | A pre-configured sort function - see below | * - * ##### `ISortableEvent.sort()` + * ## `ISortableEvent.sort()` * * When the `dragEnd` event is fired, the event object exposes a `sort(array, byReference)` method. This is a convenience method for * sorting an array, so that the consumer of this component does not have to re-implement array sorting diff --git a/src/components/split-view-container/split-view-container.component.ts b/src/components/split-view-container/split-view-container.component.ts index 75c6cdab..21b2f9a1 100644 --- a/src/components/split-view-container/split-view-container.component.ts +++ b/src/components/split-view-container/split-view-container.component.ts @@ -44,7 +44,7 @@ export const CURSOR_STYLE_CLASS = 'gtx-split-view-container-resizing'; * * ``` * - * ##### Setting Scroll Positions + * ## Setting Scroll Positions * * The SplitViewContainer instance exposes two public methods which can be used to manually set the `scrollTop` * property of either the right or left panels: `.scrollLeftPanelTo()` and `.scrollRightPanelTo()`. diff --git a/src/components/tabs/tabs.component.ts b/src/components/tabs/tabs.component.ts index 401411e9..9e16a0dc 100644 --- a/src/components/tabs/tabs.component.ts +++ b/src/components/tabs/tabs.component.ts @@ -9,7 +9,7 @@ import { Subscription } from 'rxjs'; * * Pure tabs will only change the active tab when the `activeId` property is updated. * - * ##### Stateful Tabs + * ## Stateful Tabs * ```html * * Optional content here. @@ -18,7 +18,7 @@ import { Subscription } from 'rxjs'; * * ``` * - * ##### Pure Tabs + * ## Pure Tabs * ```html * * @@ -27,7 +27,7 @@ import { Subscription } from 'rxjs'; * * ``` * - * ##### With `routerLink` + * ## With `routerLink` * A gtx-tab can take an optional `[routerLink]` binding which will set router links for the tabs. * ```html * diff --git a/src/docs/pages/breadcrumbs-demo/breadcrumbs-demo.tpl.html b/src/docs/pages/breadcrumbs-demo/breadcrumbs-demo.tpl.html index efbd8b7b..38b47aeb 100644 --- a/src/docs/pages/breadcrumbs-demo/breadcrumbs-demo.tpl.html +++ b/src/docs/pages/breadcrumbs-demo/breadcrumbs-demo.tpl.html @@ -1,8 +1,8 @@ -

Breadcrumbs

+

Breadcrumbs

-

Demos

+

Demos

diff --git a/src/docs/pages/button-demo/button-demo.tpl.html b/src/docs/pages/button-demo/button-demo.tpl.html index 939121d3..902c58b1 100644 --- a/src/docs/pages/button-demo/button-demo.tpl.html +++ b/src/docs/pages/button-demo/button-demo.tpl.html @@ -1,8 +1,8 @@ -

Button

+

Button

-

Demos

+

Demos

@@ -59,7 +59,7 @@

Demos

-
Small Icons Buttons
+
Small Icons Buttons
arrow_drop_down @@ -70,12 +70,12 @@
Small Icons Buttons
not_interested -
Regular (default) Icons Buttons
+
Regular (default) Icons Buttons
settings check_circle delete -
Large Icon Buttons
+
Large Icon Buttons
home @@ -88,7 +88,7 @@
Large Icon Buttons
Example
-

SASS Reference

+

SASS Reference

For the full reference of variables and mixins the grid offers, refer to the Foundation documentation. diff --git a/src/docs/pages/grouped-tabs-demo/grouped-tabs-demo.tpl.html b/src/docs/pages/grouped-tabs-demo/grouped-tabs-demo.tpl.html index e10759b3..4a0695c4 100644 --- a/src/docs/pages/grouped-tabs-demo/grouped-tabs-demo.tpl.html +++ b/src/docs/pages/grouped-tabs-demo/grouped-tabs-demo.tpl.html @@ -1,8 +1,8 @@ -

Grouped Tabs

+

Grouped Tabs

-

Demo

+

Demo

diff --git a/src/docs/pages/icons-demo/icons-demo.tpl.html b/src/docs/pages/icons-demo/icons-demo.tpl.html index 45bb1c43..354387ff 100644 --- a/src/docs/pages/icons-demo/icons-demo.tpl.html +++ b/src/docs/pages/icons-demo/icons-demo.tpl.html @@ -1,4 +1,4 @@ -

Icons

+

Icons

The UI Core uses the Material Icons set. To use them, add an @@ -10,7 +10,7 @@

Icons

Often we need the icon to align to the left or the right of some text or other content. In this case the left or right attribute should be added to the icon element.

-

Demos

+

Demos

diff --git a/src/docs/pages/input-demo/input-demo.tpl.html b/src/docs/pages/input-demo/input-demo.tpl.html index daac40e9..a5dfd2de 100644 --- a/src/docs/pages/input-demo/input-demo.tpl.html +++ b/src/docs/pages/input-demo/input-demo.tpl.html @@ -1,8 +1,8 @@ -

InputField

+

InputField

-

Demos

+

Demos

diff --git a/src/docs/pages/instructions/instructions.tpl.html b/src/docs/pages/instructions/instructions.tpl.html index 742a605e..5b0fe6fb 100644 --- a/src/docs/pages/instructions/instructions.tpl.html +++ b/src/docs/pages/instructions/instructions.tpl.html @@ -1,16 +1,16 @@ -

Gentics UI Core

+

Gentics UI Core

Gentics UI Core is a UI component library for Angular. It is the common core UI framework built for the Gentics CMS and Gentics Mesh.

-

Motivation

+

Motivation

At Gentics we chose Angular as our primary front-end framework back in February 2016, when the framework was at version 2.0.0-beta.2. At the time there was no mature UI component library available, so we decided to build our own. This became the Gentics UI Core and is now used in production in several internal and client applications, as well as the next version of the open-source Mesh UI.

-

Getting Started

+

Getting Started

1. Install via npm: @@ -54,6 +54,6 @@

Getting Started

For information on how to use Gentics UI Core with Angular CLI, see README.md on Github. -

License

+

License

Gentics UI Core is made available under the open-source Apache 2.0 license. diff --git a/src/docs/pages/menu-toggle-button-demo/menu-toggle-button-demo.tpl.html b/src/docs/pages/menu-toggle-button-demo/menu-toggle-button-demo.tpl.html index 8ce55689..5518f0f0 100644 --- a/src/docs/pages/menu-toggle-button-demo/menu-toggle-button-demo.tpl.html +++ b/src/docs/pages/menu-toggle-button-demo/menu-toggle-button-demo.tpl.html @@ -1,8 +1,8 @@ -

MenuToggleButton

+

MenuToggleButton

-

Demos

+

Demos

diff --git a/src/docs/pages/modal-service-demo/modal-service-demo.tpl.html b/src/docs/pages/modal-service-demo/modal-service-demo.tpl.html index bf8e23b5..10545280 100644 --- a/src/docs/pages/modal-service-demo/modal-service-demo.tpl.html +++ b/src/docs/pages/modal-service-demo/modal-service-demo.tpl.html @@ -1,8 +1,8 @@ -

ModalService

+

ModalService

-

Demos

+

Demos

@@ -77,7 +77,7 @@

Demos

A Custom Component

-
(( greeting ))
+

(( greeting ))

Close me diff --git a/src/docs/pages/notification-demo/notification-demo.tpl.html b/src/docs/pages/notification-demo/notification-demo.tpl.html index 2410703a..901dc1d8 100644 --- a/src/docs/pages/notification-demo/notification-demo.tpl.html +++ b/src/docs/pages/notification-demo/notification-demo.tpl.html @@ -1,9 +1,9 @@ -

Notification

+

Notification

-

Demos

+

Demos

diff --git a/src/docs/pages/overlay-host-demo/overlay-host-demo.tpl.html b/src/docs/pages/overlay-host-demo/overlay-host-demo.tpl.html index 8bc74d9c..cb474796 100644 --- a/src/docs/pages/overlay-host-demo/overlay-host-demo.tpl.html +++ b/src/docs/pages/overlay-host-demo/overlay-host-demo.tpl.html @@ -1,3 +1,3 @@ -

OverlayHost

+

OverlayHost

diff --git a/src/docs/pages/progress-bar-demo/progress-bar-demo.tpl.html b/src/docs/pages/progress-bar-demo/progress-bar-demo.tpl.html index 45f1f569..07915ec5 100644 --- a/src/docs/pages/progress-bar-demo/progress-bar-demo.tpl.html +++ b/src/docs/pages/progress-bar-demo/progress-bar-demo.tpl.html @@ -1,8 +1,8 @@ -

ProgressBar

+

ProgressBar

-

Demos

+

Demos

diff --git a/src/docs/pages/radio-button-demo/radio-button-demo.tpl.html b/src/docs/pages/radio-button-demo/radio-button-demo.tpl.html index 03341840..8d21b513 100644 --- a/src/docs/pages/radio-button-demo/radio-button-demo.tpl.html +++ b/src/docs/pages/radio-button-demo/radio-button-demo.tpl.html @@ -1,8 +1,8 @@ -

RadioButton

+

RadioButton

-

Demos

+

Demos

diff --git a/src/docs/pages/range-demo/range-demo.tpl.html b/src/docs/pages/range-demo/range-demo.tpl.html index 803da49b..f79b1f07 100644 --- a/src/docs/pages/range-demo/range-demo.tpl.html +++ b/src/docs/pages/range-demo/range-demo.tpl.html @@ -1,8 +1,8 @@ -

Range

+

Range

-

Demos

+

Demos

diff --git a/src/docs/pages/search-bar-demo/search-bar-demo.tpl.html b/src/docs/pages/search-bar-demo/search-bar-demo.tpl.html index c63cc073..bbc49830 100644 --- a/src/docs/pages/search-bar-demo/search-bar-demo.tpl.html +++ b/src/docs/pages/search-bar-demo/search-bar-demo.tpl.html @@ -1,8 +1,8 @@ -

Search Bar

+

Search Bar

-

Demos

+

Demos

diff --git a/src/docs/pages/select-demo/select-demo.tpl.html b/src/docs/pages/select-demo/select-demo.tpl.html index a8d0050c..61f51e51 100644 --- a/src/docs/pages/select-demo/select-demo.tpl.html +++ b/src/docs/pages/select-demo/select-demo.tpl.html @@ -1,8 +1,8 @@ -

Select

+

Select

-

Demos

+

Demos

diff --git a/src/docs/pages/side-menu-demo/side-menu-demo.tpl.html b/src/docs/pages/side-menu-demo/side-menu-demo.tpl.html index 66ea0b8a..9c19d2e6 100644 --- a/src/docs/pages/side-menu-demo/side-menu-demo.tpl.html +++ b/src/docs/pages/side-menu-demo/side-menu-demo.tpl.html @@ -1,8 +1,8 @@ -

Side Menu

+

Side Menu

-

Demos

+

Demos

diff --git a/src/docs/pages/sortable-list-demo/sortable-list-demo.tpl.html b/src/docs/pages/sortable-list-demo/sortable-list-demo.tpl.html index f4e6b196..94950b46 100644 --- a/src/docs/pages/sortable-list-demo/sortable-list-demo.tpl.html +++ b/src/docs/pages/sortable-list-demo/sortable-list-demo.tpl.html @@ -1,8 +1,8 @@ -

SortableList

+

SortableList

-

Demos

+

Demos

diff --git a/src/docs/pages/split-button-demo/split-button-demo.tpl.html b/src/docs/pages/split-button-demo/split-button-demo.tpl.html index 44ad669e..502f44e5 100644 --- a/src/docs/pages/split-button-demo/split-button-demo.tpl.html +++ b/src/docs/pages/split-button-demo/split-button-demo.tpl.html @@ -1,8 +1,8 @@ -

SplitButton

+

SplitButton

-

Demos

+

Demos

diff --git a/src/docs/pages/split-view-container-demo/split-view-container-demo.tpl.html b/src/docs/pages/split-view-container-demo/split-view-container-demo.tpl.html index c1aaf555..72720bd7 100644 --- a/src/docs/pages/split-view-container-demo/split-view-container-demo.tpl.html +++ b/src/docs/pages/split-view-container-demo/split-view-container-demo.tpl.html @@ -1,8 +1,8 @@ -

SplitViewContainer

+

SplitViewContainer

-

Demos

+

Demos

The SplitViewContainer is demonstrated by the main master/detail view in this docs app.

diff --git a/src/docs/pages/tabs-demo/tabs-demo.tpl.html b/src/docs/pages/tabs-demo/tabs-demo.tpl.html index 5f9f1542..d07b632f 100644 --- a/src/docs/pages/tabs-demo/tabs-demo.tpl.html +++ b/src/docs/pages/tabs-demo/tabs-demo.tpl.html @@ -1,8 +1,8 @@ -

Tabs

+

Tabs

-

Demos

+

Demos

diff --git a/src/docs/pages/textarea-demo/textarea-demo.tpl.html b/src/docs/pages/textarea-demo/textarea-demo.tpl.html index 2528db65..710c12ce 100644 --- a/src/docs/pages/textarea-demo/textarea-demo.tpl.html +++ b/src/docs/pages/textarea-demo/textarea-demo.tpl.html @@ -1,8 +1,8 @@ -

Textarea

+

Textarea

-

Demos

+

Demos

diff --git a/src/docs/pages/top-bar-demo/top-bar-demo.tpl.html b/src/docs/pages/top-bar-demo/top-bar-demo.tpl.html index cdbba33b..ba613c49 100644 --- a/src/docs/pages/top-bar-demo/top-bar-demo.tpl.html +++ b/src/docs/pages/top-bar-demo/top-bar-demo.tpl.html @@ -1,8 +1,8 @@ -

TopBar

+

TopBar

-

Demos

+

Demos

The TopBar is demonstrated at the top of this docs app. diff --git a/src/docs/pages/typography-demo/typography-demo.tpl.html b/src/docs/pages/typography-demo/typography-demo.tpl.html index 630d9539..652efb41 100644 --- a/src/docs/pages/typography-demo/typography-demo.tpl.html +++ b/src/docs/pages/typography-demo/typography-demo.tpl.html @@ -1,4 +1,4 @@ -

Typography

+

Typography

The Gentics UI Core uses the Roboto @@ -18,8 +18,8 @@

Heading h6
Headings can be given a "light" weight will the .heading-light class:

-

A Default Heading

-

A Light Heading

+

A Default Heading

+

A Light Heading

@@ -32,7 +32,7 @@

A Light Heading

-

Robustly Synergizing Turn-Key Solutions

+

Robustly Synergizing Turn-Key Solutions

Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.

diff --git a/src/styles/_materialize-overrides.scss b/src/styles/_materialize-overrides.scss new file mode 100644 index 00000000..8580632f --- /dev/null +++ b/src/styles/_materialize-overrides.scss @@ -0,0 +1,13 @@ +// ========================================================================== +// MATERILIZE OVERRIDES FOR GENTICS UI CORE +// ========================================================================== + +// 20. Typography +// ========================================================================== +// Header Styles +$h1-fontsize: 1.7rem !default; +$h2-fontsize: 1.4rem !default; +$h3-fontsize: 1.3rem !default; +$h4-fontsize: 1.2rem !default; +$h5-fontsize: 1.1rem !default; +$h6-fontsize: 1rem !default; diff --git a/src/styles/_materialize.scss b/src/styles/_materialize.scss index c4e400ed..1029e0a6 100644 --- a/src/styles/_materialize.scss +++ b/src/styles/_materialize.scss @@ -2,6 +2,7 @@ // Color @import "~materialize-css/sass/components/color-variables"; +@import "materialize-overrides"; @import "~materialize-css/sass/components/color-classes"; // Variables;