diff --git a/docs/src/App.vue b/docs/src/App.vue index 4e3a9c8..56d6fb0 100644 --- a/docs/src/App.vue +++ b/docs/src/App.vue @@ -99,6 +99,10 @@ Menu + + Onboarding + + Progress diff --git a/docs/src/pages/components/Onboarding.vue b/docs/src/pages/components/Onboarding.vue new file mode 100644 index 0000000..2bb5fc0 --- /dev/null +++ b/docs/src/pages/components/Onboarding.vue @@ -0,0 +1,202 @@ + + + diff --git a/docs/src/routes.js b/docs/src/routes.js index 4f220ea..ac0d10e 100644 --- a/docs/src/routes.js +++ b/docs/src/routes.js @@ -21,6 +21,7 @@ const InkRipple = (r) => require.ensure([], () => r(require('./pages/components/ const Input = (r) => require.ensure([], () => r(require('./pages/components/Input')), 'input'); const List = (r) => require.ensure([], () => r(require('./pages/components/List')), 'list'); const Menu = (r) => require.ensure([], () => r(require('./pages/components/Menu')), 'menu'); +const Onboarding = (r) => require.ensure([], () => r(require('./pages/components/Onboarding')), 'onboarding'); const Progress = (r) => require.ensure([], () => r(require('./pages/components/Progress')), 'progress'); const Radio = (r) => require.ensure([], () => r(require('./pages/components/Radio')), 'radio'); const Select = (r) => require.ensure([], () => r(require('./pages/components/Select')), 'select'); @@ -148,6 +149,11 @@ const components = [ name: 'components:menu', component: Menu }, + { + path: '/components/onboarding', + name: 'components:onboarding', + component: Onboarding + }, { path: '/components/progress', name: 'components:progress', diff --git a/src/components/mdOnboarding/index.js b/src/components/mdOnboarding/index.js new file mode 100644 index 0000000..50dcec3 --- /dev/null +++ b/src/components/mdOnboarding/index.js @@ -0,0 +1,10 @@ +import mdBoards from './mdBoards.vue'; +import mdBoard from './mdBoard.vue'; +import mdBoardsTheme from './mdBoards.theme'; + +export default function install(Vue) { + Vue.component('md-boards', mdBoards); + Vue.component('md-board', mdBoard); + + Vue.material.styles.push(mdBoardsTheme); +} diff --git a/src/components/mdOnboarding/mdBoard.vue b/src/components/mdOnboarding/mdBoard.vue new file mode 100644 index 0000000..8d244c9 --- /dev/null +++ b/src/components/mdOnboarding/mdBoard.vue @@ -0,0 +1,105 @@ + + + diff --git a/src/components/mdOnboarding/mdBoards.scss b/src/components/mdOnboarding/mdBoards.scss new file mode 100644 index 0000000..1f73c1e --- /dev/null +++ b/src/components/mdOnboarding/mdBoards.scss @@ -0,0 +1,105 @@ +@import '../../core/stylesheets/variables.scss'; + +$board-width: 24px; +$board-max-width: 24px; + +.md-boards { + width: 100%; + height: 100% !important; + display: flex; + flex-flow: column; + position: relative; + + &.md-transition-off * { + transition: none !important; + } + + &.md-dynamic-height { + .md-boards-content { + transition: height $swift-ease-out-duration $swift-ease-out-timing-function; + } + } + + .md-boards-navigation { + position: absolute !important; + bottom: 0; + width: 100%; + height: 48px; + min-height: 48px; + position: relative; + z-index: 1; + display: flex; + transition: $swift-ease-out; + justify-content: space-between; + } + + .md-board-header { + min-width: $board-width; + max-width: $board-max-width; + margin: 0; + padding: 0 12px; + display: inline-block; + position: relative; + cursor: pointer; + border: 0; + background: none; + transition: $swift-ease-out; + font-family: inherit; + font-size: 14px; + font-weight: 500; + text-transform: uppercase; + + &.md-disabled { + cursor: default; + pointer-events: none; + user-select: none; + -webkit-user-drag: none; + } + } + + .md-board-header-container { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + + .md-icon { + margin: 0; + } + + .md-icon:not(.md-control) { + width: 16px; + min-width: 16px; + height: 16px; + min-height: 16px; + font-size: 16px; + } + } + + .md-boards-content { + width: 100%; + height: 100% !important; + position: relative; + overflow: hidden; + } + + .md-boards-wrapper { + width: 9999em; + height: 100% !important; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + transform: translate3d(0, 0, 0); + transition: transform $swift-ease-out-duration $swift-ease-out-timing-function; + } + + .md-board { + padding: 16px; + position: absolute; + top: 0; + left: 0; + right: 0; + } +} diff --git a/src/components/mdOnboarding/mdBoards.theme b/src/components/mdOnboarding/mdBoards.theme new file mode 100644 index 0000000..2f25932 --- /dev/null +++ b/src/components/mdOnboarding/mdBoards.theme @@ -0,0 +1,116 @@ +.THEME_NAME { + &.md-boards { + > .md-boards-navigation { + background-color: transparent; + + .md-board-header { + color: #{'BACKGROUND-CONTRAST-0.54'}; + + &.md-active, + &:focus { + color: #{'PRIMARY-COLOR'}; + } + + &.md-disabled { + color: #{'BACKGROUND-CONTRAST-0.26'} + } + } + + .md-button { + color: #{'PRIMARY-COLOR'}; + } + } + + &.md-transparent { + > .md-boards-navigation { + background-color: transparent; + + .md-board-header { + color: #{'PRIMARY-CONTRAST-0.54'}; + + &.md-active, + &:focus { + color: #{'PRIMARY-CONTRAST'}; + } + + &.md-disabled { + color: #{'PRIMARY-CONTRAST-0.26'} + } + } + + .md-button { + color: #{'PRIMARY-CONTRAST-0.54'}; + } + } + } + + &.md-primary { + > .md-boards-navigation { + background-color: #{'PRIMARY-COLOR'}; + + .md-board-header { + color: #{'PRIMARY-CONTRAST-0.54'}; + + &.md-active, + &:focus { + color: #{'PRIMARY-CONTRAST'}; + } + + &.md-disabled { + color: #{'PRIMARY-CONTRAST-0.26'} + } + } + + .md-button { + color: #{'PRIMARY-CONTRAST-0.54'}; + } + } + } + + &.md-accent { + > .md-boards-navigation { + background-color: #{'ACCENT-COLOR'}; + + .md-board-header { + color: #{'ACCENT-CONTRAST-0.54'}; + + &.md-active, + &:focus { + color: #{'ACCENT-CONTRAST'}; + } + + &.md-disabled { + color: #{'ACCENT-CONTRAST-0.26'} + } + } + + .md-button { + color: #{'ACCENT-CONTRAST-0.54'}; + } + } + } + + &.md-warn { + > .md-boards-navigation { + background-color: #{'WARN-COLOR'}; + + .md-board-header { + color: #{'WARN-CONTRAST-0.54'}; + + &.md-active, + &:focus { + color: #{'WARN-CONTRAST'}; + } + + &.md-disabled { + color: #{'WARN-CONTRAST-0.26'} + } + } + + .md-button { + color: #{'WARN-CONTRAST-0.54'}; + } + } + } + } +} diff --git a/src/components/mdOnboarding/mdBoards.vue b/src/components/mdOnboarding/mdBoards.vue new file mode 100644 index 0000000..ff3483d --- /dev/null +++ b/src/components/mdOnboarding/mdBoards.vue @@ -0,0 +1,362 @@ + + + + + diff --git a/src/index.js b/src/index.js index 9a0f757..2540f7b 100644 --- a/src/index.js +++ b/src/index.js @@ -16,6 +16,7 @@ import MdInputContainer from './components/mdInputContainer'; import MdLayout from './components/mdLayout'; import MdList from './components/mdList'; import MdMenu from './components/mdMenu'; +import MdOnboarding from './components/mdOnboarding'; import MdProgress from './components/mdProgress'; import MdRadio from './components/mdRadio'; import MdSelect from './components/mdSelect'; @@ -50,6 +51,7 @@ const options = { MdLayout, MdList, MdMenu, + MdOnboarding, MdProgress, MdRadio, MdSelect,