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..541b213 --- /dev/null +++ b/docs/src/pages/components/Onboarding.vue @@ -0,0 +1,69 @@ + + + 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..0791a01 --- /dev/null +++ b/src/components/mdOnboarding/index.js @@ -0,0 +1,10 @@ +import mdOnboarding from './mdOnboarding.vue'; +import mdBoard from './mdBoard.vue'; +import mdOnboardingTheme from './mdOnboarding.theme'; + +export default function install(Vue) { + Vue.component('md-onboarding', mdOnboarding); + Vue.component('md-board', mdBoard); + + Vue.material.styles.push(mdOnboardingTheme); +} diff --git a/src/components/mdOnboarding/mdBoard.vue b/src/components/mdOnboarding/mdBoard.vue new file mode 100644 index 0000000..a54cfb9 --- /dev/null +++ b/src/components/mdOnboarding/mdBoard.vue @@ -0,0 +1,105 @@ + + + diff --git a/src/components/mdOnboarding/mdOnboarding.scss b/src/components/mdOnboarding/mdOnboarding.scss new file mode 100644 index 0000000..b842b6f --- /dev/null +++ b/src/components/mdOnboarding/mdOnboarding.scss @@ -0,0 +1,137 @@ +@import '../../core/stylesheets/variables.scss'; + +$tab-width: 72px; +$tab-max-width: 264px; + +.md-tabs { + width: 100%; + display: flex; + flex-flow: column; + position: relative; + + &.md-transition-off * { + transition: none !important; + } + + &.md-dynamic-height { + .md-tabs-content { + transition: height $swift-ease-out-duration $swift-ease-out-timing-function; + } + } + + .md-tabs-navigation { + height: 48px; + min-height: 48px; + position: relative; + z-index: 1; + display: flex; + transition: $swift-ease-out; + + &.md-has-icon.md-has-label { + min-height: 72px; + + .md-icon { + margin-bottom: 10px; + } + } + + &.md-centered { + justify-content: center; + } + + &.md-fixed { + .md-tab-header { + flex: 1; + } + } + + &.md-right { + justify-content: flex-end; + } + } + + .md-tab-header { + min-width: $tab-width; + max-width: $tab-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-tab-header-container { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + + .md-icon { + margin: 0; + } + } + + .md-tab-indicator { + height: 2px; + position: absolute; + bottom: 0; + left: 0; + transform: translate3D(0, 0, 0); + + &.md-transition-off { + transition: none !important; + } + + &.md-to-right { + transition: $swift-ease-out, + left .3s $swift-ease-in-out-timing-function, + right .15s $swift-ease-in-out-timing-function; + } + + &.md-to-left { + transition: $swift-ease-out, + right .3s $swift-ease-in-out-timing-function, + left .15s $swift-ease-in-out-timing-function; + } + } + + .md-tabs-content { + width: 100%; + height: 0; + position: relative; + overflow: hidden; + } + + .md-tabs-wrapper { + width: 9999em; + 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-tab { + padding: 16px; + position: absolute; + top: 0; + left: 0; + right: 0; + } +} diff --git a/src/components/mdOnboarding/mdOnboarding.theme b/src/components/mdOnboarding/mdOnboarding.theme new file mode 100644 index 0000000..e698e05 --- /dev/null +++ b/src/components/mdOnboarding/mdOnboarding.theme @@ -0,0 +1,94 @@ +.THEME_NAME { + &.md-tabs { + > .md-tabs-navigation { + background-color: #{'PRIMARY-COLOR'}; + + .md-tab-header { + color: #{'PRIMARY-CONTRAST-0.54'}; + + &.md-active, + &:focus { + color: #{'PRIMARY-CONTRAST'}; + } + + &.md-disabled { + color: #{'PRIMARY-CONTRAST-0.26'} + } + } + + .md-tab-indicator { + background-color: #{'ACCENT-COLOR'}; + } + } + + &.md-transparent { + > .md-tabs-navigation { + background-color: transparent; + border-bottom: 1px solid #{'BACKGROUND-CONTRAST-0.12'}; + + .md-tab-header { + color: #{'BACKGROUND-CONTRAST-0.54'}; + + &.md-active, + &:focus { + color: #{'PRIMARY-COLOR'}; + } + + &.md-disabled { + color: #{'BACKGROUND-CONTRAST-0.26'} + } + } + + .md-tab-indicator { + background-color: #{'PRIMARY-COLOR'}; + } + } + } + + &.md-accent { + > .md-tabs-navigation { + background-color: #{'ACCENT-COLOR'}; + + .md-tab-header { + color: #{'ACCENT-CONTRAST-0.54'}; + + &.md-active, + &:focus { + color: #{'ACCENT-CONTRAST'}; + } + + &.md-disabled { + color: #{'ACCENT-CONTRAST-0.26'} + } + } + + .md-tab-indicator { + background-color: #{'BACKGROUND-COLOR'}; + } + } + } + + &.md-warn { + > .md-tabs-navigation { + background-color: #{'WARN-COLOR'}; + + .md-tab-header { + color: #{'WARN-CONTRAST-0.54'}; + + &.md-active, + &:focus { + color: #{'WARN-CONTRAST'}; + } + + &.md-disabled { + color: #{'WARN-CONTRAST-0.26'} + } + } + + .md-tab-indicator { + background-color: #{'BACKGROUND-COLOR'}; + } + } + } + } +} diff --git a/src/components/mdOnboarding/mdOnboarding.vue b/src/components/mdOnboarding/mdOnboarding.vue new file mode 100644 index 0000000..2ab8e57 --- /dev/null +++ b/src/components/mdOnboarding/mdOnboarding.vue @@ -0,0 +1,222 @@ + + + + + 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,