Permalink
Browse files

bug: Tabs are working on mobile now

  • Loading branch information...
MikeMitterer committed Mar 6, 2015
1 parent 00fbaf1 commit 3acca3abafe6dbe10102e92aedab19b1a88ec174
View
@@ -19,13 +19,9 @@
<excludeFolder url="file://$MODULE_DIR$/example/card/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/card/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/checkbox/build" />
- <excludeFolder url="file://$MODULE_DIR$/example/checkbox/build/packages" />
- <excludeFolder url="file://$MODULE_DIR$/example/checkbox/build/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/checkbox/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/checkbox/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/column-layout/build" />
- <excludeFolder url="file://$MODULE_DIR$/example/column-layout/build/packages" />
- <excludeFolder url="file://$MODULE_DIR$/example/column-layout/build/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/column-layout/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/column-layout/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/dropdown-menu/build" />
@@ -36,8 +32,6 @@
<excludeFolder url="file://$MODULE_DIR$/example/footer/web/images/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/footer/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/icon-toggle/build" />
- <excludeFolder url="file://$MODULE_DIR$/example/icon-toggle/build/packages" />
- <excludeFolder url="file://$MODULE_DIR$/example/icon-toggle/build/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/icon-toggle/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/icon-toggle/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/item/build" />
@@ -56,9 +50,6 @@
<excludeFolder url="file://$MODULE_DIR$/example/layout-header-drawer/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/layout-header-drawer/web/styles/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/layout/build" />
- <excludeFolder url="file://$MODULE_DIR$/example/layout/build/packages" />
- <excludeFolder url="file://$MODULE_DIR$/example/layout/build/web/images/packages" />
- <excludeFolder url="file://$MODULE_DIR$/example/layout/build/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/layout/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/layout/web/images/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/layout/web/packages" />
@@ -74,8 +65,6 @@
<excludeFolder url="file://$MODULE_DIR$/example/radio/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/radio/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/shadow/build" />
- <excludeFolder url="file://$MODULE_DIR$/example/shadow/build/packages" />
- <excludeFolder url="file://$MODULE_DIR$/example/shadow/build/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/shadow/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/shadow/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/slider/build" />
@@ -95,8 +84,6 @@
<excludeFolder url="file://$MODULE_DIR$/example/tabs/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/tabs/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/textfield/build" />
- <excludeFolder url="file://$MODULE_DIR$/example/textfield/build/packages" />
- <excludeFolder url="file://$MODULE_DIR$/example/textfield/build/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/textfield/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/textfield/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/tooltip/build" />
View
@@ -540,7 +540,6 @@ html, body {
padding: 0; }
body {
- padding: 24px;
box-sizing: border-box;
background: #FFF; }
@@ -962,8 +961,31 @@ dt {
width: 100%; }
.wsk-tabs__tab-bar {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-align-content: space-between;
+ -ms-flex-line-pack: justify;
+ align-content: space-between;
+ -webkit-box-align: start;
+ -webkit-align-items: flex-start;
+ -ms-flex-align: start;
+ align-items: flex-start;
height: 48px;
- padding: 0 0 0 56px;
+ padding: 0 0 0 0;
margin: 0;
border-bottom: 1px solid #e0e0e0; }
@@ -1,5 +1,5 @@
@import "packages/wsk_material/sass/styleguide_demo_bp";
-@import "packages/wsk_material/sass/tabs/_tabs";
+@import "packages/wsk_material/sass/tabs/tabs";
.PreviewBlock {
margin: 0;
@@ -25,8 +25,8 @@
<div class="wsk-tabs wsk-js-tabs wsk-js-ripple-effect">
<div class="wsk-tabs__tab-bar">
<a href="#starks-panel" class="wsk-tabs__tab is-active">Starks</a>
- <a href="#lannisters-panel" class="wsk-tabs__tab">Lannisters</a>
- <a href="#targaryens-panel" class="wsk-tabs__tab">Targaryens</a>
+ <a href="#lannisters-panel" class="wsk-tabs__tab">Lannist</a>
+ <a href="#targaryens-panel" class="wsk-tabs__tab">Targary</a>
</div>
<div class="wsk-tabs__panel is-active" id="starks-panel">
@@ -13,7 +13,8 @@ html, body {
}
body {
- padding: $padding;
+ //padding: $padding;
+
box-sizing: border-box;
background: #FFF;
}
@@ -0,0 +1,108 @@
+@import "../colors";
+@import "../animation/animation";
+@import "../typography/typography";
+@import "../ripple/ripple";
+
+.wsk-tabs {
+ display: block;
+ width: 100%;
+}
+
+.wsk-tabs__tab-bar {
+ height: 48px;
+ padding: 0 0 0 56px;
+ margin: 0;
+ border-bottom: 1px solid $tab-border-color;
+}
+
+.wsk-tabs__tab {
+ margin: 0;
+ border: none;
+ padding: 0 24px 0 24px;
+
+ float: left;
+ position: relative;
+ display: block;
+
+ color: red;
+ text-decoration: none;
+ height: 48px;
+ line-height: 48px;
+
+ text-align: center;
+ font-weight: 500;
+ font-size: 14px;
+ text-transform: uppercase;
+
+ color: $tab-text-color;
+ overflow: hidden;
+
+ .wsk-tabs.is-upgraded &.is-active {
+ color: $tab-active-text-color;
+ }
+
+ .wsk-tabs.is-upgraded &.is-active:after {
+ height: 2px;
+ width: 100%;
+ display: block;
+ content: " ";
+ bottom: 0px;
+ left: 0px;
+ position: absolute;
+ background: $tab-highlight-color;
+ -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
+ -moz-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
+ transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
+ }
+
+ & .wsk-tabs__ripple-container {
+ display: block;
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ left: 0px;
+ top: 0px;
+ z-index: 1;
+ overflow: hidden;
+
+ & .wsk-ripple {
+ background: $tab-highlight-color;
+ }
+ }
+}
+
+.wsk-tabs__panel {
+ display: block;
+
+ .wsk-tabs.is-upgraded & {
+ display: none;
+ }
+
+ .wsk-tabs.is-upgraded &.is-active {
+ display: block;
+ }
+}
+
+@-webkit-keyframes border-expand {
+ 0% {
+ opacity: 0;
+ width: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ width: 100%;
+ }
+}
+
+@-moz-keyframes border-expand {
+ 0% {
+ opacity: 0;
+ width: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ width: 100%;
+ }
+}
View
@@ -9,10 +9,17 @@
}
.wsk-tabs__tab-bar {
- height: 48px;
- padding: 0 0 0 56px;
- margin: 0;
- border-bottom: 1px solid $tab-border-color;
+ display : flex;
+ flex-direction : row;
+ flex-wrap : wrap;
+ justify-content : center; // ⇾
+ align-content : space-between; // ||
+ align-items : flex-start; // ↓
+
+ height : 48px;
+ padding : 0 0 0 0;
+ margin : 0;
+ border-bottom : 1px solid $tab-border-color;
}
.wsk-tabs__tab {

0 comments on commit 3acca3a

Please sign in to comment.