-
-
;
- }
+import * as React from 'react';
+import * as classnames from 'classnames/bind';
+
+const cx = classnames.bind(require('./Accordion.scss'));
+
+export interface AccordionAttributes {
+ ariaRole?: string;
+ dataTestHook?: string;
+}
+
+export interface AccordionProperties {
+ children: React.ReactElement
- {this.props.children}
-
-
+
+
;
+ }
}
\ No newline at end of file
diff --git a/lib/components/Accordion/index.ts b/src/components/Accordion/index.ts
similarity index 96%
rename from lib/components/Accordion/index.ts
rename to src/components/Accordion/index.ts
index 74cec70..63f62bc 100644
--- a/lib/components/Accordion/index.ts
+++ b/src/components/Accordion/index.ts
@@ -1 +1 @@
-export * from './Accordion';
+export * from './Accordion';
diff --git a/lib/components/ActionTrigger/ActionTrigger.md b/src/components/ActionTrigger/ActionTrigger.md
similarity index 97%
rename from lib/components/ActionTrigger/ActionTrigger.md
rename to src/components/ActionTrigger/ActionTrigger.md
index 9fdcaf2..27181a1 100644
--- a/lib/components/ActionTrigger/ActionTrigger.md
+++ b/src/components/ActionTrigger/ActionTrigger.md
@@ -1,37 +1,37 @@
-______________________________________________________________________________
-
-### `ActionTrigger.props.attr`
-
-```html
-
+ {this.props.children}
+
+
-
- {props.label}
-
-
-
+
+ {props.label}
+
+
+
+ store.set({ value })} />
+
+ )
+ )
+ )
+ );
diff --git a/lib/components/DateTime/Calendar.tsx b/src/components/DateTime/Calendar.tsx
similarity index 100%
rename from lib/components/DateTime/Calendar.tsx
rename to src/components/DateTime/Calendar.tsx
diff --git a/lib/components/DateTime/DateField.md b/src/components/DateTime/DateField.md
similarity index 100%
rename from lib/components/DateTime/DateField.md
rename to src/components/DateTime/DateField.md
diff --git a/lib/components/DateTime/DateField.tsx b/src/components/DateTime/DateField.tsx
similarity index 100%
rename from lib/components/DateTime/DateField.tsx
rename to src/components/DateTime/DateField.tsx
diff --git a/lib/components/DateTime/DatePicker.md b/src/components/DateTime/DatePicker.md
similarity index 100%
rename from lib/components/DateTime/DatePicker.md
rename to src/components/DateTime/DatePicker.md
diff --git a/lib/components/DateTime/DatePicker.scss b/src/components/DateTime/DatePicker.scss
similarity index 96%
rename from lib/components/DateTime/DatePicker.scss
rename to src/components/DateTime/DatePicker.scss
index 940d02d..22d07d2 100644
--- a/lib/components/DateTime/DatePicker.scss
+++ b/src/components/DateTime/DatePicker.scss
@@ -1,168 +1,168 @@
-@import '../../common/constants';
-@import '../../common/mixins';
-@import '../../common/color.controls';
-
-$date-picker-dropdown-width: 65*$grid-size;
-
-$line-height-text: 5*$grid-size;
-$line-height-icon: 4*$grid-size;
-
-$calendar-z-index: 9 * $z-index-large-step + 5 * $z-index-medium-step;
-
-$calc-margin: 5px;
-
-.date-picker-container {
- @include md-box(relative);
- width: 100%;
- font-family: $font-family-default;
- @include themify{
- color: themed('color-text-rest');
- }
- font-size: $font-family-default;
- line-height: $line-height-text;
-
- .date-picker-input-container {
- @include md-box(block, relative);
- flex-grow: 1;
- }
-
- .date-picker-input {
- @include md-box(block, relative);
- width: 100%;
- height: 8*$grid-size;
- padding: 2*$grid-size 8*$grid-size 2*$grid-size 3*$grid-size;
- outline: none;
-
- &:focus {
- outline-offset: -1px;
- @include themify{
- outline: 1px dashed themed('color-border-focus');
- }
- }
-
- @include themify{
- border: 1px solid themed('color-border-rest');
- background-color: themed('color-bg-input-rest');
-
- &:hover {
- border: 1px solid themed('color-border-selected');
- }
-
- &:active {
- border: 1px solid themed('color-border-selected');
- }
- }
-
- &:disabled {
- @include themify{
- color: themed('color-text-disabled');
- background-color: themed('color-bg-input-disabled');
- border: 1px solid themed('color-border-disabled');
- }
-
- &::placeholder {
- @include themify{
- color: themed('color-text-disabled');
- }
- }
- }
-
- &::placeholder {
- @include themify{
- color: themed('color-text-placeholder');
- }
- }
-
- &::selection {
- @include themify{
- color: themed('color-text-white');
- background-color: themd('color-bg-item-selected');
- }
- }
-
- &.error:not(:disabled) {
- @include themify{
- border: 1px solid themed('color-border-error');
- }
- }
-
- &::-ms-clear {
- display: none;
- }
-
- &:invalid {
- box-shadow: none;
- }
- }
-
- .date-picker-calendar-icon {
- @include md-box(absolute);
- font-size: $font-size-small;
- line-height: $line-height-icon;
- top: 0;
- right: 0;
- border: none;
- background-color: transparent;
-
- &:focus:not(:disabled) {
- outline-offset: -2px;
- }
- }
-}
-
-.date-picker-dropdown {
- padding-bottom: 2*$grid-size;
- left: 0px;
- width: $date-picker-dropdown-width;
- display: inline-block;
- z-index: $calendar-z-index;
- position: absolute;
-
- &:not(.above) {
- top: calc(100% + 5px);
- }
-
- &.above {
- bottom: calc(100% + 5px);
- }
-
-
- @include themify{
- background-color: themed('color-bg-input-rest');
- border: 1px solid themed('color-border-selected');
- :global(.md-dropdown-container) & {
- background-color: themed('color-bg-input-rest');
- border: 1px solid themed('color-border-selected');
- }
- }
-
- .date-picker-dropdown-triangle {
- @include md-box(block, absolute);
- width: 2*$grid-size;
- height: 2*$grid-size;
- left: 4*$grid-size;
- }
-
- &:not(.above) .date-picker-dropdown-triangle {
- bottom: calc(100% - 3px);
-
- @include themify{
- background-color: themed('color-bg-input-rest');
- border-left: 1px solid themed('color-border-selected');
- border-top: 1px solid themed('color-border-selected');
- }
- transform: rotateZ(45deg);
- }
-
- &.above .date-picker-dropdown-triangle {
- top: calc(100% - 3px);
-
- @include themify{
- background-color: themed('color-bg-input-rest');
- border-right: 1px solid themed('color-border-selected');
- border-bottom: 1px solid themed('color-border-selected');
- }
- transform: rotateZ(45deg);
- }
-}
-
+@import '../../common/constants';
+@import '../../common/mixins';
+@import '../../common/color.controls';
+
+$date-picker-dropdown-width: 65*$grid-size;
+
+$line-height-text: 5*$grid-size;
+$line-height-icon: 4*$grid-size;
+
+$calendar-z-index: 9 * $z-index-large-step + 5 * $z-index-medium-step;
+
+$calc-margin: 5px;
+
+.date-picker-container {
+ @include md-box(relative);
+ width: 100%;
+ font-family: $font-family-default;
+ @include themify{
+ color: themed('color-text-rest');
+ }
+ font-size: $font-family-default;
+ line-height: $line-height-text;
+
+ .date-picker-input-container {
+ @include md-box(block, relative);
+ flex-grow: 1;
+ }
+
+ .date-picker-input {
+ @include md-box(block, relative);
+ width: 100%;
+ height: 8*$grid-size;
+ padding: 2*$grid-size 8*$grid-size 2*$grid-size 3*$grid-size;
+ outline: none;
+
+ &:focus {
+ outline-offset: -1px;
+ @include themify{
+ outline: 1px dashed themed('color-border-focus');
+ }
+ }
+
+ @include themify{
+ border: 1px solid themed('color-border-rest');
+ background-color: themed('color-bg-input-rest');
+
+ &:hover {
+ border: 1px solid themed('color-border-selected');
+ }
+
+ &:active {
+ border: 1px solid themed('color-border-selected');
+ }
+ }
+
+ &:disabled {
+ @include themify{
+ color: themed('color-text-disabled');
+ background-color: themed('color-bg-input-disabled');
+ border: 1px solid themed('color-border-disabled');
+ }
+
+ &::placeholder {
+ @include themify{
+ color: themed('color-text-disabled');
+ }
+ }
+ }
+
+ &::placeholder {
+ @include themify{
+ color: themed('color-text-placeholder');
+ }
+ }
+
+ &::selection {
+ @include themify{
+ color: themed('color-text-white');
+ background-color: themd('color-bg-item-selected');
+ }
+ }
+
+ &.error:not(:disabled) {
+ @include themify{
+ border: 1px solid themed('color-border-error');
+ }
+ }
+
+ &::-ms-clear {
+ display: none;
+ }
+
+ &:invalid {
+ box-shadow: none;
+ }
+ }
+
+ .date-picker-calendar-icon {
+ @include md-box(absolute);
+ font-size: $font-size-small;
+ line-height: $line-height-icon;
+ top: 0;
+ right: 0;
+ border: none;
+ background-color: transparent;
+
+ &:focus:not(:disabled) {
+ outline-offset: -2px;
+ }
+ }
+}
+
+.date-picker-dropdown {
+ padding-bottom: 2*$grid-size;
+ left: 0px;
+ width: $date-picker-dropdown-width;
+ display: inline-block;
+ z-index: $calendar-z-index;
+ position: absolute;
+
+ &:not(.above) {
+ top: calc(100% + 5px);
+ }
+
+ &.above {
+ bottom: calc(100% + 5px);
+ }
+
+
+ @include themify{
+ background-color: themed('color-bg-input-rest');
+ border: 1px solid themed('color-border-selected');
+ :global(.md-dropdown-container) & {
+ background-color: themed('color-bg-input-rest');
+ border: 1px solid themed('color-border-selected');
+ }
+ }
+
+ .date-picker-dropdown-triangle {
+ @include md-box(block, absolute);
+ width: 2*$grid-size;
+ height: 2*$grid-size;
+ left: 4*$grid-size;
+ }
+
+ &:not(.above) .date-picker-dropdown-triangle {
+ bottom: calc(100% - 3px);
+
+ @include themify{
+ background-color: themed('color-bg-input-rest');
+ border-left: 1px solid themed('color-border-selected');
+ border-top: 1px solid themed('color-border-selected');
+ }
+ transform: rotateZ(45deg);
+ }
+
+ &.above .date-picker-dropdown-triangle {
+ top: calc(100% - 3px);
+
+ @include themify{
+ background-color: themed('color-bg-input-rest');
+ border-right: 1px solid themed('color-border-selected');
+ border-bottom: 1px solid themed('color-border-selected');
+ }
+ transform: rotateZ(45deg);
+ }
+}
+
diff --git a/lib/components/DateTime/DatePicker.spec.tsx b/src/components/DateTime/DatePicker.spec.tsx
similarity index 100%
rename from lib/components/DateTime/DatePicker.spec.tsx
rename to src/components/DateTime/DatePicker.spec.tsx
diff --git a/src/components/DateTime/DatePicker.stories.tsx b/src/components/DateTime/DatePicker.stories.tsx
new file mode 100644
index 0000000..e480dd2
--- /dev/null
+++ b/src/components/DateTime/DatePicker.stories.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { DatePicker } from './DatePicker';
+import { withInfo } from '@storybook/addon-info';
+import { withState } from '@dump247/storybook-state';
+import { boolean } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Date Picker', module)
+ .add('with state',
+ withState({})(
+ withInfo({ inline: true }) (
+ ({ store }) => (
+ empty
- empty
- empty
- empty
+ empty
+ empty
+
- {props.background}
-
-
- {props.children}
-
-
- {props.banner}
-
-
-
- Header
- Content
-
-
-
-
- Header
- Content
-
-
-
-
- Header
- This is very long content. This is very long content. This is very long content. This is very long content. This is very long content. This is very long content. This is very long content.
-
-
-
-
- Header
- Content
-
-
-
-
+______________________________________________________________________________
+
+### `GalleryCard.props.attr`
+
+```html
+
+ {props.background}
+
+
+ {props.children}
+
+
+ {props.banner}
+
+
+
+ Header
+ Content
+
+
+
+
+ Header
+ Content
+
+
+
+
+ Header
+ This is very long content. This is very long content. This is very long content. This is very long content. This is very long content. This is very long content. This is very long content.
+
+
+
+
+ Header
+ Content
+
+
+
+
```
\ No newline at end of file
diff --git a/lib/components/GalleryCard/GalleryCard.scss b/src/components/GalleryCard/GalleryCard.scss
similarity index 95%
rename from lib/components/GalleryCard/GalleryCard.scss
rename to src/components/GalleryCard/GalleryCard.scss
index 77dca57..da421fc 100644
--- a/lib/components/GalleryCard/GalleryCard.scss
+++ b/src/components/GalleryCard/GalleryCard.scss
@@ -1,191 +1,191 @@
-@import '../../common/constants';
-@import '../../common/mixins';
-@import '../../common/color.controls';
-
-$gallery-card-icon-size: $icon-size-xxlarge;
-$gallery-card-width: 67*$grid-size;
-$gallery-card-height: 71*$grid-size;
-$gallery-card-background-height: 40*$grid-size;
-
-$gallery-card-bg-color-transition: background-color 0.2s ease-in-out;
-
-$line-height-default: 5*$grid-size;
-$line-height-section: 4*$grid-size;
-
-$card-content-margin: 4*$grid-size 5*$grid-size;
-$card-fixed-content-height: $gallery-card-height - $gallery-card-background-height;
-$card-icon-top: ($gallery-card-background-height - $gallery-card-icon-size);
-$card-icon-left: ($gallery-card-width - $gallery-card-icon-size);
-
-:global(.gallery-card-link) {
- // most consumers of GalleryCard will wrap it in a React-Router
- // Link component; specify some default styling for that:
-
- display: inline-block; // this is a tile, not a normal tag
- margin: 2.5 * $grid-size; // put some spacing between the tiles by default
-
- &:not(:global(.disabled)) {
- &:active {
- .card {
- @include themify {
- border: 1px solid themed('color-border-selected');
- }
- }
- }
-
- &:hover {
- .card {
- @include themify {
- border: 1px solid themed('color-border-hover');
- }
- }
- }
-
- &:focus {
- .card {
- @include themify {
- border: 1px dashed themed('color-border-focus');
- }
- }
- }
- }
-}
-
-.card {
- @include md-box(inline-block, relative, hidden);
- @include themify{
- background-color: themed('color-bg-gallery-tile');
- border: 1px solid themed('color-border-tile');
- }
-
- margin: 0;
- margin-bottom: -$grid-size; // to avoid the extra spacing visible on :active
- padding: 0;
- box-sizing: border-box;
-
- &.fixed {
- height: $gallery-card-height;
- width: $gallery-card-width;
- }
-}
-
-.blue {
- @include themify{
- background-color: themed('color-bg-gallery-tile-blue') !important;
- }
-}
-
-.yellow {
- @include themify{
- background-color: themed('color-bg-gallery-tile-yellow') !important;
- }
-}
-
-.red {
- @include themify{
- background-color: themed('color-bg-gallery-tile-red') !important;
- }
-}
-
-%card-background {
- @include md-box(inline-block, relative);
- width: 100%;
- background-color: transparent;
- transition: $gallery-card-bg-color-transition;
-
- &.fixed {
- width: $gallery-card-width;
- height: $gallery-card-background-height;
- }
-
- .fullbg & {
- height: 100%;
- }
-}
-
-.background-image-container {
- @extend %card-background;
- overflow: hidden;
-
- .background-image {
- width: 100%;
- height: 100%;
- object-fit: cover;
- object-position: center;
- }
-}
-
-.background-color {
- @extend %card-background;
- @include themify{
- background-color: themed('color-bg-gallery-tile-default');
- }
-}
-
-.card-content {
- @include md-box(relative, hidden, flex-column);
- padding: $card-content-margin;
- font-family: $font-family-default;
- overflow: hidden;
-
- header {
- font-size: $font-size-h5;
- line-height: $line-height-default;
- @include themify{
- color: themed('color-text-rest');
- }
- margin-bottom: $grid-size;
- flex: 0 0 5*$grid-size;
- }
-
- section {
- @include md-box();
- font-size: $font-size-small;
- line-height: $line-height-section;
- @include themify{
- color: themed('color-text-rest');
- }
- overflow: hidden;
- }
-
- footer {
- font-size: $font-size-default;
- line-height: $line-height-default;
- flex: 0 0 4*$grid-size;
- }
-
- .fixed & {
- height: $card-fixed-content-height;
- }
-}
-
-.banner {
- @include md-box(block, absolute);
- top: 0px;
- left: 0px;
- right: 0px;
- padding: $grid-size;
- @include themify{
- background-color: themed('color-bg-gallery-tile-banner');
- color: themed('color-text-white');
- }
- font-family: $font-family-default;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- text-align: center;
-}
-
-.gallery-card-icon {
- background-color: transparent;
- @include themify{
- color: themed('color-text-white');
- }
- text-align: center;
-
- .icon-title {
- @include md-box(block);
- font-family: $font-family-default;
- font-size: $font-size-default;
- }
-}
+@import '../../common/constants';
+@import '../../common/mixins';
+@import '../../common/color.controls';
+
+$gallery-card-icon-size: $icon-size-xxlarge;
+$gallery-card-width: 67*$grid-size;
+$gallery-card-height: 71*$grid-size;
+$gallery-card-background-height: 40*$grid-size;
+
+$gallery-card-bg-color-transition: background-color 0.2s ease-in-out;
+
+$line-height-default: 5*$grid-size;
+$line-height-section: 4*$grid-size;
+
+$card-content-margin: 4*$grid-size 5*$grid-size;
+$card-fixed-content-height: $gallery-card-height - $gallery-card-background-height;
+$card-icon-top: ($gallery-card-background-height - $gallery-card-icon-size);
+$card-icon-left: ($gallery-card-width - $gallery-card-icon-size);
+
+:global(.gallery-card-link) {
+ // most consumers of GalleryCard will wrap it in a React-Router
+ // Link component; specify some default styling for that:
+
+ display: inline-block; // this is a tile, not a normal tag
+ margin: 2.5 * $grid-size; // put some spacing between the tiles by default
+
+ &:not(:global(.disabled)) {
+ &:active {
+ .card {
+ @include themify {
+ border: 1px solid themed('color-border-selected');
+ }
+ }
+ }
+
+ &:hover {
+ .card {
+ @include themify {
+ border: 1px solid themed('color-border-hover');
+ }
+ }
+ }
+
+ &:focus {
+ .card {
+ @include themify {
+ border: 1px dashed themed('color-border-focus');
+ }
+ }
+ }
+ }
+}
+
+.card {
+ @include md-box(inline-block, relative, hidden);
+ @include themify{
+ background-color: themed('color-bg-gallery-tile');
+ border: 1px solid themed('color-border-tile');
+ }
+
+ margin: 0;
+ margin-bottom: -$grid-size; // to avoid the extra spacing visible on :active
+ padding: 0;
+ box-sizing: border-box;
+
+ &.fixed {
+ height: $gallery-card-height;
+ width: $gallery-card-width;
+ }
+}
+
+.blue {
+ @include themify{
+ background-color: themed('color-bg-gallery-tile-blue') !important;
+ }
+}
+
+.yellow {
+ @include themify{
+ background-color: themed('color-bg-gallery-tile-yellow') !important;
+ }
+}
+
+.red {
+ @include themify{
+ background-color: themed('color-bg-gallery-tile-red') !important;
+ }
+}
+
+%card-background {
+ @include md-box(inline-block, relative);
+ width: 100%;
+ background-color: transparent;
+ transition: $gallery-card-bg-color-transition;
+
+ &.fixed {
+ width: $gallery-card-width;
+ height: $gallery-card-background-height;
+ }
+
+ .fullbg & {
+ height: 100%;
+ }
+}
+
+.background-image-container {
+ @extend %card-background;
+ overflow: hidden;
+
+ .background-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ }
+}
+
+.background-color {
+ @extend %card-background;
+ @include themify{
+ background-color: themed('color-bg-gallery-tile-default');
+ }
+}
+
+.card-content {
+ @include md-box(relative, hidden, flex-column);
+ padding: $card-content-margin;
+ font-family: $font-family-default;
+ overflow: hidden;
+
+ header {
+ font-size: $font-size-h5;
+ line-height: $line-height-default;
+ @include themify{
+ color: themed('color-text-rest');
+ }
+ margin-bottom: $grid-size;
+ flex: 0 0 5*$grid-size;
+ }
+
+ section {
+ @include md-box();
+ font-size: $font-size-small;
+ line-height: $line-height-section;
+ @include themify{
+ color: themed('color-text-rest');
+ }
+ overflow: hidden;
+ }
+
+ footer {
+ font-size: $font-size-default;
+ line-height: $line-height-default;
+ flex: 0 0 4*$grid-size;
+ }
+
+ .fixed & {
+ height: $card-fixed-content-height;
+ }
+}
+
+.banner {
+ @include md-box(block, absolute);
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ padding: $grid-size;
+ @include themify{
+ background-color: themed('color-bg-gallery-tile-banner');
+ color: themed('color-text-white');
+ }
+ font-family: $font-family-default;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ text-align: center;
+}
+
+.gallery-card-icon {
+ background-color: transparent;
+ @include themify{
+ color: themed('color-text-white');
+ }
+ text-align: center;
+
+ .icon-title {
+ @include md-box(block);
+ font-family: $font-family-default;
+ font-size: $font-size-default;
+ }
+}
diff --git a/lib/components/GalleryCard/GalleryCard.tsx b/src/components/GalleryCard/GalleryCard.tsx
similarity index 96%
rename from lib/components/GalleryCard/GalleryCard.tsx
rename to src/components/GalleryCard/GalleryCard.tsx
index 019aef1..2c57cec 100644
--- a/lib/components/GalleryCard/GalleryCard.tsx
+++ b/src/components/GalleryCard/GalleryCard.tsx
@@ -1,180 +1,180 @@
-import * as React from 'react';
-import * as classNames from 'classnames/bind';
-import {DivProps, SpanProps, Elements as Attr} from '../../Attributes';
-import {MethodNode} from '../../Common';
-import {Icon, IconSize, IconProps, IconAttributes} from '../Icon';
-import {SolidBackground} from './SolidBackground';
-const css = classNames.bind(require('./GalleryCard.scss'));
-
-export interface GalleryCardType {}
-
-export interface GalleryCardAttributes {
- container?: DivProps;
- content?: DivProps;
- banner?: DivProps;
-}
-
-export interface GalleryCardProps extends React.Props
- {React.Children.map(this.props.children, child => React.cloneElement(child as React.ReactElement, {
- expanded: this.props.expanded,
- tabIndex: this.props.attr.tabIndex,
- onClick: this.props.onClick,
- disabled: this.props.disabled
- }))}
-
;
- }
-}
-
-export class Label extends React.Component e.stopPropagation()}
- ref={rawElement => this.rawElement = rawElement}>
- {this.props.children}
-
;
- }
-}
+import * as React from 'react';
+import * as classNames from 'classnames/bind';
+const cx = classNames.bind(require('./InlinePopup.scss'));
+
+const inlinePopupDefaultProps = {
+ attr: {
+ tabIndex: 0,
+ dataTestHook: null,
+ ariaLabel: null,
+ ariaDescribedBy: null
+ },
+};
+
+export interface Attributes {
+ tabIndex?: number;
+ dataTestHook?: string;
+ ariaLabel?: string;
+ ariaDescribedBy?: string;
+}
+
+export interface Properties {
+ expanded?: boolean;
+ onClick?: React.EventHandler
+ {React.Children.map(this.props.children, child => React.cloneElement(child as React.ReactElement, {
+ expanded: this.props.expanded,
+ tabIndex: this.props.attr.tabIndex,
+ onClick: this.props.onClick,
+ disabled: this.props.disabled
+ }))}
+
;
+ }
+}
+
+export class Label extends React.Component e.stopPropagation()}
+ ref={rawElement => this.rawElement = rawElement}>
+ {this.props.children}
+
;
+ }
+}
diff --git a/lib/components/InlinePopup/index.ts b/src/components/InlinePopup/index.ts
similarity index 96%
rename from lib/components/InlinePopup/index.ts
rename to src/components/InlinePopup/index.ts
index 64a3c90..250ea32 100644
--- a/lib/components/InlinePopup/index.ts
+++ b/src/components/InlinePopup/index.ts
@@ -1 +1 @@
-export * from './InlinePopup';
+export * from './InlinePopup';
diff --git a/lib/components/Input/CheckboxInput.md b/src/components/Input/CheckboxInput.md
similarity index 100%
rename from lib/components/Input/CheckboxInput.md
rename to src/components/Input/CheckboxInput.md
diff --git a/lib/components/Input/CheckboxInput.scss b/src/components/Input/CheckboxInput.scss
similarity index 96%
rename from lib/components/Input/CheckboxInput.scss
rename to src/components/Input/CheckboxInput.scss
index c2850ec..f6e653d 100644
--- a/lib/components/Input/CheckboxInput.scss
+++ b/src/components/Input/CheckboxInput.scss
@@ -1,179 +1,179 @@
-@import '../../common/constants';
-@import '../../common/mixins';
-@import '../../common/color.controls';
-
-$line-height: 4*$grid-size;
-$line-height-small: 3*$grid-size;
-$outline-focus-border-width: 1px;
-
-.checkbox-container {
- @include themify{
- color: themed('color-text-rest');
- &:not(.disabled) input:focus + .checkbox-button {
- outline: $outline-focus-border-width dashed themed('color-border-focus');
- outline-offset: -$outline-focus-border-width;
- }
-
- .checkbox-button {
- border: 1px solid themed('color-border-rest');
- background-color: themed('color-bg-input-rest');
- }
-
- &.disabled {
- color: themed('color-text-disabled');
- .checkbox-button {
- border: 1px solid themed('color-border-disabled');
- background-color: themed('color-bg-input-rest');
- }
- }
- .checkbox-fill {
- background-color: themed('color-text-rest');
- }
- }
-}
-
-.checkbox-container:hover {
- @include themify{
- .checkbox-button {
- border: 1px solid themed('color-border-selected');
- }
-
- &.selected .checkbox-button {
- color: themed('color-text-white');
- background-color: themed('color-bg-btn-primary-rest');
- border: 1px solid themed('color-border-hover');
- }
-
- &.disabled .checkbox-button {
- border: 1px solid themed('color-border-disabled');
- }
-
- &.indeterminate .checkbox-button {
- border: 1px solid themed('color-border-selected');
- background-color: themed('color-bg-input-rest');
- }
- }
-}
-
-.checkbox-container.selected {
- @include themify{
- .checkbox-button {
- border: 1px solid themed('color-border-selected');
- background-color: themed('color-bg-btn-primary-rest');
- }
-
- .checkbox-checkmark {
- color: themed('color-text-white');
- }
-
- &.disabled {
- .checkbox-button {
- background-color: themed('color-bg-input-disabled');
- border: none;
- }
-
- .checkbox-checkmark {
- color: themed('color-text-disabled');
- }
- }
-}
-}
-
-.checkbox-container.indeterminate {
- @include themify{
- .checkbox-button {
- border: 1px solid themed('color-border-selected');
- background-color: themed('color-bg-input-rest');
- }
-
- &.disabled {
- .checkbox-button {
- border: 1px solid themed('color-border-disabled');
- }
-
- .checkbox-fill {
- border: themed('color-text-disabled');
- }
- }
- }
-}
-
-.checkbox-container {
- @include md-box(block, relative);
- font-family: $font-family-default;
- font-size: $font-size-default;
- line-height: $line-height;
-
- & + &:not(.columns) {
- margin-top: 3*$grid-size;
- }
-
- &.columns {
- display: inline-block;
-
- margin-right: 2*$grid-size;
- }
-
- input {
- @include md-box(inline-block, absolute);
-
- top: 1px;
- left: 1px;
-
- width: 0px;
- height: 0px;
- border: none;
- outline: none;
- }
-
- .checkbox-text {
- @include md-box(inline-block, relative);
- vertical-align: top;
- padding-left: 2*$grid-size;
- }
-
- .checkbox-fill {
- @include md-box(display-none, absolute);
- left: 1.5*$grid-size;
- top: 1.5*$grid-size;
- width: $grid-size;
- height: $grid-size;
- }
-
- .checkbox-button {
- @include md-box(inline-block, relative);
- width: 4*$grid-size;
- height: 4*$grid-size;
- @include themify{
- background-color: themed('color-bg-input-rest');
- }
- outline: none;
- vertical-align: top;
- }
-
- .checkbox-label {
- @include md-box(inline-block, relative);
- }
-
- .checkbox-checkmark {
- @include md-box(display-none, absolute);
- font-size: $font-size-small;
- line-height: $line-height-small;
- left: 2px;
- }
-
- &.selected {
- .checkbox-checkmark {
- display: inline-block;
- }
- }
-
- &.indeterminate {
- .checkbox-checkmark {
- display: none;
- }
- .checkbox-fill {
- display: inline-block;
- }
- }
-}
+@import '../../common/constants';
+@import '../../common/mixins';
+@import '../../common/color.controls';
+
+$line-height: 4*$grid-size;
+$line-height-small: 3*$grid-size;
+$outline-focus-border-width: 1px;
+
+.checkbox-container {
+ @include themify{
+ color: themed('color-text-rest');
+ &:not(.disabled) input:focus + .checkbox-button {
+ outline: $outline-focus-border-width dashed themed('color-border-focus');
+ outline-offset: -$outline-focus-border-width;
+ }
+
+ .checkbox-button {
+ border: 1px solid themed('color-border-rest');
+ background-color: themed('color-bg-input-rest');
+ }
+
+ &.disabled {
+ color: themed('color-text-disabled');
+ .checkbox-button {
+ border: 1px solid themed('color-border-disabled');
+ background-color: themed('color-bg-input-rest');
+ }
+ }
+ .checkbox-fill {
+ background-color: themed('color-text-rest');
+ }
+ }
+}
+
+.checkbox-container:hover {
+ @include themify{
+ .checkbox-button {
+ border: 1px solid themed('color-border-selected');
+ }
+
+ &.selected .checkbox-button {
+ color: themed('color-text-white');
+ background-color: themed('color-bg-btn-primary-rest');
+ border: 1px solid themed('color-border-hover');
+ }
+
+ &.disabled .checkbox-button {
+ border: 1px solid themed('color-border-disabled');
+ }
+
+ &.indeterminate .checkbox-button {
+ border: 1px solid themed('color-border-selected');
+ background-color: themed('color-bg-input-rest');
+ }
+ }
+}
+
+.checkbox-container.selected {
+ @include themify{
+ .checkbox-button {
+ border: 1px solid themed('color-border-selected');
+ background-color: themed('color-bg-btn-primary-rest');
+ }
+
+ .checkbox-checkmark {
+ color: themed('color-text-white');
+ }
+
+ &.disabled {
+ .checkbox-button {
+ background-color: themed('color-bg-input-disabled');
+ border: none;
+ }
+
+ .checkbox-checkmark {
+ color: themed('color-text-disabled');
+ }
+ }
+}
+}
+
+.checkbox-container.indeterminate {
+ @include themify{
+ .checkbox-button {
+ border: 1px solid themed('color-border-selected');
+ background-color: themed('color-bg-input-rest');
+ }
+
+ &.disabled {
+ .checkbox-button {
+ border: 1px solid themed('color-border-disabled');
+ }
+
+ .checkbox-fill {
+ border: themed('color-text-disabled');
+ }
+ }
+ }
+}
+
+.checkbox-container {
+ @include md-box(block, relative);
+ font-family: $font-family-default;
+ font-size: $font-size-default;
+ line-height: $line-height;
+
+ & + &:not(.columns) {
+ margin-top: 3*$grid-size;
+ }
+
+ &.columns {
+ display: inline-block;
+
+ margin-right: 2*$grid-size;
+ }
+
+ input {
+ @include md-box(inline-block, absolute);
+
+ top: 1px;
+ left: 1px;
+
+ width: 0px;
+ height: 0px;
+ border: none;
+ outline: none;
+ }
+
+ .checkbox-text {
+ @include md-box(inline-block, relative);
+ vertical-align: top;
+ padding-left: 2*$grid-size;
+ }
+
+ .checkbox-fill {
+ @include md-box(display-none, absolute);
+ left: 1.5*$grid-size;
+ top: 1.5*$grid-size;
+ width: $grid-size;
+ height: $grid-size;
+ }
+
+ .checkbox-button {
+ @include md-box(inline-block, relative);
+ width: 4*$grid-size;
+ height: 4*$grid-size;
+ @include themify{
+ background-color: themed('color-bg-input-rest');
+ }
+ outline: none;
+ vertical-align: top;
+ }
+
+ .checkbox-label {
+ @include md-box(inline-block, relative);
+ }
+
+ .checkbox-checkmark {
+ @include md-box(display-none, absolute);
+ font-size: $font-size-small;
+ line-height: $line-height-small;
+ left: 2px;
+ }
+
+ &.selected {
+ .checkbox-checkmark {
+ display: inline-block;
+ }
+ }
+
+ &.indeterminate {
+ .checkbox-checkmark {
+ display: none;
+ }
+ .checkbox-fill {
+ display: inline-block;
+ }
+ }
+}
diff --git a/lib/components/Input/CheckboxInput.spec.tsx b/src/components/Input/CheckboxInput.spec.tsx
similarity index 100%
rename from lib/components/Input/CheckboxInput.spec.tsx
rename to src/components/Input/CheckboxInput.spec.tsx
diff --git a/lib/components/Input/CheckboxInput.tsx b/src/components/Input/CheckboxInput.tsx
similarity index 100%
rename from lib/components/Input/CheckboxInput.tsx
rename to src/components/Input/CheckboxInput.tsx
diff --git a/lib/components/Input/ComboInput.md b/src/components/Input/ComboInput.md
similarity index 100%
rename from lib/components/Input/ComboInput.md
rename to src/components/Input/ComboInput.md
diff --git a/lib/components/Input/ComboInput.scss b/src/components/Input/ComboInput.scss
similarity index 96%
rename from lib/components/Input/ComboInput.scss
rename to src/components/Input/ComboInput.scss
index 5158a98..49af62b 100644
--- a/lib/components/Input/ComboInput.scss
+++ b/src/components/Input/ComboInput.scss
@@ -1,218 +1,218 @@
-@import '../../common/constants';
-@import '../../common/mixins';
-@import '../../common/color.controls';
-
-$line-height: 5*$grid-size;
-$line-height-small: 4*$grid-size;
-
-$dropdown-z-index: $z-index-medium-step;
-
-.combo-input-container {
- @include md-box(flex, relative);
- width: 100%;
- font-family: $font-family-default;
- @include themify{
- color: themed('color-text-rest');
- }
- font-size: $font-size-default;
- line-height: $line-height;
-
- .input-container {
- @include md-box(block, relative);
- flex-grow: 1;
- }
-
- .input {
- @include md-box(block, relative);
- width: 100%;
- height: $input-height;
- padding: 2*$grid-size 8*$grid-size 2*$grid-size 3*$grid-size;
- outline: none;
- @include themify{
- border: 1px solid themed('color-border-rest');
- background-color: themed('color-bg-input-rest');
- }
-
- &:hover, &:focus, &:active {
- // inputs look really weird with a dashed outline, so standardize
- // on the solid selected border for all the above states:
- @include themify{
- border: 1px solid themed('color-border-selected');
- }
- }
-
- &:focus, &:active, &.visible {
- &:not(.disabled) {
- padding-right: 16*$grid-size;
- }
-
- &.show-cancel:not(.disabled) {
- + .cancel {
- display: inline-block;
- @include themify{
- color: themed('color-text-clear');
- }
- pointer-events: auto;
- }
- }
- }
-
- &:disabled {
- @include themify{
- color: themed('color-text-disabled');
- border: 1px solid themed('color-border-disabled');
- background-color: themed('color-bg-input-disabled');
- }
-
- &::placeholder {
- @include themify{
- color: themed('color-text-disabled');
- }
- }
- }
-
- &::placeholder {
- @include themify{
- color: themed('color-text-placeholder');
- }
- }
-
- &::selection {
- @include themify{
- color: themed('color-text-white');
- background-color: themed('color-bg-item-selected');
- }
- }
-
- &.error:not(:disabled) {
- @include themify{
- border: 1px solid themed('color-border-error');
- }
- }
-
- &::-ms-clear {
- display: none;
- }
-
- &:invalid {
- box-shadow: none;
- }
- }
-
- .cancel {
- @include md-box(display-none, absolute);
- @include themify{
- color: themed('color-text-clear');
- }
- font-size: $font-size-default;
- line-height: $line-height-small;
- padding: $grid-size;
- top: $grid-size;
- right: 8*$grid-size;
- border: none;
- background-color: transparent;
- outline: none;
- pointer-events: none;
- cursor: pointer;
-
- &:active, &:focus {
- @include themify{
- color: themed('color-text-clear');
- }
- pointer-events: auto;
- }
- }
-
- .chevron {
- @include md-box(absolute, block);
- font-size: $font-size-small;
- @include themify{
- color: themed('color-text-chevron');
- }
- right: 2*$grid-size;
- top: 2*$grid-size;
- pointer-events: none;
- }
-
- .dropdown:not(.above) {
- @include md-box(inline-block, absolute);
- left: 0px;
- top: 100%;
- }
-
- .dropdown.above {
- @include md-box(inline-block, absolute);
- left: 0px;
- top: -2*$grid-size;
- transform: translateY(-100%);
- }
-}
-
-.dropdown {
- @include md-box(inline-block, relative);
- width: 100%;
- max-height: $dropdown-max-height;
- overflow-y: auto;
- @include themify{
- background-color: themed('color-bg-input-rest');
- border: 1px solid themed('color-border-rest');
- }
-}
-
-.dropdown > div {
- @include md-box(inline-block, relative);
- width: 100%;
- padding: $grid-size 0px;
-}
-
-.option {
- @include md-box(block);
- width: 100%;
- min-height: $option-height;
- line-height: $line-height-small;
- padding: 0px 3*$grid-size;
-
- border: none;
- box-shadow: none;
- outline: none;
- border-radius: 0px;
- text-align: left;
- @include themify{
- background-color: themed('color-bg-input-rest');
- color: themed('color-text-rest');
- }
-
- &:not(.disabled) {
- cursor: pointer;
- }
-
- &.selected {
- @include themify{
- color: themed('color-text-rest');
- background-color: themed('color-bg-item-selected');
- }
- }
-
- &.hover:not(.disabled) {
- @include themify{
- &:not(.selected) {
- background-color: themed('color-bg-item-hover');
- }
-
- &.selected {
- background-color: themed('color-bg-item-selected');
- }
-
- &:active {
- color: themed('color-text-rest');
- background-color: themed('color-bg-item-selected');
- }
- }
- }
-
- &.disabled {
- @include themify{
- color: themed('color-text-disabled');
- }
- }
+@import '../../common/constants';
+@import '../../common/mixins';
+@import '../../common/color.controls';
+
+$line-height: 5*$grid-size;
+$line-height-small: 4*$grid-size;
+
+$dropdown-z-index: $z-index-medium-step;
+
+.combo-input-container {
+ @include md-box(flex, relative);
+ width: 100%;
+ font-family: $font-family-default;
+ @include themify{
+ color: themed('color-text-rest');
+ }
+ font-size: $font-size-default;
+ line-height: $line-height;
+
+ .input-container {
+ @include md-box(block, relative);
+ flex-grow: 1;
+ }
+
+ .input {
+ @include md-box(block, relative);
+ width: 100%;
+ height: $input-height;
+ padding: 2*$grid-size 8*$grid-size 2*$grid-size 3*$grid-size;
+ outline: none;
+ @include themify{
+ border: 1px solid themed('color-border-rest');
+ background-color: themed('color-bg-input-rest');
+ }
+
+ &:hover, &:focus, &:active {
+ // inputs look really weird with a dashed outline, so standardize
+ // on the solid selected border for all the above states:
+ @include themify{
+ border: 1px solid themed('color-border-selected');
+ }
+ }
+
+ &:focus, &:active, &.visible {
+ &:not(.disabled) {
+ padding-right: 16*$grid-size;
+ }
+
+ &.show-cancel:not(.disabled) {
+ + .cancel {
+ display: inline-block;
+ @include themify{
+ color: themed('color-text-clear');
+ }
+ pointer-events: auto;
+ }
+ }
+ }
+
+ &:disabled {
+ @include themify{
+ color: themed('color-text-disabled');
+ border: 1px solid themed('color-border-disabled');
+ background-color: themed('color-bg-input-disabled');
+ }
+
+ &::placeholder {
+ @include themify{
+ color: themed('color-text-disabled');
+ }
+ }
+ }
+
+ &::placeholder {
+ @include themify{
+ color: themed('color-text-placeholder');
+ }
+ }
+
+ &::selection {
+ @include themify{
+ color: themed('color-text-white');
+ background-color: themed('color-bg-item-selected');
+ }
+ }
+
+ &.error:not(:disabled) {
+ @include themify{
+ border: 1px solid themed('color-border-error');
+ }
+ }
+
+ &::-ms-clear {
+ display: none;
+ }
+
+ &:invalid {
+ box-shadow: none;
+ }
+ }
+
+ .cancel {
+ @include md-box(display-none, absolute);
+ @include themify{
+ color: themed('color-text-clear');
+ }
+ font-size: $font-size-default;
+ line-height: $line-height-small;
+ padding: $grid-size;
+ top: $grid-size;
+ right: 8*$grid-size;
+ border: none;
+ background-color: transparent;
+ outline: none;
+ pointer-events: none;
+ cursor: pointer;
+
+ &:active, &:focus {
+ @include themify{
+ color: themed('color-text-clear');
+ }
+ pointer-events: auto;
+ }
+ }
+
+ .chevron {
+ @include md-box(absolute, block);
+ font-size: $font-size-small;
+ @include themify{
+ color: themed('color-text-chevron');
+ }
+ right: 2*$grid-size;
+ top: 2*$grid-size;
+ pointer-events: none;
+ }
+
+ .dropdown:not(.above) {
+ @include md-box(inline-block, absolute);
+ left: 0px;
+ top: 100%;
+ }
+
+ .dropdown.above {
+ @include md-box(inline-block, absolute);
+ left: 0px;
+ top: -2*$grid-size;
+ transform: translateY(-100%);
+ }
+}
+
+.dropdown {
+ @include md-box(inline-block, relative);
+ width: 100%;
+ max-height: $dropdown-max-height;
+ overflow-y: auto;
+ @include themify{
+ background-color: themed('color-bg-input-rest');
+ border: 1px solid themed('color-border-rest');
+ }
+}
+
+.dropdown > div {
+ @include md-box(inline-block, relative);
+ width: 100%;
+ padding: $grid-size 0px;
+}
+
+.option {
+ @include md-box(block);
+ width: 100%;
+ min-height: $option-height;
+ line-height: $line-height-small;
+ padding: 0px 3*$grid-size;
+
+ border: none;
+ box-shadow: none;
+ outline: none;
+ border-radius: 0px;
+ text-align: left;
+ @include themify{
+ background-color: themed('color-bg-input-rest');
+ color: themed('color-text-rest');
+ }
+
+ &:not(.disabled) {
+ cursor: pointer;
+ }
+
+ &.selected {
+ @include themify{
+ color: themed('color-text-rest');
+ background-color: themed('color-bg-item-selected');
+ }
+ }
+
+ &.hover:not(.disabled) {
+ @include themify{
+ &:not(.selected) {
+ background-color: themed('color-bg-item-hover');
+ }
+
+ &.selected {
+ background-color: themed('color-bg-item-selected');
+ }
+
+ &:active {
+ color: themed('color-text-rest');
+ background-color: themed('color-bg-item-selected');
+ }
+ }
+ }
+
+ &.disabled {
+ @include themify{
+ color: themed('color-text-disabled');
+ }
+ }
}
\ No newline at end of file
diff --git a/lib/components/Input/ComboInput.spec.tsx b/src/components/Input/ComboInput.spec.tsx
similarity index 100%
rename from lib/components/Input/ComboInput.spec.tsx
rename to src/components/Input/ComboInput.spec.tsx
diff --git a/lib/components/Input/ComboInput.tsx b/src/components/Input/ComboInput.tsx
similarity index 100%
rename from lib/components/Input/ComboInput.tsx
rename to src/components/Input/ComboInput.tsx
diff --git a/lib/components/Input/NumberInput.md b/src/components/Input/NumberInput.md
similarity index 100%
rename from lib/components/Input/NumberInput.md
rename to src/components/Input/NumberInput.md
diff --git a/lib/components/Input/NumberInput.spec.tsx b/src/components/Input/NumberInput.spec.tsx
similarity index 100%
rename from lib/components/Input/NumberInput.spec.tsx
rename to src/components/Input/NumberInput.spec.tsx
diff --git a/lib/components/Input/NumberInput.tsx b/src/components/Input/NumberInput.tsx
similarity index 100%
rename from lib/components/Input/NumberInput.tsx
rename to src/components/Input/NumberInput.tsx
diff --git a/lib/components/Input/RadioInput.md b/src/components/Input/RadioInput.md
similarity index 100%
rename from lib/components/Input/RadioInput.md
rename to src/components/Input/RadioInput.md
diff --git a/lib/components/Input/RadioInput.scss b/src/components/Input/RadioInput.scss
similarity index 96%
rename from lib/components/Input/RadioInput.scss
rename to src/components/Input/RadioInput.scss
index efccf2a..90288bb 100644
--- a/lib/components/Input/RadioInput.scss
+++ b/src/components/Input/RadioInput.scss
@@ -1,124 +1,124 @@
-@import '../../common/constants';
-@import '../../common/mixins';
-@import '../../common/color.controls';
-
-$radio-input-size: 4*$grid-size;
-$line-height: 4*$grid-size;
-$outline-focus-border-width: 1px;
-
-.radio-container {
- @include md-box(block, relative);
- font-family: $font-family-default;
- @include themify{
- color: themed('color-text-rest');
- }
- font-size: $font-size-default;
- line-height: $line-height;
-
- & + &:not(.columns) {
- margin-top: 3*$grid-size;
- }
-
- &.columns {
- display: inline-block;
- margin-right: 2*$grid-size;
- }
-
- input {
- @include md-box(inline-block, absolute);
- top: 1px;
- left: 1px;
- width: 0px;
- height: 0px;
- border: none;
- outline: none;
- @include themify{
- background-color: themed('color-bg-radio-btn-rest');
- }
-
- &:focus ~ .radio-button:not(.disabled) {
- @include themify {
- border: 1px dashed themed('color-border-focus');
- }
- }
-
- &:hover:not(:checked) ~ .radio-button:not(.disabled) {
- @include themify{
- border: 1px solid themed('color-border-radio-btn-hover');
- }
- }
- }
-
- .radio-text {
- @include md-box(inline-block, relative);
- vertical-align: top;
- padding-left: 2*$grid-size;
- }
-
- .radio-fill {
- @include md-box(inline-block, absolute);
- left: $grid-size;
- top: $grid-size;
- width: 2*$grid-size;
- height: 2*$grid-size;
- border-radius: $grid-size;
-
- &:not(.disabled):hover {
- @include themify{
- background-color: themed('color-center-radio-btn-hover');
- }
- }
-
- &.selected {
- @include themify{
- background-color: themed('color-center-radio-btn-selected');
- &:hover, &:focus {
- background-color: themed('color-center-radio-btn-selected')
- }
- &.disabled {
- background-color: themed('color-center-radio-btn-disabled');
- }
- }
- }
- }
-
- .radio-wrapper {
- position: relative;
- }
-
- .radio-button {
- @include md-box(inline-block, relative);
- width: $radio-input-size;
- height: $radio-input-size;
- @include themify{
- background-color: themed('color-bg-radio-btn-rest');
- border: 1px solid themed('color-border-radio-btn-rest');
- }
- border-radius: $radio-input-size / 2;
- outline: none;
- vertical-align: top;
- @include themify{
- &.selected {
- border: 1px solid themed('color-border-radio-btn-selected');
- }
- &.disabled {
- border: 1px solid themed('color-border-radio-btn-disabled')
- }
- }
- }
-
- .radio-label {
- @include md-box(flex-row);
- align-items: center;
-
- &.disabled {
- @include themify{
- color: themed('color-text-disabled');
- }
- }
- }
-
- &.hidden {
- display: none;
- }
-}
+@import '../../common/constants';
+@import '../../common/mixins';
+@import '../../common/color.controls';
+
+$radio-input-size: 4*$grid-size;
+$line-height: 4*$grid-size;
+$outline-focus-border-width: 1px;
+
+.radio-container {
+ @include md-box(block, relative);
+ font-family: $font-family-default;
+ @include themify{
+ color: themed('color-text-rest');
+ }
+ font-size: $font-size-default;
+ line-height: $line-height;
+
+ & + &:not(.columns) {
+ margin-top: 3*$grid-size;
+ }
+
+ &.columns {
+ display: inline-block;
+ margin-right: 2*$grid-size;
+ }
+
+ input {
+ @include md-box(inline-block, absolute);
+ top: 1px;
+ left: 1px;
+ width: 0px;
+ height: 0px;
+ border: none;
+ outline: none;
+ @include themify{
+ background-color: themed('color-bg-radio-btn-rest');
+ }
+
+ &:focus ~ .radio-button:not(.disabled) {
+ @include themify {
+ border: 1px dashed themed('color-border-focus');
+ }
+ }
+
+ &:hover:not(:checked) ~ .radio-button:not(.disabled) {
+ @include themify{
+ border: 1px solid themed('color-border-radio-btn-hover');
+ }
+ }
+ }
+
+ .radio-text {
+ @include md-box(inline-block, relative);
+ vertical-align: top;
+ padding-left: 2*$grid-size;
+ }
+
+ .radio-fill {
+ @include md-box(inline-block, absolute);
+ left: $grid-size;
+ top: $grid-size;
+ width: 2*$grid-size;
+ height: 2*$grid-size;
+ border-radius: $grid-size;
+
+ &:not(.disabled):hover {
+ @include themify{
+ background-color: themed('color-center-radio-btn-hover');
+ }
+ }
+
+ &.selected {
+ @include themify{
+ background-color: themed('color-center-radio-btn-selected');
+ &:hover, &:focus {
+ background-color: themed('color-center-radio-btn-selected')
+ }
+ &.disabled {
+ background-color: themed('color-center-radio-btn-disabled');
+ }
+ }
+ }
+ }
+
+ .radio-wrapper {
+ position: relative;
+ }
+
+ .radio-button {
+ @include md-box(inline-block, relative);
+ width: $radio-input-size;
+ height: $radio-input-size;
+ @include themify{
+ background-color: themed('color-bg-radio-btn-rest');
+ border: 1px solid themed('color-border-radio-btn-rest');
+ }
+ border-radius: $radio-input-size / 2;
+ outline: none;
+ vertical-align: top;
+ @include themify{
+ &.selected {
+ border: 1px solid themed('color-border-radio-btn-selected');
+ }
+ &.disabled {
+ border: 1px solid themed('color-border-radio-btn-disabled')
+ }
+ }
+ }
+
+ .radio-label {
+ @include md-box(flex-row);
+ align-items: center;
+
+ &.disabled {
+ @include themify{
+ color: themed('color-text-disabled');
+ }
+ }
+ }
+
+ &.hidden {
+ display: none;
+ }
+}
diff --git a/lib/components/Input/RadioInput.tsx b/src/components/Input/RadioInput.tsx
similarity index 100%
rename from lib/components/Input/RadioInput.tsx
rename to src/components/Input/RadioInput.tsx
diff --git a/lib/components/Input/SelectInput.md b/src/components/Input/SelectInput.md
similarity index 100%
rename from lib/components/Input/SelectInput.md
rename to src/components/Input/SelectInput.md
diff --git a/lib/components/Input/SelectInput.scss b/src/components/Input/SelectInput.scss
similarity index 96%
rename from lib/components/Input/SelectInput.scss
rename to src/components/Input/SelectInput.scss
index 744527e..b47f95c 100644
--- a/lib/components/Input/SelectInput.scss
+++ b/src/components/Input/SelectInput.scss
@@ -1,96 +1,96 @@
-@import '../../common/constants';
-@import '../../common/mixins';
-@import '../../common/color.controls';
-
-$line-height: 4*$grid-size;
-
-.combo-container {
- @include md-box(relative, block);
- width: 100%;
- font-family: $font-family-default;
- @include themify{
- color: themed('color-text-rest');
- }
- font-size: $font-size-default;
- line-height: $line-height;
-
- .arrow {
- @include md-box(absolute, block);
- font-size: $font-size-small;
- @include themify{
- color: themed('color-text-chevron');
- }
- right: 2*$grid-size;
- top: 2*$grid-size;
- pointer-events: none;
- }
-
- .combo {
- @include md-box();
- width: 100%;
- height: $input-height;
- padding: 0 6*$grid-size 0 3*$grid-size;
- outline: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- border-radius: 0px;
- @include themify{
- border: 1px solid themed('color-border-rest');
- background-color: themed('color-bg-input-rest');
- }
-
- option {
- height: $option-height;
-
- &.option-hidden {
- display: none;
- }
-
- &:first {
- display: none;
- }
-
- &:checked {
- @include themify{
- background-color: themed('color-bg-item-selected');
- color: themed('color-text-white');
- }
- }
-
- &:disabled {
- @include themify{
- color: themed('color-text-disabled');
- border: 1px solid themed('color-border-disabled');
- background-color: themed('color-bg-input-disabled');
- }
- }
-
- &:hidden {
- display: none;
- }
- }
-
- @include themify{
- &:active, &:hover, &:focus {
- // inputs look really weird with a dashed outline, so standardize
- // on the solid selected border for all the above states:
- border: 1px solid themed('color-border-selected');
- }
-
- &:disabled {
- color: themed('color-text-disabled');
- border: 1px solid themed('color-border-disabled');
- background-color: themed('color-bg-input-disabled');
- }
- &::selection {
- color: themed('color-text-white');
- background-color: themed('color-bg-item-selected');
- }
-
- &.error:not(:disabled) {
- border: 1px solid themed('color-border-error');
- }
- }
- }
-}
+@import '../../common/constants';
+@import '../../common/mixins';
+@import '../../common/color.controls';
+
+$line-height: 4*$grid-size;
+
+.combo-container {
+ @include md-box(relative, block);
+ width: 100%;
+ font-family: $font-family-default;
+ @include themify{
+ color: themed('color-text-rest');
+ }
+ font-size: $font-size-default;
+ line-height: $line-height;
+
+ .arrow {
+ @include md-box(absolute, block);
+ font-size: $font-size-small;
+ @include themify{
+ color: themed('color-text-chevron');
+ }
+ right: 2*$grid-size;
+ top: 2*$grid-size;
+ pointer-events: none;
+ }
+
+ .combo {
+ @include md-box();
+ width: 100%;
+ height: $input-height;
+ padding: 0 6*$grid-size 0 3*$grid-size;
+ outline: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ border-radius: 0px;
+ @include themify{
+ border: 1px solid themed('color-border-rest');
+ background-color: themed('color-bg-input-rest');
+ }
+
+ option {
+ height: $option-height;
+
+ &.option-hidden {
+ display: none;
+ }
+
+ &:first {
+ display: none;
+ }
+
+ &:checked {
+ @include themify{
+ background-color: themed('color-bg-item-selected');
+ color: themed('color-text-white');
+ }
+ }
+
+ &:disabled {
+ @include themify{
+ color: themed('color-text-disabled');
+ border: 1px solid themed('color-border-disabled');
+ background-color: themed('color-bg-input-disabled');
+ }
+ }
+
+ &:hidden {
+ display: none;
+ }
+ }
+
+ @include themify{
+ &:active, &:hover, &:focus {
+ // inputs look really weird with a dashed outline, so standardize
+ // on the solid selected border for all the above states:
+ border: 1px solid themed('color-border-selected');
+ }
+
+ &:disabled {
+ color: themed('color-text-disabled');
+ border: 1px solid themed('color-border-disabled');
+ background-color: themed('color-bg-input-disabled');
+ }
+ &::selection {
+ color: themed('color-text-white');
+ background-color: themed('color-bg-item-selected');
+ }
+
+ &.error:not(:disabled) {
+ border: 1px solid themed('color-border-error');
+ }
+ }
+ }
+}
diff --git a/lib/components/Input/SelectInput.tsx b/src/components/Input/SelectInput.tsx
similarity index 100%
rename from lib/components/Input/SelectInput.tsx
rename to src/components/Input/SelectInput.tsx
diff --git a/lib/components/Input/TextArea.md b/src/components/Input/TextArea.md
similarity index 100%
rename from lib/components/Input/TextArea.md
rename to src/components/Input/TextArea.md
diff --git a/lib/components/Input/TextArea.scss b/src/components/Input/TextArea.scss
similarity index 96%
rename from lib/components/Input/TextArea.scss
rename to src/components/Input/TextArea.scss
index 6f5a0d3..1be62fb 100644
--- a/lib/components/Input/TextArea.scss
+++ b/src/components/Input/TextArea.scss
@@ -1,74 +1,74 @@
-@import '../../common/constants';
-@import '../../common/mixins';
-@import '../../common/color.controls';
-
-$text-area-min-height: 13*$grid-size;
-$line-height: 5*$grid-size;
-
-.textarea-container {
- @include md-box(block, relative);
-
- .textarea-ghost {
- position: absolute;
- top: 0px;
- left: 0px;
- right: 0px;
- visibility: hidden;
- }
-}
-
-.textarea {
- @include md-box(block, relative);
- width: 100%;
- min-height: $text-area-min-height;
- padding: 2*$grid-size 2*$grid-size 2*$grid-size 3*$grid-size;
-
- font-family: $font-family-default;
- @include themify {
- color: themed('color-text-rest');
- border: 1px solid themed('color-border-rest');
- background-color: themed('color-bg-input-rest');
- }
- font-size: $font-size-default;
- line-height: $line-height;
- outline: none;
-
- @include themify{
- &:active, &:hover, &:focus {
- // inputs look really weird with a dashed outline, so standardize
- // on the solid selected border for all the above states:
- border: 1px solid themed('color-border-selected');
- }
-
- &:disabled {
- color: themed('color-text-disabled');
- border: 1px solid themed('color-border-disabled');
- background-color: themed('color-bg-input-disabled');
-
- &::placeholder {
- color: themed('color-text-disabled');
- }
- }
-
- &::placeholder {
- color: themed('color-text-placeholder');
- }
-
- &::selection {
- color: themed('color-text-white');
- background-color: themed('color-bg-item-selected');
- }
-
- &.error:not(:disabled) {
- border: 1px solid themed('color-border-error');
- }
- }
-
- &::-ms-clear {
- display: none;
- }
-
- &:invalid {
- box-shadow: none;
- }
-}
+@import '../../common/constants';
+@import '../../common/mixins';
+@import '../../common/color.controls';
+
+$text-area-min-height: 13*$grid-size;
+$line-height: 5*$grid-size;
+
+.textarea-container {
+ @include md-box(block, relative);
+
+ .textarea-ghost {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ visibility: hidden;
+ }
+}
+
+.textarea {
+ @include md-box(block, relative);
+ width: 100%;
+ min-height: $text-area-min-height;
+ padding: 2*$grid-size 2*$grid-size 2*$grid-size 3*$grid-size;
+
+ font-family: $font-family-default;
+ @include themify {
+ color: themed('color-text-rest');
+ border: 1px solid themed('color-border-rest');
+ background-color: themed('color-bg-input-rest');
+ }
+ font-size: $font-size-default;
+ line-height: $line-height;
+ outline: none;
+
+ @include themify{
+ &:active, &:hover, &:focus {
+ // inputs look really weird with a dashed outline, so standardize
+ // on the solid selected border for all the above states:
+ border: 1px solid themed('color-border-selected');
+ }
+
+ &:disabled {
+ color: themed('color-text-disabled');
+ border: 1px solid themed('color-border-disabled');
+ background-color: themed('color-bg-input-disabled');
+
+ &::placeholder {
+ color: themed('color-text-disabled');
+ }
+ }
+
+ &::placeholder {
+ color: themed('color-text-placeholder');
+ }
+
+ &::selection {
+ color: themed('color-text-white');
+ background-color: themed('color-bg-item-selected');
+ }
+
+ &.error:not(:disabled) {
+ border: 1px solid themed('color-border-error');
+ }
+ }
+
+ &::-ms-clear {
+ display: none;
+ }
+
+ &:invalid {
+ box-shadow: none;
+ }
+}
diff --git a/lib/components/Input/TextArea.tsx b/src/components/Input/TextArea.tsx
similarity index 100%
rename from lib/components/Input/TextArea.tsx
rename to src/components/Input/TextArea.tsx
diff --git a/lib/components/Input/TextInput.md b/src/components/Input/TextInput.md
similarity index 100%
rename from lib/components/Input/TextInput.md
rename to src/components/Input/TextInput.md
diff --git a/lib/components/Input/TextInput.scss b/src/components/Input/TextInput.scss
similarity index 96%
rename from lib/components/Input/TextInput.scss
rename to src/components/Input/TextInput.scss
index b446e82..c9fc8b5 100644
--- a/lib/components/Input/TextInput.scss
+++ b/src/components/Input/TextInput.scss
@@ -1,167 +1,167 @@
-@import '../../common/constants';
-@import '../../common/mixins';
-@import '../../common/color.controls';
-
-$line-height: 5*$grid-size;
-$line-height-small: 4*$grid-size;
-
-
-.text-input-container {
- @include md-box(flex, relative);
- width: 100%;
- font-family: $font-family-default;
- font-size: $font-size-default;
- line-height: $line-height;
-
- .input-container {
- @include md-box(block, relative);
- flex-grow: 1;
- }
-
- .input {
- @include md-box(block, relative);
- width: 100%;
- height: $input-height;
- padding: 2*$grid-size 2*$grid-size 2*$grid-size 3*$grid-size;
- @include themify{
- border: 1px solid themed('color-border-rest');
- color: themed('color-text-rest');
- background-color: themed('color-bg-input-rest');
- }
- outline: none;
- max-width: 100%;
-
- &:valid {
- padding: 2*$grid-size 3*$grid-size 2*$grid-size 3*$grid-size;
- }
-
- &:active, &:hover, &:focus {
- // inputs look really weird with a dashed outline, so standardize
- // on the solid selected border for all the above states:
-
- @include themify{
- border: 1px solid themed('color-border-selected');
- }
- }
-
- &:active, &:focus {
- &.show-cancel:not(:disabled) {
- padding-right: 8*$grid-size;
-
- + .cancel {
- @include themify{
- color: themed('color-text-clear');
- }
- pointer-events: auto;
- }
- }
- }
-
- @include themify{
- &:disabled {
- color: themed('color-text-disabled');
- border: 1px solid themed('color-border-disabled');
- background-color: themed('color-bg-input-disabled');
- }
-
- &::placeholder {
- color: themed('color-text-disabled');
- }
-
- &::placeholder {
- color: themed('color-text-placeholder');
- }
-
- &::selection {
- color: themed('color-text-white');
- background-color: themed('color-bg-item-selected');
- }
-
- &.error:not(:disabled) {
- border: 1px solid themed('color-border-error');
- }
- }
-
- &::-ms-clear {
- display: none;
- }
-
- &:invalid {
- box-shadow: none;
- }
- }
-
- .cancel {
- @include md-box(absolute, float-right);
- color: transparent;
- font-size: $font-size-small;
- line-height: $line-height-small;
- padding: $grid-size;
- top: $grid-size;
- right: 2*$grid-size;
- border: none;
- background-color: transparent;
- outline: none;
- pointer-events: none;
- cursor: pointer;
-
- &:active {
- @include themify{
- color: themed('color-text-clear');
- }
- pointer-events: auto;
- }
-
- &.no-cancel {
- display: none;
- }
- }
-
- .prefix {
- @include md-box(table-cell, relative);
- @include themify{
- color: themed('color-text-rest');
- }
- padding-right: 2*$grid-size;
- height: $input-height;
- line-height: $input-height;
- white-space: nowrap;
- flex-grow: 0;
- }
-
- .postfix {
- @include md-box(inline-block, relative);
- @include themify{
- color: themed('color-text-rest');
- }
- padding-left: 2*$grid-size;
- height: $input-height;
- line-height: $input-height;
- white-space: nowrap;
- flex-grow: 0;
- }
-}
-
-.prefix-addon {
- background-color: transparent;
- padding-right: 2*$grid-size;
-
- @include themify{
- border-left: 1px solid themed('color-border-rest');
- border-top: 1px solid themed('color-border-rest');
- border-bottom: 1px solid themed('color-border-rest');
- color: themed('color-text-rest');
- }
-}
-
-.postfix-addon {
- background-color: transparent;
- padding-left: 2*$grid-size;
-
- @include themify {
- border-right: 1px solid themed('color-border-rest');
- border-top: 1px solid themed('color-border-rest');
- border-bottom: 1px solid themed('color-border-rest');
- color: themed('color-text-rest');
- }
-}
+@import '../../common/constants';
+@import '../../common/mixins';
+@import '../../common/color.controls';
+
+$line-height: 5*$grid-size;
+$line-height-small: 4*$grid-size;
+
+
+.text-input-container {
+ @include md-box(flex, relative);
+ width: 100%;
+ font-family: $font-family-default;
+ font-size: $font-size-default;
+ line-height: $line-height;
+
+ .input-container {
+ @include md-box(block, relative);
+ flex-grow: 1;
+ }
+
+ .input {
+ @include md-box(block, relative);
+ width: 100%;
+ height: $input-height;
+ padding: 2*$grid-size 2*$grid-size 2*$grid-size 3*$grid-size;
+ @include themify{
+ border: 1px solid themed('color-border-rest');
+ color: themed('color-text-rest');
+ background-color: themed('color-bg-input-rest');
+ }
+ outline: none;
+ max-width: 100%;
+
+ &:valid {
+ padding: 2*$grid-size 3*$grid-size 2*$grid-size 3*$grid-size;
+ }
+
+ &:active, &:hover, &:focus {
+ // inputs look really weird with a dashed outline, so standardize
+ // on the solid selected border for all the above states:
+
+ @include themify{
+ border: 1px solid themed('color-border-selected');
+ }
+ }
+
+ &:active, &:focus {
+ &.show-cancel:not(:disabled) {
+ padding-right: 8*$grid-size;
+
+ + .cancel {
+ @include themify{
+ color: themed('color-text-clear');
+ }
+ pointer-events: auto;
+ }
+ }
+ }
+
+ @include themify{
+ &:disabled {
+ color: themed('color-text-disabled');
+ border: 1px solid themed('color-border-disabled');
+ background-color: themed('color-bg-input-disabled');
+ }
+
+ &::placeholder {
+ color: themed('color-text-disabled');
+ }
+
+ &::placeholder {
+ color: themed('color-text-placeholder');
+ }
+
+ &::selection {
+ color: themed('color-text-white');
+ background-color: themed('color-bg-item-selected');
+ }
+
+ &.error:not(:disabled) {
+ border: 1px solid themed('color-border-error');
+ }
+ }
+
+ &::-ms-clear {
+ display: none;
+ }
+
+ &:invalid {
+ box-shadow: none;
+ }
+ }
+
+ .cancel {
+ @include md-box(absolute, float-right);
+ color: transparent;
+ font-size: $font-size-small;
+ line-height: $line-height-small;
+ padding: $grid-size;
+ top: $grid-size;
+ right: 2*$grid-size;
+ border: none;
+ background-color: transparent;
+ outline: none;
+ pointer-events: none;
+ cursor: pointer;
+
+ &:active {
+ @include themify{
+ color: themed('color-text-clear');
+ }
+ pointer-events: auto;
+ }
+
+ &.no-cancel {
+ display: none;
+ }
+ }
+
+ .prefix {
+ @include md-box(table-cell, relative);
+ @include themify{
+ color: themed('color-text-rest');
+ }
+ padding-right: 2*$grid-size;
+ height: $input-height;
+ line-height: $input-height;
+ white-space: nowrap;
+ flex-grow: 0;
+ }
+
+ .postfix {
+ @include md-box(inline-block, relative);
+ @include themify{
+ color: themed('color-text-rest');
+ }
+ padding-left: 2*$grid-size;
+ height: $input-height;
+ line-height: $input-height;
+ white-space: nowrap;
+ flex-grow: 0;
+ }
+}
+
+.prefix-addon {
+ background-color: transparent;
+ padding-right: 2*$grid-size;
+
+ @include themify{
+ border-left: 1px solid themed('color-border-rest');
+ border-top: 1px solid themed('color-border-rest');
+ border-bottom: 1px solid themed('color-border-rest');
+ color: themed('color-text-rest');
+ }
+}
+
+.postfix-addon {
+ background-color: transparent;
+ padding-left: 2*$grid-size;
+
+ @include themify {
+ border-right: 1px solid themed('color-border-rest');
+ border-top: 1px solid themed('color-border-rest');
+ border-bottom: 1px solid themed('color-border-rest');
+ color: themed('color-text-rest');
+ }
+}
diff --git a/lib/components/Input/TextInput.tsx b/src/components/Input/TextInput.tsx
similarity index 100%
rename from lib/components/Input/TextInput.tsx
rename to src/components/Input/TextInput.tsx
diff --git a/lib/components/Input/index.ts b/src/components/Input/index.ts
similarity index 100%
rename from lib/components/Input/index.ts
rename to src/components/Input/index.ts
diff --git a/lib/components/List/GenericManagementList.md b/src/components/List/GenericManagementList.md
similarity index 100%
rename from lib/components/List/GenericManagementList.md
rename to src/components/List/GenericManagementList.md
diff --git a/lib/components/List/GenericManagementList.scss b/src/components/List/GenericManagementList.scss
similarity index 96%
rename from lib/components/List/GenericManagementList.scss
rename to src/components/List/GenericManagementList.scss
index 36e882d..e0d50df 100644
--- a/lib/components/List/GenericManagementList.scss
+++ b/src/components/List/GenericManagementList.scss
@@ -1,107 +1,107 @@
-@import '../../common/constants';
-@import '../../common/mixins';
-@import '../../common/color.controls';
-
-$management-list-column-basis: 25*$grid-size;
-$management-list-row-height: 12*$grid-size;
-$management-list-select-all-width: 8*$grid-size;
-
-$line-height-small: 4*$grid-size;
-$line-height-sort: 3*$grid-size;
-
-.list-container {
- @include md-box(flex, relative);
- width: 100%;
-
- .column {
- @include md-box(block, relative);
- flex-basis: $management-list-column-basis;
-
- &.auto-width {
- flex-grow: 1;
- flex-shrink: 0;
- }
-
- &.checkbox {
- flex: 0 0 $management-list-select-all-width;
- }
-
- &:first-child {
- .column-header {
- padding-left: 5*$grid-size;
- }
-
- .column-content {
- padding-left: 5*$grid-size;
- }
- }
-
- .column-header {
- @include md-box(block, relative);
- @include md-button-reset();
-
- font-family: $font-family-din-regular;
- font-size: $font-size-small;
- line-height: $line-height-small;
- @include themify {
- color: themed('color-text-rest');
- }
-
- padding-top: 2*$grid-size;
- padding-right: 5*$grid-size;
- vertical-align: bottom;
-
- white-space: nowrap;
-
- &.checkbox {
- padding-right: 3*$grid-size;
- }
-
- .checkbox-empty {
- height: $line-height-small;
- }
-
- &.checkbox-empty {
- cursor: initial;
- }
-
- .sort-direction::before {
- line-height: $line-height-sort;
- margin-left: 2*$grid-size;
- }
- }
-
- .column-content {
- @include md-box(inline-block, relative);
- font-family: $font-family-default;
- font-size: $font-size-default;
- line-height: $line-height-small;
- @include themify {
- color: themed('color-text-rest');
- background-color: themed('color-bg-table');
- }
-
- vertical-align: bottom;
-
- width: 100%;
- height: $management-list-row-height;
- padding-top: 4*$grid-size;
- padding-right: 5*$grid-size;
- margin-top: 2*$grid-size;
-
- white-space: nowrap;
-
- &:first-child {
- padding-left: 5*$grid-size;
- }
-
- &.checkbox {
- padding-right: 3*$grid-size;
- }
- }
-
- .select-all-label {
- display: none;
- }
- }
-}
+@import '../../common/constants';
+@import '../../common/mixins';
+@import '../../common/color.controls';
+
+$management-list-column-basis: 25*$grid-size;
+$management-list-row-height: 12*$grid-size;
+$management-list-select-all-width: 8*$grid-size;
+
+$line-height-small: 4*$grid-size;
+$line-height-sort: 3*$grid-size;
+
+.list-container {
+ @include md-box(flex, relative);
+ width: 100%;
+
+ .column {
+ @include md-box(block, relative);
+ flex-basis: $management-list-column-basis;
+
+ &.auto-width {
+ flex-grow: 1;
+ flex-shrink: 0;
+ }
+
+ &.checkbox {
+ flex: 0 0 $management-list-select-all-width;
+ }
+
+ &:first-child {
+ .column-header {
+ padding-left: 5*$grid-size;
+ }
+
+ .column-content {
+ padding-left: 5*$grid-size;
+ }
+ }
+
+ .column-header {
+ @include md-box(block, relative);
+ @include md-button-reset();
+
+ font-family: $font-family-din-regular;
+ font-size: $font-size-small;
+ line-height: $line-height-small;
+ @include themify {
+ color: themed('color-text-rest');
+ }
+
+ padding-top: 2*$grid-size;
+ padding-right: 5*$grid-size;
+ vertical-align: bottom;
+
+ white-space: nowrap;
+
+ &.checkbox {
+ padding-right: 3*$grid-size;
+ }
+
+ .checkbox-empty {
+ height: $line-height-small;
+ }
+
+ &.checkbox-empty {
+ cursor: initial;
+ }
+
+ .sort-direction::before {
+ line-height: $line-height-sort;
+ margin-left: 2*$grid-size;
+ }
+ }
+
+ .column-content {
+ @include md-box(inline-block, relative);
+ font-family: $font-family-default;
+ font-size: $font-size-default;
+ line-height: $line-height-small;
+ @include themify {
+ color: themed('color-text-rest');
+ background-color: themed('color-bg-table');
+ }
+
+ vertical-align: bottom;
+
+ width: 100%;
+ height: $management-list-row-height;
+ padding-top: 4*$grid-size;
+ padding-right: 5*$grid-size;
+ margin-top: 2*$grid-size;
+
+ white-space: nowrap;
+
+ &:first-child {
+ padding-left: 5*$grid-size;
+ }
+
+ &.checkbox {
+ padding-right: 3*$grid-size;
+ }
+ }
+
+ .select-all-label {
+ display: none;
+ }
+ }
+}
diff --git a/lib/components/List/GenericManagementList.spec.tsx b/src/components/List/GenericManagementList.spec.tsx
similarity index 100%
rename from lib/components/List/GenericManagementList.spec.tsx
rename to src/components/List/GenericManagementList.spec.tsx
diff --git a/lib/components/List/GenericManagementList.tsx b/src/components/List/GenericManagementList.tsx
similarity index 100%
rename from lib/components/List/GenericManagementList.tsx
rename to src/components/List/GenericManagementList.tsx
diff --git a/lib/components/List/ManagementList.md b/src/components/List/ManagementList.md
similarity index 100%
rename from lib/components/List/ManagementList.md
rename to src/components/List/ManagementList.md
diff --git a/lib/components/List/ManagementList.tsx b/src/components/List/ManagementList.tsx
similarity index 100%
rename from lib/components/List/ManagementList.tsx
rename to src/components/List/ManagementList.tsx
diff --git a/lib/components/List/index.ts b/src/components/List/index.ts
similarity index 100%
rename from lib/components/List/index.ts
rename to src/components/List/index.ts
diff --git a/lib/components/Loader/HorizontalLoader.md b/src/components/Loader/HorizontalLoader.md
similarity index 100%
rename from lib/components/Loader/HorizontalLoader.md
rename to src/components/Loader/HorizontalLoader.md
diff --git a/lib/components/Loader/HorizontalLoader.scss b/src/components/Loader/HorizontalLoader.scss
similarity index 96%
rename from lib/components/Loader/HorizontalLoader.scss
rename to src/components/Loader/HorizontalLoader.scss
index dc165ca..890091a 100644
--- a/lib/components/Loader/HorizontalLoader.scss
+++ b/src/components/Loader/HorizontalLoader.scss
@@ -1,80 +1,80 @@
-@import '../../common/constants';
-@import '../../common/mixins';
-@import '../../common/color.controls';
-
-@mixin horizontal-loader-keyframes($name, $num-dots: 6, $diameter: 6px, $gap: 12px) {
- $pixels: ($num-dots / 2) * ($diameter + $gap);
- @keyframes #{$name} {
- 0% {
- opacity: 0;
- transform: translateX(0);
- }
- 15% {
- opacity: 0;
- transform: translateX(0);
- }
- 33% {
- opacity: 1;
- transform: translateX(calc(50% - 48px));
- }
- 66% {
- opacity: 1;
- transform: translateX(calc(50% - 48px));
- }
- 85% {
- opacity: 0;
- transform: translateX(100%);
- }
- 100% {
- opacity: 0;
- transform: translateX(100%);
- }
- }
-}
-
-@mixin horizontal-loader-child($name, $num, $num-dots, $diameter, $gap, $duration, $delay, $timing) {
- $class-name: '.#{$name}';
- $inner-class-name: '#{$class-name}-inner';
- $padding: ($gap + $diameter) * ($num - 1);
- $total-delay: ($num-dots - $num) * $delay;
-
- #{$class-name} #{$inner-class-name}:nth-child(#{$num}) {
- animation: #{$name} $duration $total-delay infinite $timing;
- padding-left: $padding;
- }
-}
-
-@mixin horizontal-loader($name, $num-dots: 6, $diameter: 6px, $gap: 12px, $duration: 3s, $delay: 200ms, $timing: ease-in-out, $height: 20px) {
- $class-name: '.#{$name}';
- $inner-class-name: '#{$class-name}-inner';
-
- @include horizontal-loader-keyframes($name, $num-dots, $diameter, $gap);
-
- #{$class-name} {
- @include md-box(inline-block, relative, hidden);
- height: $height;
- width: 100%;
- }
-
- #{$inner-class-name} {
- @include md-box(inline-block, absolute);
- width: 100%;
- opacity: 0;
- }
-
- #{$inner-class-name} > div {
- @include md-box(inline-block);
- width: $diameter;
- height: $diameter;
- border-radius: $diameter;
- @include themify {
- background-color: themed('color-text-rest');
- }
- }
-
- @for $num from 1 through $num-dots {
- @include horizontal-loader-child($name, $num, $num-dots, $diameter, $gap, $duration, $delay, $timing);
- }
-}
-
-@include horizontal-loader('horizontal-loader');
+@import '../../common/constants';
+@import '../../common/mixins';
+@import '../../common/color.controls';
+
+@mixin horizontal-loader-keyframes($name, $num-dots: 6, $diameter: 6px, $gap: 12px) {
+ $pixels: ($num-dots / 2) * ($diameter + $gap);
+ @keyframes #{$name} {
+ 0% {
+ opacity: 0;
+ transform: translateX(0);
+ }
+ 15% {
+ opacity: 0;
+ transform: translateX(0);
+ }
+ 33% {
+ opacity: 1;
+ transform: translateX(calc(50% - 48px));
+ }
+ 66% {
+ opacity: 1;
+ transform: translateX(calc(50% - 48px));
+ }
+ 85% {
+ opacity: 0;
+ transform: translateX(100%);
+ }
+ 100% {
+ opacity: 0;
+ transform: translateX(100%);
+ }
+ }
+}
+
+@mixin horizontal-loader-child($name, $num, $num-dots, $diameter, $gap, $duration, $delay, $timing) {
+ $class-name: '.#{$name}';
+ $inner-class-name: '#{$class-name}-inner';
+ $padding: ($gap + $diameter) * ($num - 1);
+ $total-delay: ($num-dots - $num) * $delay;
+
+ #{$class-name} #{$inner-class-name}:nth-child(#{$num}) {
+ animation: #{$name} $duration $total-delay infinite $timing;
+ padding-left: $padding;
+ }
+}
+
+@mixin horizontal-loader($name, $num-dots: 6, $diameter: 6px, $gap: 12px, $duration: 3s, $delay: 200ms, $timing: ease-in-out, $height: 20px) {
+ $class-name: '.#{$name}';
+ $inner-class-name: '#{$class-name}-inner';
+
+ @include horizontal-loader-keyframes($name, $num-dots, $diameter, $gap);
+
+ #{$class-name} {
+ @include md-box(inline-block, relative, hidden);
+ height: $height;
+ width: 100%;
+ }
+
+ #{$inner-class-name} {
+ @include md-box(inline-block, absolute);
+ width: 100%;
+ opacity: 0;
+ }
+
+ #{$inner-class-name} > div {
+ @include md-box(inline-block);
+ width: $diameter;
+ height: $diameter;
+ border-radius: $diameter;
+ @include themify {
+ background-color: themed('color-text-rest');
+ }
+ }
+
+ @for $num from 1 through $num-dots {
+ @include horizontal-loader-child($name, $num, $num-dots, $diameter, $gap, $duration, $delay, $timing);
+ }
+}
+
+@include horizontal-loader('horizontal-loader');
diff --git a/lib/components/Loader/HorizontalLoader.tsx b/src/components/Loader/HorizontalLoader.tsx
similarity index 100%
rename from lib/components/Loader/HorizontalLoader.tsx
rename to src/components/Loader/HorizontalLoader.tsx
diff --git a/lib/components/Loader/Spinner.md b/src/components/Loader/Spinner.md
similarity index 100%
rename from lib/components/Loader/Spinner.md
rename to src/components/Loader/Spinner.md
diff --git a/lib/components/Loader/Spinner.scss b/src/components/Loader/Spinner.scss
similarity index 96%
rename from lib/components/Loader/Spinner.scss
rename to src/components/Loader/Spinner.scss
index 50baf73..33a4ed8 100644
--- a/lib/components/Loader/Spinner.scss
+++ b/src/components/Loader/Spinner.scss
@@ -1,72 +1,72 @@
-@import '../../common/mixins';
-
-@mixin spinner-keyframes($name, $num-dots: 6, $diameter: 6px, $gap: 12px) {
- $pixels: ($num-dots / 2) * ($diameter + $gap);
- @keyframes #{$name} {
- 0% {
- opacity: 0;
- transform: rotate(0);
- }
- 33% {
- opacity: 1;
- transform: rotate(180deg);
- }
- 66% {
- opacity: 1;
- transform: rotate(180deg);
- }
- 100% {
- opacity: 0;
- transform: rotate(360deg);
- }
- }
-}
-
-@mixin spinner-child($name, $num, $num-dots, $diameter, $gap, $duration, $delay, $timing) {
- $class-name: '.#{$name}';
- $inner-class-name: '#{$class-name}-inner';
- $padding: ($gap + $diameter) * ($num - 1);
- $total-delay: ($num-dots - $num) * $delay;
-
- #{$class-name} #{$inner-class-name}:nth-child(#{$num}) {
- animation: #{$name} $duration $total-delay infinite $timing;
- padding-left: $padding;
- }
-}
-
-@mixin spinner($name, $num-dots: 6, $diameter: 6px, $gap: 12px, $duration: 3s, $delay: 200ms, $timing: ease-in-out, $height: 20px, $color: black) {
- $class-name: '.#{$name}';
- $inner-class-name: '#{$class-name}-inner';
-
- @include spinner-keyframes($name, $num-dots, $diameter, $gap);
-
- #{$class-name} {
- @include md-box(inline-block, relative, hidden);
- height: 100%;
- width: 100%;
- }
-
- #{$inner-class-name} {
- @include md-box(inline-block, absolute);
- width: 100%;
- height: 100%;
- opacity: 1;
- // transform: rotate(45deg);
- }
-
- #{$inner-class-name} > div {
- @include md-box(inline-block, relative);
- width: $diameter;
- height: $diameter;
- border-radius: $diameter;
- background-color: $color;
- margin-left: auto;
- margin-right: auto;
- }
-
- @for $num from 1 through $num-dots {
- @include spinner-child($name, $num, $num-dots, $diameter, $gap, $duration, $delay, $timing);
- }
-}
-
-@include spinner('cs-loader');
+@import '../../common/mixins';
+
+@mixin spinner-keyframes($name, $num-dots: 6, $diameter: 6px, $gap: 12px) {
+ $pixels: ($num-dots / 2) * ($diameter + $gap);
+ @keyframes #{$name} {
+ 0% {
+ opacity: 0;
+ transform: rotate(0);
+ }
+ 33% {
+ opacity: 1;
+ transform: rotate(180deg);
+ }
+ 66% {
+ opacity: 1;
+ transform: rotate(180deg);
+ }
+ 100% {
+ opacity: 0;
+ transform: rotate(360deg);
+ }
+ }
+}
+
+@mixin spinner-child($name, $num, $num-dots, $diameter, $gap, $duration, $delay, $timing) {
+ $class-name: '.#{$name}';
+ $inner-class-name: '#{$class-name}-inner';
+ $padding: ($gap + $diameter) * ($num - 1);
+ $total-delay: ($num-dots - $num) * $delay;
+
+ #{$class-name} #{$inner-class-name}:nth-child(#{$num}) {
+ animation: #{$name} $duration $total-delay infinite $timing;
+ padding-left: $padding;
+ }
+}
+
+@mixin spinner($name, $num-dots: 6, $diameter: 6px, $gap: 12px, $duration: 3s, $delay: 200ms, $timing: ease-in-out, $height: 20px, $color: black) {
+ $class-name: '.#{$name}';
+ $inner-class-name: '#{$class-name}-inner';
+
+ @include spinner-keyframes($name, $num-dots, $diameter, $gap);
+
+ #{$class-name} {
+ @include md-box(inline-block, relative, hidden);
+ height: 100%;
+ width: 100%;
+ }
+
+ #{$inner-class-name} {
+ @include md-box(inline-block, absolute);
+ width: 100%;
+ height: 100%;
+ opacity: 1;
+ // transform: rotate(45deg);
+ }
+
+ #{$inner-class-name} > div {
+ @include md-box(inline-block, relative);
+ width: $diameter;
+ height: $diameter;
+ border-radius: $diameter;
+ background-color: $color;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ @for $num from 1 through $num-dots {
+ @include spinner-child($name, $num, $num-dots, $diameter, $gap, $duration, $delay, $timing);
+ }
+}
+
+@include spinner('cs-loader');
diff --git a/lib/components/Loader/Spinner.tsx b/src/components/Loader/Spinner.tsx
similarity index 100%
rename from lib/components/Loader/Spinner.tsx
rename to src/components/Loader/Spinner.tsx
diff --git a/lib/components/Loader/index.ts b/src/components/Loader/index.ts
similarity index 100%
rename from lib/components/Loader/index.ts
rename to src/components/Loader/index.ts
diff --git a/lib/components/Masthead/Masthead.scss b/src/components/Masthead/Masthead.scss
similarity index 95%
rename from lib/components/Masthead/Masthead.scss
rename to src/components/Masthead/Masthead.scss
index a22e6d7..b22bf08 100644
--- a/lib/components/Masthead/Masthead.scss
+++ b/src/components/Masthead/Masthead.scss
@@ -1,358 +1,358 @@
-@import '../../common/color.controls';
-@import '../../common/constants';
-@import '../../common/mixins';
-
-$header-height: $layout-nav-item-height;
-$masthead-branding-width: 50%;
-$masthead-brandname-width: 200px;
-$masthead-application-breakpoint: 3 * $masthead-brandname-width - 1;
-$masthead-collapse-start: 660px;
-$masthead-button-width: $layout-nav-item-height;
-$masthead-wide-button-width: $masthead-button-width * 4;
-
-.masthead {
- height: $header-height;
- @include themify {
- background-color: themed('color-bg-masthead');
- }
-}
-
-.masthead-branding {
- width: $masthead-branding-width;
- height: $header-height;
- display: flex;
- align-items: flex-start;
-
- &>* {
- line-height: $header-height;
- font-size: 20px;
- }
-
- &>*+*:before {
- content: '|';
- margin: 0px 10px;
- @include themify {
- color: themed('color-border-panel');
- }
- }
-
- a {
- padding: 0 $gutter-small;
- text-decoration: none;
- &:hover {
- @include themify {
- background-color: themed('color-bg-masthead-hover');
- }
- }
- }
-}
-
-.masthead-toolbar-container {
- width: 100% - $masthead-branding-width;
- text-align: right;
- position: relative;
-
- .tall {
- height: auto;
- @include themify {
- border-bottom: 1px solid themed('color-border-panel');
- }
- }
-}
-
-.masthead-toolbar {
- margin: 0;
- padding: 0;
- display: inline-flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: flex-end;
- list-style-type: none;
-}
-
-
-.masthead {
- height: $header-height;
- @include themify {
- background-color: themed('color-bg-masthead');
- }
- display: flex;
- justify-content: space-between;
- flex-direction: row;
- flex-wrap: nowrap;
-}
-
-.masthead {
- @include themify {
- color: themed('color-text-white');
- }
-}
-
-.masthead-toolbar-menu-item, .masthead-toolbar-menu-item a {
- @include themify {
- color: themed('color-text-rest');
- }
-}
-
-.masthead-toolbar-menu-item.sub-menu {
- .menu-link {
- padding-left: $gutter-small * 2;
- }
-}
-
-.masthead-toolbar-menu {
- @include themify {
- background-color: themed('color-bg-masthead');
- }
-
- margin-top: 0px !important;
- text-align: left;
- padding: 0 !important;
-
- button, .menu-link, .user-label {
- text-align: inherit;
- background: none;
- border: none;
- padding: 0px $gutter-small;
- width: 100%;
-
- &:hover {
- @include themify {
- background-color: themed('color-bg-item-hover');
- }
- }
- }
-
- ul {
- list-style: none;
- padding: 0;
- width: $masthead-wide-button-width + 1px; // 1px to account for button border
- }
-
-
- .masthead-toolbar-menu-item {
- line-height: $header-height * 0.8;
-
- &:not(:last-child) {
- border-bottom-color: transparent;
- }
-
- .menu-link {
- display: block;
- }
-
- button:focus, .menu-link:focus {
- outline-offset: -1px;
- @include themify {
- outline: 1px dashed themed('color-border-focus');
- }
- }
- }
-
- &.wide {
- width: calc(100vw - #{$nav-collapsed-width});
- }
-
- &.search-bar {
- right: calc(-#{$masthead-button-width} - #{$masthead-wide-button-width} - 2px); //2px to account for border
- }
-}
-
-.sub-menu .help-menu {
- @include themify {
- border-top: 1px solid themed('color-border-disabled');
- }
-}
-
-.masthead-toolbar-item {
- @include themify {
- border-left: 1px solid themed('color-border-masthead-item');
- }
- min-width: $masthead-button-width;
-}
-
-.masthead-toolbar-btn {
- width: $masthead-button-width!important;
- height: $header-height!important;
- line-height: $header-height;
- justify-content: center;
- align-items: center;
- display: flex!important;
- border: none;
- white-space: nowrap;
- text-decoration: none;
- padding: 0!important;
- @include themify {
- background-color: themed('color-bg-masthead') !important;
- }
-
- &:hover {
- @include themify {
- background-color: themed('color-bg-masthead-hover') !important;
- }
- border: 1px solid transparent!important;
- }
-
- .user-label {
- margin-right: $gutter-normal / 2;
- margin-left: $gutter-normal;
- text-align: left;
- color: inherit;
- }
-
- width: $masthead-button-width;
- height: $header-height;
- line-height: $header-height;
- justify-content: center;
- display: inline-flex;
- border-left: 1px solid;
- cursor: pointer;
- white-space: nowrap;
- vertical-align: top;
- text-decoration: none;
-
- &.wide {
- width: $masthead-wide-button-width;
- }
-
- .user-label {
- margin-right: $gutter-normal / 2;
- margin-left: $gutter-normal;
- text-align: left;
- }
-}
-
-.user-menu-btn {
- width: $masthead-wide-button-width!important;
- display: flex;
- align-content: center;
-}
-
-.user-label {
- height: $header-height - 2px; // 2px to account for border of outer container.
- display: flex;
- flex-direction: column;
- flex-grow: 1;
- flex-shrink: 0;
- justify-content: space-between;
- width: 150px - ($gutter-normal *2);
-
- &>* {
- height: $header-height / 2;
- display: block;
- }
-
- .name {
- line-height: $header-height / 2 + 5px;
- }
-
- .email {
- line-height: $header-height / 2 - 10px;
- @include themify {
- color: themed('color-text-placeholder');
- }
- font-size: $font-size-xsmall;
- text-transform: uppercase;
- }
-}
-
-.user-thumbnail {
- align-self: center;
- font-size: $font-size-h2;
- margin-right: $gutter-normal;
-
- &.hidden {
- display: none;
- }
-}
-
-@mixin collapse($count) {
- $breakpoint: $masthead-collapse-start - $count * $header-height;
- @media (min-width: $breakpoint + 1) {
- .collapse-#{$count}-inverse {
- display: none;
- }
- }
- @media (max-width: $breakpoint) {
- .collapse-#{$count} {
- display: none;
- }
- }
-}
-
-@for $i from 0 through 10 {
- @include collapse($i);
-}
-
-@media (max-width: $masthead-application-breakpoint) {
- .masthead-branding *+* {
- display: none;
- }
-}
-
-.masthead-branding {
- @include rtl {
- direction: rtl;
- margin-left: unset;
- margin-right: 0;
- }
-}
-
-.masthead-toolbar-container {
- @include rtl {
- direction: rtl;
- text-align: left;
- }
-}
-
-.masthead-toolbar-menu {
- @include rtl {
- direction: rtl;
- text-align: right;
-
- &.search-bar {
- right: unset;
- left: calc(-#{$masthead-button-width} - #{$masthead-wide-button-width} - 2px); //2px to account for border.
- }
- }
-}
-
-.masthead-toolbar-btn {
- @include rtl {
- @include themify {
- border-right: 1px solid themed('color-border-panel');
- }
- border-left: 0;
-
- .user-label {
- margin-left: $gutter-normal / 2;
- margin-right: $gutter-normal;
- text-align: right;
- }
- }
-}
-
-.user-thumbnail {
- @include rtl {
- margin-left: $gutter-normal;
- margin-right: 0;
- }
-}
-
-.masthead-toolbar-item {
- @include rtl {
- @include themify {
- border-right: 1px solid themed('color-border-panel');
- }
- border-left: unset;
- }
-}
-
-.masthead-toolbar-menu-item.sub-menu {
- @include rtl {
- .menu-link {
- padding-right: $gutter-small * 2;
- padding-left: $gutter-small;
- }
- }
+@import '../../common/color.controls';
+@import '../../common/constants';
+@import '../../common/mixins';
+
+$header-height: $layout-nav-item-height;
+$masthead-branding-width: 50%;
+$masthead-brandname-width: 200px;
+$masthead-application-breakpoint: 3 * $masthead-brandname-width - 1;
+$masthead-collapse-start: 660px;
+$masthead-button-width: $layout-nav-item-height;
+$masthead-wide-button-width: $masthead-button-width * 4;
+
+.masthead {
+ height: $header-height;
+ @include themify {
+ background-color: themed('color-bg-masthead');
+ }
+}
+
+.masthead-branding {
+ width: $masthead-branding-width;
+ height: $header-height;
+ display: flex;
+ align-items: flex-start;
+
+ &>* {
+ line-height: $header-height;
+ font-size: 20px;
+ }
+
+ &>*+*:before {
+ content: '|';
+ margin: 0px 10px;
+ @include themify {
+ color: themed('color-border-panel');
+ }
+ }
+
+ a {
+ padding: 0 $gutter-small;
+ text-decoration: none;
+ &:hover {
+ @include themify {
+ background-color: themed('color-bg-masthead-hover');
+ }
+ }
+ }
+}
+
+.masthead-toolbar-container {
+ width: 100% - $masthead-branding-width;
+ text-align: right;
+ position: relative;
+
+ .tall {
+ height: auto;
+ @include themify {
+ border-bottom: 1px solid themed('color-border-panel');
+ }
+ }
+}
+
+.masthead-toolbar {
+ margin: 0;
+ padding: 0;
+ display: inline-flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-end;
+ list-style-type: none;
+}
+
+
+.masthead {
+ height: $header-height;
+ @include themify {
+ background-color: themed('color-bg-masthead');
+ }
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row;
+ flex-wrap: nowrap;
+}
+
+.masthead {
+ @include themify {
+ color: themed('color-text-white');
+ }
+}
+
+.masthead-toolbar-menu-item, .masthead-toolbar-menu-item a {
+ @include themify {
+ color: themed('color-text-rest');
+ }
+}
+
+.masthead-toolbar-menu-item.sub-menu {
+ .menu-link {
+ padding-left: $gutter-small * 2;
+ }
+}
+
+.masthead-toolbar-menu {
+ @include themify {
+ background-color: themed('color-bg-masthead');
+ }
+
+ margin-top: 0px !important;
+ text-align: left;
+ padding: 0 !important;
+
+ button, .menu-link, .user-label {
+ text-align: inherit;
+ background: none;
+ border: none;
+ padding: 0px $gutter-small;
+ width: 100%;
+
+ &:hover {
+ @include themify {
+ background-color: themed('color-bg-item-hover');
+ }
+ }
+ }
+
+ ul {
+ list-style: none;
+ padding: 0;
+ width: $masthead-wide-button-width + 1px; // 1px to account for button border
+ }
+
+
+ .masthead-toolbar-menu-item {
+ line-height: $header-height * 0.8;
+
+ &:not(:last-child) {
+ border-bottom-color: transparent;
+ }
+
+ .menu-link {
+ display: block;
+ }
+
+ button:focus, .menu-link:focus {
+ outline-offset: -1px;
+ @include themify {
+ outline: 1px dashed themed('color-border-focus');
+ }
+ }
+ }
+
+ &.wide {
+ width: calc(100vw - #{$nav-collapsed-width});
+ }
+
+ &.search-bar {
+ right: calc(-#{$masthead-button-width} - #{$masthead-wide-button-width} - 2px); //2px to account for border
+ }
+}
+
+.sub-menu .help-menu {
+ @include themify {
+ border-top: 1px solid themed('color-border-disabled');
+ }
+}
+
+.masthead-toolbar-item {
+ @include themify {
+ border-left: 1px solid themed('color-border-masthead-item');
+ }
+ min-width: $masthead-button-width;
+}
+
+.masthead-toolbar-btn {
+ width: $masthead-button-width!important;
+ height: $header-height!important;
+ line-height: $header-height;
+ justify-content: center;
+ align-items: center;
+ display: flex!important;
+ border: none;
+ white-space: nowrap;
+ text-decoration: none;
+ padding: 0!important;
+ @include themify {
+ background-color: themed('color-bg-masthead') !important;
+ }
+
+ &:hover {
+ @include themify {
+ background-color: themed('color-bg-masthead-hover') !important;
+ }
+ border: 1px solid transparent!important;
+ }
+
+ .user-label {
+ margin-right: $gutter-normal / 2;
+ margin-left: $gutter-normal;
+ text-align: left;
+ color: inherit;
+ }
+
+ width: $masthead-button-width;
+ height: $header-height;
+ line-height: $header-height;
+ justify-content: center;
+ display: inline-flex;
+ border-left: 1px solid;
+ cursor: pointer;
+ white-space: nowrap;
+ vertical-align: top;
+ text-decoration: none;
+
+ &.wide {
+ width: $masthead-wide-button-width;
+ }
+
+ .user-label {
+ margin-right: $gutter-normal / 2;
+ margin-left: $gutter-normal;
+ text-align: left;
+ }
+}
+
+.user-menu-btn {
+ width: $masthead-wide-button-width!important;
+ display: flex;
+ align-content: center;
+}
+
+.user-label {
+ height: $header-height - 2px; // 2px to account for border of outer container.
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ flex-shrink: 0;
+ justify-content: space-between;
+ width: 150px - ($gutter-normal *2);
+
+ &>* {
+ height: $header-height / 2;
+ display: block;
+ }
+
+ .name {
+ line-height: $header-height / 2 + 5px;
+ }
+
+ .email {
+ line-height: $header-height / 2 - 10px;
+ @include themify {
+ color: themed('color-text-placeholder');
+ }
+ font-size: $font-size-xsmall;
+ text-transform: uppercase;
+ }
+}
+
+.user-thumbnail {
+ align-self: center;
+ font-size: $font-size-h2;
+ margin-right: $gutter-normal;
+
+ &.hidden {
+ display: none;
+ }
+}
+
+@mixin collapse($count) {
+ $breakpoint: $masthead-collapse-start - $count * $header-height;
+ @media (min-width: $breakpoint + 1) {
+ .collapse-#{$count}-inverse {
+ display: none;
+ }
+ }
+ @media (max-width: $breakpoint) {
+ .collapse-#{$count} {
+ display: none;
+ }
+ }
+}
+
+@for $i from 0 through 10 {
+ @include collapse($i);
+}
+
+@media (max-width: $masthead-application-breakpoint) {
+ .masthead-branding *+* {
+ display: none;
+ }
+}
+
+.masthead-branding {
+ @include rtl {
+ direction: rtl;
+ margin-left: unset;
+ margin-right: 0;
+ }
+}
+
+.masthead-toolbar-container {
+ @include rtl {
+ direction: rtl;
+ text-align: left;
+ }
+}
+
+.masthead-toolbar-menu {
+ @include rtl {
+ direction: rtl;
+ text-align: right;
+
+ &.search-bar {
+ right: unset;
+ left: calc(-#{$masthead-button-width} - #{$masthead-wide-button-width} - 2px); //2px to account for border.
+ }
+ }
+}
+
+.masthead-toolbar-btn {
+ @include rtl {
+ @include themify {
+ border-right: 1px solid themed('color-border-panel');
+ }
+ border-left: 0;
+
+ .user-label {
+ margin-left: $gutter-normal / 2;
+ margin-right: $gutter-normal;
+ text-align: right;
+ }
+ }
+}
+
+.user-thumbnail {
+ @include rtl {
+ margin-left: $gutter-normal;
+ margin-right: 0;
+ }
+}
+
+.masthead-toolbar-item {
+ @include rtl {
+ @include themify {
+ border-right: 1px solid themed('color-border-panel');
+ }
+ border-left: unset;
+ }
+}
+
+.masthead-toolbar-menu-item.sub-menu {
+ @include rtl {
+ .menu-link {
+ padding-right: $gutter-small * 2;
+ padding-left: $gutter-small;
+ }
+ }
}
\ No newline at end of file
diff --git a/lib/components/Masthead/Masthead.tsx b/src/components/Masthead/Masthead.tsx
similarity index 97%
rename from lib/components/Masthead/Masthead.tsx
rename to src/components/Masthead/Masthead.tsx
index a2c66e2..497e607 100644
--- a/lib/components/Masthead/Masthead.tsx
+++ b/src/components/Masthead/Masthead.tsx
@@ -1,223 +1,223 @@
-import * as React from 'react';
-import * as classnames from 'classnames/bind';
-import { MethodNode } from '../../Common';
-import * as InlinePopup from '../InlinePopup';
-import { Accordion } from '../Accordion';
-import { Thumbnail } from '../Thumbnail';
-import { MastheadToolbarItemProperties, MastheadToolbarItem } from './MastheadToolbar';
-
-const cx = classnames.bind(require('./Masthead.scss'));
-
-export interface MastheadAttributes {
- userMenuAriaLabel?: string;
- mobileMenuAriaLabel?: string;
-}
-
-export interface MastheadProperties {
- branding: MethodNode;
- user?: MastheadUserProperties;
- toolbarItems?: MastheadToolbarItemProperties[];
- mobileMenuItems?: MastheadMobileMenuItem[];
- attr?: MastheadAttributes;
-}
-
-export interface MastheadUserProperties {
- email: string;
- displayName: string;
- menuItems: MastheadUserMenuItem[];
- menuExpanded?: boolean;
- onMenuClick: () => void;
- thumbnailUrl?: string;
-}
-
-export type MastheadMobileMenuItem = {
- dataTestHook: string;
- menuLabel: string;
- reactKey: string;
-} & ({
- type: 'link';
- href: string;
-} | {
- type: 'button';
- onClick: () => {}; // item is an action button
-} | {
- type: 'submenu';
- content: React.ReactElement
-
- {props.displayName}
-
-
- {props.email}
-
-
;
-
-export class Masthead extends React.PureComponent
-
- );
- }
-}
-
+import * as React from 'react';
+import * as classnames from 'classnames/bind';
+import { MethodNode } from '../../Common';
+import * as InlinePopup from '../InlinePopup';
+import { Accordion } from '../Accordion';
+import { Thumbnail } from '../Thumbnail';
+import { MastheadToolbarItemProperties, MastheadToolbarItem } from './MastheadToolbar';
+
+const cx = classnames.bind(require('./Masthead.scss'));
+
+export interface MastheadAttributes {
+ userMenuAriaLabel?: string;
+ mobileMenuAriaLabel?: string;
+}
+
+export interface MastheadProperties {
+ branding: MethodNode;
+ user?: MastheadUserProperties;
+ toolbarItems?: MastheadToolbarItemProperties[];
+ mobileMenuItems?: MastheadMobileMenuItem[];
+ attr?: MastheadAttributes;
+}
+
+export interface MastheadUserProperties {
+ email: string;
+ displayName: string;
+ menuItems: MastheadUserMenuItem[];
+ menuExpanded?: boolean;
+ onMenuClick: () => void;
+ thumbnailUrl?: string;
+}
+
+export type MastheadMobileMenuItem = {
+ dataTestHook: string;
+ menuLabel: string;
+ reactKey: string;
+} & ({
+ type: 'link';
+ href: string;
+} | {
+ type: 'button';
+ onClick: () => {}; // item is an action button
+} | {
+ type: 'submenu';
+ content: React.ReactElement
- {this.props.branding}
-
-
-
- -
- {
- this.props.toolbarItems &&
- this.props.toolbarItems.map((action, idx) =>
-
-
- -- -- - - - -
-
+
+ {props.displayName}
+
+
+ {props.email}
+
+
;
+
+export class Masthead extends React.PureComponent
+
+ );
+ }
+}
+
export default Masthead;
\ No newline at end of file
diff --git a/lib/components/Masthead/MastheadToolbar.tsx b/src/components/Masthead/MastheadToolbar.tsx
similarity index 96%
rename from lib/components/Masthead/MastheadToolbar.tsx
rename to src/components/Masthead/MastheadToolbar.tsx
index 0c3561f..6bc1b60 100644
--- a/lib/components/Masthead/MastheadToolbar.tsx
+++ b/src/components/Masthead/MastheadToolbar.tsx
@@ -1,68 +1,68 @@
-import * as classnames from 'classnames/bind';
-import * as React from 'react';
-import * as InlinePopup from '../InlinePopup';
-const cx = classnames.bind(require('./Masthead.scss'));
-
-export interface MastheadToolbarItemAttributes {
- dataTestHook?: string;
- ariaLabel?: string;
- ariaDescribedBy?: string;
-}
-
-export type MastheadToolbarItemProperties = {
- alignment?: 'right' | 'left';
- content: React.ReactElement
+ {this.props.branding}
+
+
+
+ -
+ {
+ this.props.toolbarItems &&
+ this.props.toolbarItems.map((action, idx) =>
-
+
+ ++ ++ + + + +
+
-
- );
- }
-}
-
-export default Shell;
+import * as React from 'react';
+import * as classnames from 'classnames/bind';
+const css = classnames.bind(require('./Shell.scss'));
+
+export interface ShellProperties {
+ theme?: string;
+ isRtl?: boolean;
+}
+
+export class Shell extends React.PureComponent
- {this.props.children}
-
-
+
+ );
+ }
+}
+
+export default Shell;
diff --git a/lib/components/Shell/index.ts b/src/components/Shell/index.ts
similarity index 100%
rename from lib/components/Shell/index.ts
rename to src/components/Shell/index.ts
diff --git a/lib/components/Thumbnail/Thumbnail.scss b/src/components/Thumbnail/Thumbnail.scss
similarity index 96%
rename from lib/components/Thumbnail/Thumbnail.scss
rename to src/components/Thumbnail/Thumbnail.scss
index 2caa3ca..9b36af9 100644
--- a/lib/components/Thumbnail/Thumbnail.scss
+++ b/src/components/Thumbnail/Thumbnail.scss
@@ -1,59 +1,59 @@
-@import '../../common/color.controls';
-@import '../../common/constants';
-@import '../../common/mixins';
-
-$img-size: 160px;
-$list-tile-thumbnail-size: 50px;
-$list-tile-thumbnail-icon-size: 20px;
-$user-thumbnail-height: 36px;
-$list-thumbnail-size: 30px;
-$list-thumbnail-icon-size: 16px;
-$search-thumbnail-icon-size: 28px;
-$search-thumbnail-size: 64px;
-
-@mixin thumbnailSize($circle-size, $icon-size) {
- width: $circle-size;
- height: $circle-size;
- :global(.icon) {
- line-height: $circle-size;
- font-size: $icon-size;
- }
- img {
- width: $circle-size;
- height: $circle-size;
- }
-}
-
-.circle {
- border-radius: 100%;
- -webkit-clip-path: circle(100% at center);
- clip-path: circle(100% at center);
- position: relative;
- overflow: hidden;
- flex-grow: 0;
- flex-shrink: 0;
- @include themify {
- background-color: themed('color-bg-thumbnail');
- :global(.icon) {
- color: themed('color-text-thumbnail');
- }
- }
-
- :global(.icon) {
- text-align: center;
- display: block;
- width: 100%;
- }
-
- &.preview { @include thumbnailSize($img-size, $img-size / 2); }
- &.masthead { @include thumbnailSize($user-thumbnail-height, $font-size-h2)}
- &.list-item { @include thumbnailSize($list-thumbnail-size, $list-thumbnail-icon-size) }
- &.search-result { @include thumbnailSize($search-thumbnail-size, $search-thumbnail-icon-size) }
- &.list-tile { @include thumbnailSize($list-tile-thumbnail-size, $list-tile-thumbnail-icon-size) }
-
- img {
- position: absolute;
- top: 0;
- left: 0;
- }
-}
+@import '../../common/color.controls';
+@import '../../common/constants';
+@import '../../common/mixins';
+
+$img-size: 160px;
+$list-tile-thumbnail-size: 50px;
+$list-tile-thumbnail-icon-size: 20px;
+$user-thumbnail-height: 36px;
+$list-thumbnail-size: 30px;
+$list-thumbnail-icon-size: 16px;
+$search-thumbnail-icon-size: 28px;
+$search-thumbnail-size: 64px;
+
+@mixin thumbnailSize($circle-size, $icon-size) {
+ width: $circle-size;
+ height: $circle-size;
+ :global(.icon) {
+ line-height: $circle-size;
+ font-size: $icon-size;
+ }
+ img {
+ width: $circle-size;
+ height: $circle-size;
+ }
+}
+
+.circle {
+ border-radius: 100%;
+ -webkit-clip-path: circle(100% at center);
+ clip-path: circle(100% at center);
+ position: relative;
+ overflow: hidden;
+ flex-grow: 0;
+ flex-shrink: 0;
+ @include themify {
+ background-color: themed('color-bg-thumbnail');
+ :global(.icon) {
+ color: themed('color-text-thumbnail');
+ }
+ }
+
+ :global(.icon) {
+ text-align: center;
+ display: block;
+ width: 100%;
+ }
+
+ &.preview { @include thumbnailSize($img-size, $img-size / 2); }
+ &.masthead { @include thumbnailSize($user-thumbnail-height, $font-size-h2)}
+ &.list-item { @include thumbnailSize($list-thumbnail-size, $list-thumbnail-icon-size) }
+ &.search-result { @include thumbnailSize($search-thumbnail-size, $search-thumbnail-icon-size) }
+ &.list-tile { @include thumbnailSize($list-tile-thumbnail-size, $list-tile-thumbnail-icon-size) }
+
+ img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+}
diff --git a/lib/components/Thumbnail/Thumbnail.tsx b/src/components/Thumbnail/Thumbnail.tsx
similarity index 97%
rename from lib/components/Thumbnail/Thumbnail.tsx
rename to src/components/Thumbnail/Thumbnail.tsx
index bc2b340..bd0977e 100644
--- a/lib/components/Thumbnail/Thumbnail.tsx
+++ b/src/components/Thumbnail/Thumbnail.tsx
@@ -1,82 +1,82 @@
-import * as React from 'react';
-import * as classNames from 'classnames/bind';
-const cx = classNames.bind(require('./Thumbnail.scss'));
-
-/**
- * Scalable thumbnail for a product or a device
- */
-
-export interface ThumbnailProperties {
- // if we are loading then the loading state is displayed
- // if not and we have a display url, we load the image
- // if the image doesn't load and we have a kind, we use that
- // if we don't have a display url and we have a kind, then we display the kind
- // if we don't have a kind, then we display an unknown view which looks like the regular loading view but with an error message underneath
- loading?: boolean;
- url?: string;
-
- /** The icon to display. */
- icon?: string;
-
- /**
- * The kind of thumbnail icon.
- * @deprecated use `icon` instead
- */
- kind?: 'product' | 'device' | 'user' | 'unknown' | 'missing';
-
- // these allow customization of the styles by passing in other classes
- className?: string;
-
- // this is supposed to be one of the presets present - if not passed it defaults to preview
- // size should be controlled by the
- size?: 'preview' | 'masthead' | 'list-item' | 'list-tile' | 'search-result';
-}
-
-/**
- * Object that tracks the current state of the toolbar. Since we're just tracking
- * one in-memory boolean flag that doesn't affect anything outside this component,
- * we can just use React's setState instead of creating a new Store for this.
- */
-export interface ThumbnailState {
- /** Flag that is set when the browser has finished loading the image */
- imageLoaded: boolean;
-}
-
-/**
- * Kind thumbnails load up an icon
- */
-const kindIcons = {
- 'product': 'icon-alias-product',
- 'device': 'icon-alias-device',
- 'user': 'icon-alias-user',
- 'unknown': 'icon-alias-unknown',
- 'missing': 'icon-alias-missing-image'
-};
-
-export class Thumbnail extends React.PureComponent
+ {this.props.children}
+
+ ;
- } else {
- let icon = this.props.icon || kindIcons[this.props.kind];
- return {
+ constructor(props: ThumbnailProperties) {
+ super(props);
+ this.state = { imageLoaded: false };
+ }
+
+ render() {
+ const className = cx('circle', this.props.size || 'preview', this.props.className);
+ if (this.props.loading) {
+ return
- {!!this.props.url
- ? 
this.setState({imageLoaded: true})}/>
- : null}
- {!!icon
- ?
- : null}
-
;
- }
- }
-}
-
-export default Thumbnail;
+import * as React from 'react';
+import * as classNames from 'classnames/bind';
+const cx = classNames.bind(require('./Thumbnail.scss'));
+
+/**
+ * Scalable thumbnail for a product or a device
+ */
+
+export interface ThumbnailProperties {
+ // if we are loading then the loading state is displayed
+ // if not and we have a display url, we load the image
+ // if the image doesn't load and we have a kind, we use that
+ // if we don't have a display url and we have a kind, then we display the kind
+ // if we don't have a kind, then we display an unknown view which looks like the regular loading view but with an error message underneath
+ loading?: boolean;
+ url?: string;
+
+ /** The icon to display. */
+ icon?: string;
+
+ /**
+ * The kind of thumbnail icon.
+ * @deprecated use `icon` instead
+ */
+ kind?: 'product' | 'device' | 'user' | 'unknown' | 'missing';
+
+ // these allow customization of the styles by passing in other classes
+ className?: string;
+
+ // this is supposed to be one of the presets present - if not passed it defaults to preview
+ // size should be controlled by the
+ size?: 'preview' | 'masthead' | 'list-item' | 'list-tile' | 'search-result';
+}
+
+/**
+ * Object that tracks the current state of the toolbar. Since we're just tracking
+ * one in-memory boolean flag that doesn't affect anything outside this component,
+ * we can just use React's setState instead of creating a new Store for this.
+ */
+export interface ThumbnailState {
+ /** Flag that is set when the browser has finished loading the image */
+ imageLoaded: boolean;
+}
+
+/**
+ * Kind thumbnails load up an icon
+ */
+const kindIcons = {
+ 'product': 'icon-alias-product',
+ 'device': 'icon-alias-device',
+ 'user': 'icon-alias-user',
+ 'unknown': 'icon-alias-unknown',
+ 'missing': 'icon-alias-missing-image'
+};
+
+export class Thumbnail extends React.PureComponent;
+ } else {
+ let icon = this.props.icon || kindIcons[this.props.kind];
+ return
+ {!!this.props.url
+ ? this.setState({imageLoaded: true})}/>
+ : null}
+ {!!icon
+ ?
+ : null}
+
;
+ }
+ }
+}
+
+export default Thumbnail;
diff --git a/lib/components/Thumbnail/index.ts b/src/components/Thumbnail/index.ts
similarity index 96%
rename from lib/components/Thumbnail/index.ts
rename to src/components/Thumbnail/index.ts
index 6180c1d..ae7a4b4 100644
--- a/lib/components/Thumbnail/index.ts
+++ b/src/components/Thumbnail/index.ts
@@ -1 +1 @@
-export * from './Thumbnail';
+export * from './Thumbnail';
diff --git a/lib/components/Toggle/Toggle.md b/src/components/Toggle/Toggle.md
similarity index 100%
rename from lib/components/Toggle/Toggle.md
rename to src/components/Toggle/Toggle.md
diff --git a/lib/components/Toggle/Toggle.scss b/src/components/Toggle/Toggle.scss
similarity index 96%
rename from lib/components/Toggle/Toggle.scss
rename to src/components/Toggle/Toggle.scss
index 6aa0839..8d28c8d 100644
--- a/lib/components/Toggle/Toggle.scss
+++ b/src/components/Toggle/Toggle.scss
@@ -1,141 +1,141 @@
-@import '../../common/constants';
-@import '../../common/mixins';
-@import '../../common/color.controls';
-
-$toggle-switch-transition: 75ms ease-in-out;
-
-$toggle-width: 10*$grid-size;
-$toggle-height: 5*$grid-size;
-$border-toggle-radius: $toggle-height / 2;
-$toggle-switch-border-radius: 5px;
-
-$line-height: 3.5*$grid-size;
-
-.toggle {
- @include md-box(inline-block, relative);
- line-height: $line-height;
-
- .toggle-button {
- @include md-box(inline-block, relative, fill-parent);
- vertical-align: middle;
- outline: none;
- @include themify{
- border: 1px solid themed('color-border-toggle-btn-rest-off');
- background-color: themed('color-bg-toggle-btn-rest-off');
- }
- border-radius: $border-toggle-radius;
- width: $toggle-width;
- height: $toggle-height;
- }
-
- &:not(.disabled) .toggle-button {
- &:focus {
- @include themify{
- outline: 1px dashed themed('color-border-focus');
- }
- outline-offset: 1px;
- }
-
- &:hover {
- @include themify{
- border: 1px solid themed('color-border-toggle-btn-hover-off');
- }
- cursor: pointer;
- + .toggle-switch {
- @include themify{
- background-color: themed('color-circle-toggle-btn-hover-off');
- }
- }
- }
- }
-
- .toggle-switch {
- @include md-box(block, absolute);
- left: 1.25*$grid-size;
- top: 1.25*$grid-size;
-
- width: 2.5*$grid-size;
- height: 2.5*$grid-size;
- border-radius: $toggle-switch-border-radius;
- @include themify{
- background-color: themed('color-circle-toggle-btn-rest-off');
- }
- transition: $toggle-switch-transition;
-
- pointer-events: none;
- }
-
- .toggle-label {
- @include md-box(inline-block, relative);
- margin-left: 2*$grid-size;
-
- font-family: $font-family-default;
- font-size: $font-size-default;
-
- vertical-align: middle;
- }
-
- &.toggle-on {
- &:not(.disabled) .toggle-button {
- @include themify{
- border: 1px solid themed('color-border-toggle-btn-rest-on');
- background-color: themed('color-bg-toggle-btn-rest-on');
- }
- &:hover {
- @include themify{
- border: 1px solid themed('color-border-toggle-btn-hover-on');
- background-color: themed('color-bg-toggle-btn-hover-on');
- }
- + .toggle-switch {
- @include themify{
- background-color: themed('color-circle-toggle-btn-hover-on');
- }
- }
- }
- }
-
- .toggle-switch {
- left: 25px;
- @include themify{
- background-color: themed('color-circle-toggle-btn-rest-on');
- }
- }
-
- &.disabled {
- .toggle-button {
- @include themify{
- border: 1px solid themed('color-border-toggle-btn-disabled-on');
- background-color: themed('color-bg-toggle-btn-disabled-on');
- }
- }
-
- .toggle-switch {
- @include themify{
- background-color: themed('color-circle-toggle-btn-disabled-on');
- }
- }
- }
- }
-
- &.disabled {
- .toggle-button {
- @include themify{
- border: 1px solid themed('color-border-toggle-btn-disabled-off');
- background-color: themed('color-bg-toggle-btn-disabled-off');
- }
- cursor: default;
- }
-
- .toggle-switch {
- @include themify{
- background-color: themed('color-circle-toggle-btn-disabled-off');
- }
- }
-
- .toggle-label {
- @include themify{
- color: themed('color-text-disabled');
- }
- }
- }
+@import '../../common/constants';
+@import '../../common/mixins';
+@import '../../common/color.controls';
+
+$toggle-switch-transition: 75ms ease-in-out;
+
+$toggle-width: 10*$grid-size;
+$toggle-height: 5*$grid-size;
+$border-toggle-radius: $toggle-height / 2;
+$toggle-switch-border-radius: 5px;
+
+$line-height: 3.5*$grid-size;
+
+.toggle {
+ @include md-box(inline-block, relative);
+ line-height: $line-height;
+
+ .toggle-button {
+ @include md-box(inline-block, relative, fill-parent);
+ vertical-align: middle;
+ outline: none;
+ @include themify{
+ border: 1px solid themed('color-border-toggle-btn-rest-off');
+ background-color: themed('color-bg-toggle-btn-rest-off');
+ }
+ border-radius: $border-toggle-radius;
+ width: $toggle-width;
+ height: $toggle-height;
+ }
+
+ &:not(.disabled) .toggle-button {
+ &:focus {
+ @include themify{
+ outline: 1px dashed themed('color-border-focus');
+ }
+ outline-offset: 1px;
+ }
+
+ &:hover {
+ @include themify{
+ border: 1px solid themed('color-border-toggle-btn-hover-off');
+ }
+ cursor: pointer;
+ + .toggle-switch {
+ @include themify{
+ background-color: themed('color-circle-toggle-btn-hover-off');
+ }
+ }
+ }
+ }
+
+ .toggle-switch {
+ @include md-box(block, absolute);
+ left: 1.25*$grid-size;
+ top: 1.25*$grid-size;
+
+ width: 2.5*$grid-size;
+ height: 2.5*$grid-size;
+ border-radius: $toggle-switch-border-radius;
+ @include themify{
+ background-color: themed('color-circle-toggle-btn-rest-off');
+ }
+ transition: $toggle-switch-transition;
+
+ pointer-events: none;
+ }
+
+ .toggle-label {
+ @include md-box(inline-block, relative);
+ margin-left: 2*$grid-size;
+
+ font-family: $font-family-default;
+ font-size: $font-size-default;
+
+ vertical-align: middle;
+ }
+
+ &.toggle-on {
+ &:not(.disabled) .toggle-button {
+ @include themify{
+ border: 1px solid themed('color-border-toggle-btn-rest-on');
+ background-color: themed('color-bg-toggle-btn-rest-on');
+ }
+ &:hover {
+ @include themify{
+ border: 1px solid themed('color-border-toggle-btn-hover-on');
+ background-color: themed('color-bg-toggle-btn-hover-on');
+ }
+ + .toggle-switch {
+ @include themify{
+ background-color: themed('color-circle-toggle-btn-hover-on');
+ }
+ }
+ }
+ }
+
+ .toggle-switch {
+ left: 25px;
+ @include themify{
+ background-color: themed('color-circle-toggle-btn-rest-on');
+ }
+ }
+
+ &.disabled {
+ .toggle-button {
+ @include themify{
+ border: 1px solid themed('color-border-toggle-btn-disabled-on');
+ background-color: themed('color-bg-toggle-btn-disabled-on');
+ }
+ }
+
+ .toggle-switch {
+ @include themify{
+ background-color: themed('color-circle-toggle-btn-disabled-on');
+ }
+ }
+ }
+ }
+
+ &.disabled {
+ .toggle-button {
+ @include themify{
+ border: 1px solid themed('color-border-toggle-btn-disabled-off');
+ background-color: themed('color-bg-toggle-btn-disabled-off');
+ }
+ cursor: default;
+ }
+
+ .toggle-switch {
+ @include themify{
+ background-color: themed('color-circle-toggle-btn-disabled-off');
+ }
+ }
+
+ .toggle-label {
+ @include themify{
+ color: themed('color-text-disabled');
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/lib/components/Toggle/Toggle.tsx b/src/components/Toggle/Toggle.tsx
similarity index 100%
rename from lib/components/Toggle/Toggle.tsx
rename to src/components/Toggle/Toggle.tsx
diff --git a/lib/components/Toggle/index.ts b/src/components/Toggle/index.ts
similarity index 100%
rename from lib/components/Toggle/index.ts
rename to src/components/Toggle/index.ts
diff --git a/lib/index.ts b/src/index.ts
similarity index 97%
rename from lib/index.ts
rename to src/index.ts
index 2732171..2be95c7 100644
--- a/lib/index.ts
+++ b/src/index.ts
@@ -1,21 +1,21 @@
-export * from './components/Accordion';
-export * from './components/ActionTrigger';
-export * from './components/Alert';
-export * from './components/Balloon';
-export * from './components/Button';
-export * from './components/DateTime';
-export * from './components/Dropdown';
-export * from './components/Field';
-export * from './components/GalleryCard';
-export * from './components/Icon';
-export * from './components/InlinePopup';
-export * from './components/Input';
-export * from './components/List';
-export * from './components/Loader';
-export * from './components/Masthead';
-export * from './components/Navigation';
-export * from './components/Pivot';
-export * from './components/Shell';
-export * from './components/Thumbnail';
-export * from './components/Toggle';
+export * from './components/Accordion';
+export * from './components/ActionTrigger';
+export * from './components/Alert';
+export * from './components/Balloon';
+export * from './components/Button';
+export * from './components/DateTime';
+export * from './components/Dropdown';
+export * from './components/Field';
+export * from './components/GalleryCard';
+export * from './components/Icon';
+export * from './components/InlinePopup';
+export * from './components/Input';
+export * from './components/List';
+export * from './components/Loader';
+export * from './components/Masthead';
+export * from './components/Navigation';
+export * from './components/Pivot';
+export * from './components/Shell';
+export * from './components/Thumbnail';
+export * from './components/Toggle';
export * from './Common';
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 1f521cf..fe9f254 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,13 +1,15 @@
{
"compilerOptions": {
+ "outDir": "lib",
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"jsx": "react",
+ "allowJs": false,
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"noImplicitAny": false,
- "rootDir": "lib",
+ "rootDir": "src",
"sourceMap": false,
"declaration": true,
"types": [
@@ -17,7 +19,7 @@
]
},
"include": [
- "lib/**/*"
+ "src/**/*"
],
"exclude": [
"node_modules",