├── .gitignore
├── Gruntfile.js
├── README.md
├── bower.json
├── dist
    ├── index.html
    └── tabsy.css
├── package.json
└── src
    ├── index.html
    ├── library
        ├── _animations.scss
        ├── _mixins.scss
        └── _variables.scss
    └── tabsy.scss


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 | 
 3 |     grunt.initConfig({
 4 | 
 5 |         settings: {
 6 |             srcPath: 'src/',
 7 |             distPath: 'dist/'
 8 |         },
 9 | 
10 |         sass: {
11 |             app: {
12 |                 files: [{
13 |                     expand: true,
14 |                     cwd: '<%= settings.srcPath %>',
15 |                     src: ['**/*.scss'],
16 |                     dest: '<%= settings.distPath %>',
17 |                     ext: '.css'
18 |                 }],
19 |                 options: {
20 |                     outputStyle: 'compressed',
21 |                     sourceMap: false,
22 |                     precision: 5
23 |                 }
24 |             }
25 |         },
26 | 
27 |         postcss: {
28 |             options: {
29 |                 map: false,
30 |                 processors: [
31 |                     require('autoprefixer')({
32 |                         browsers: 'last 10 versions, Explorer >= 9'
33 |                     })
34 |                 ]
35 |             },
36 |             dist: {
37 |                 src: '<%= settings.distPath %>*.css'
38 |             }
39 |         },
40 | 
41 |         htmlbuild: {
42 |             build: {
43 |                 expand: true,
44 |                 cwd: '<%= settings.srcPath %>',
45 |                 src: '**/*.html',
46 |                 dest: '<%= settings.distPath %>'
47 |             }
48 |         },
49 | 
50 |         watch: {
51 |             scss: {
52 |                 expand: true,
53 |                 files: ['<%= settings.srcPath %>sass/**/*.scss'],
54 |                 tasks: ['sass', 'postcss'],
55 |                 options: {
56 |                     spawn: false
57 |                 }
58 |             },
59 |             html: {
60 |                 files: ['<%= settings.srcPath %>*.html'],
61 |                 tasks: ['htmlbuild'],
62 |                 options: {
63 |                     spawn: false
64 |                 }
65 |             }
66 |         }
67 | 
68 |     });
69 | 
70 |     require('load-grunt-tasks')(grunt);
71 | 
72 |     grunt.registerTask('default', ['watch']);
73 |     grunt.registerTask('build', ['sass', 'postcss', 'htmlbuild']);
74 | 
75 | };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tabsy CSS #
 2 | ## Simple tabs toggler component written in pure CSS with no dependencies ##
 3 | 
 4 | 
 5 | ### Install ###
 6 | 
 7 | With npm:
 8 | ```sh
 9 | npm install tabsy-css
10 | ```
11 | 
12 | With Bower:
13 | ```sh
14 | bower install tabsy-css
15 | ```
16 | 
17 | ### Usage ###
18 | 
19 | Include css:
20 | ```sh
21 | <link href='tabsy.css' rel='stylesheet' type='text/css'>
22 | ```
23 | 
24 | Initial required structure, place any content you want within the tabs:
25 | ```sh
26 | <div class="tabsy">
27 |     <input type="radio" id="tab1" name="tab" checked>
28 |     <label class="tabButton" for="tab1">Tab One</label>
29 |     <div class="tab">
30 |     	<div class="content">
31 |     		Content One
32 |     	</div>
33 |     </div>
34 |     <input type="radio" id="tab2" name="tab" checked>
35 |     <label class="tabButton" for="tab2">Tab Two</label>
36 |     <div class="tab">
37 |     	<div class="content">
38 |     		Content Two
39 |     	</div>
40 |     </div>
41 |     <input type="radio" id="tab3" name="tab" checked>
42 |     <label class="tabButton" for="tab3">Tab Three</label>
43 |     <div class="tab">
44 |     	<div class="content">
45 |     		Content Three
46 |     	</div>
47 |     </div>
48 | </div>
49 | ```
50 | 
51 | ### Demo ###
52 | 
53 | Demo available [here](http://robiveli.github.io/tabsy-css/).
54 | 
55 | ### Options ###
56 | 
57 | Default css settings are placed in `library/_variables.scss`:
58 | 
59 | ### Note ###
60 | 
61 | Based on Flexbox feature. Where not supported simple fallback is applied.
62 | 
63 | ### License  ###
64 | 
65 | Tabsy CSS is licensed under the [MIT license](http://opensource.org/licenses/MIT).
66 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tabsy-css",
 3 |   "version": "1.0.0",
 4 |   "description": "Simple tabs toggler component written in pure CSS with no dependencies",
 5 |   "main": [
 6 |     "dist/",
 7 |     "src/",
 8 |     "Gruntfile.js",
 9 |     "package.json",
10 |     "README.md"
11 |   ],
12 |   "authors": [
13 |     "Robert Velickovski"
14 |   ],
15 |   "license": "MIT",
16 |   "keywords": [
17 |     "tabs",
18 |     "css",
19 |     "toggle",
20 |     "simple",
21 |     "lightweight"
22 |   ],
23 |   "homepage": "https://github.com/robiveli/tabsy-css",
24 |   "ignore": [
25 |     "**/.*",
26 |     "node_modules",
27 |     "bower_components",
28 |     "test",
29 |     "tests"
30 |   ]
31 | }
32 | 


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 | <title>Tabsy - Simple tabs toggler component written in pure CSS with no dependencies</title>
  5 | <meta charset="utf-8">
  6 | <meta name="description" content="Simple tabs toggler component written in pure CSS with no dependencies">
  7 | <meta name="robots" content="index,follow">
  8 | <meta name="viewport" content="width=device-width, initial-scale=1">
  9 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 10 | <link href="https://fonts.googleapis.com/css?family=Dosis|Fredoka+One" rel="stylesheet">
 11 | <link href="tabsy.css" rel="stylesheet" type="text/css">
 12 | 
 13 | <style>
 14 | 
 15 |     /*** DEMO only ***/
 16 | 
 17 |     html,body,div,span,applet,object,
 18 |     iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
 19 |     address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
 20 |     strike,sub,sup,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,
 21 |     label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,
 22 |     aside,canvas,details,embed,figure,figcaption,footer,header,
 23 |     hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,
 24 |     video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; }
 25 | 
 26 | 
 27 |     html { 
 28 | 
 29 |         font-size: 62.5%; 
 30 | 
 31 |     }
 32 | 
 33 |     body { 
 34 | 
 35 |         font-size: 1em; background: #F5F5F5; font-family: 'Dosis', sans-serif; color: #565659;  background-color: #f6f3ee;
 36 | 
 37 |     }
 38 | 
 39 |     main {
 40 | 
 41 |         display: block; margin: 80px auto; padding: 0 20px; text-align: center;
 42 | 
 43 |     }
 44 | 
 45 |     h1 {
 46 | 
 47 |         font-size: 70px; font-family: 'Fredoka One', cursive; text-align: center; color: #5a5243;
 48 | 
 49 |     }
 50 | 
 51 |     h1 sup {
 52 | 
 53 |         font-size: 14px; margin-left: -20px; display: inline-block; line-height: 1;
 54 | 
 55 |     }
 56 | 
 57 |     h2 {
 58 | 
 59 |         font-size: 22px; text-align: center; margin: -7px 0 80px 0; padding: 5px 5px 6px 5px; display: inline-block; line-height: 30px;
 60 |         border-bottom: 1px solid #5a5243; border-top: 1px solid #5a5243;
 61 | 
 62 |     }
 63 | 
 64 |     .tabButton {
 65 | 
 66 |         font-size: 15px; font-weight: bold; padding: 15px 20px; 
 67 | 
 68 |     }
 69 | 
 70 |     .tab {
 71 | 
 72 |         padding: 20px; text-align: left;
 73 | 
 74 |     }
 75 | 
 76 |     h3 {
 77 | 
 78 |         font-size: 20px; font-weight: bold;
 79 | 
 80 |     }
 81 | 
 82 |     p {
 83 | 
 84 |         font-size: 15px; margin-top: 10px; 
 85 | 
 86 |     }
 87 | 
 88 |     @media screen and (min-width: 768px) {
 89 | 
 90 |         main {
 91 | 
 92 |             width: 700px;
 93 | 
 94 |         }
 95 | 
 96 |     }
 97 | 
 98 | </style>
 99 | 
100 | </head>
101 | 
102 | <body>
103 | 
104 |     <main>
105 | 
106 |         <h1>Tabsy <sup>[CSS]</sup></h1>
107 |         <h2>Simple and lightweight tabs toggler component written in pure CSS</h2>
108 |         
109 |         <div class="tabsy">
110 | 
111 |             <input type="radio" id="tab1" name="tab" checked>
112 |             <label class="tabButton" for="tab1">Tab One</label>
113 |             
114 |             <div class="tab">
115 |                 <div class="content">
116 |                     <h3>Heading 1</h3>
117 |                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
118 |                     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
119 |                 </div>
120 |             </div>
121 | 
122 |             <input type="radio" id="tab2" name="tab">
123 |             <label class="tabButton" for="tab2">Tab Two</label>
124 |             
125 |             <div class="tab">
126 |                 <div class="content">
127 |                     <h3>Heading 2</h3>
128 |                     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
129 |                     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
130 |                     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
131 |                 </div>
132 |             </div>
133 | 
134 |             <input type="radio" id="tab3" name="tab">
135 |             <label class="tabButton" for="tab3">Tab Three</label>
136 |             
137 |             <div class="tab">
138 |                 <div class="content">
139 |                     <h3>Heading 3</h3>
140 |                     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
141 |                     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
142 |                 </div>
143 |             </div>
144 | 
145 |         </div>
146 | 
147 |     </main>
148 | 
149 | </body>
150 | 
151 | </html>


--------------------------------------------------------------------------------
/dist/tabsy.css:
--------------------------------------------------------------------------------
1 | @-webkit-keyframes showTab{from{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes showTab{from{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.tabsy>button{width:100%;font-family:inherit;font-size:100%;margin:0;outline:0;border:0;vertical-align:baseline;-webkit-box-sizing:border-box;box-sizing:border-box;background:transparent}.tabsy>.tabButton{display:block;margin-top:1px;background:#5a5243;color:#f5f5f5;text-align:center;-webkit-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}.tabsy>input{display:none}.tabsy>input:checked+label+.tab{display:block}.tabsy>input:checked+label+.tab>.content{-webkit-animation:showTab 250ms ease-in-out;animation:showTab 250ms ease-in-out}.tabsy>.tab{background:#fff;display:none}@media screen and (min-width: 768px){.tabsy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.tabsy>.tabButton{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;cursor:pointer}.tabsy>input:checked+label{background:#fff;color:#5a5243}.tabsy>.tab{-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}}
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tabsy-css",
 3 |   "title": "Tabsy CSS",
 4 |   "description": "Simple tabs toggler component written in pure CSS with no dependencies",
 5 |   "version": "1.0.0",
 6 |   "license": "MIT",
 7 |   "author": {
 8 |     "name": "Robert Velickovski",
 9 |     "email": "roby@rvdizajn.com"
10 |   },
11 |   "keywords": [
12 |     "tabs",
13 |     "css",
14 |     "simple",
15 |     "toggle",
16 |     "lightweight"
17 |   ],
18 |   "homepage": "https://github.com/robiveli/tabsy-css",
19 |   "devDependencies": {
20 |     "autoprefixer": "^6.7.7",
21 |     "grunt": "^1.0.1",
22 |     "grunt-contrib-watch": "^1.0.0",
23 |     "grunt-html-build": "^0.7.1",
24 |     "grunt-postcss": "^0.8.0",
25 |     "grunt-sass": "^2.0.0",
26 |     "load-grunt-tasks": "^3.5.2"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 | <title>Tabsy - Simple tabs toggler component written in pure CSS with no dependencies</title>
  5 | <meta charset="utf-8">
  6 | <meta name="description" content="Simple tabs toggler component written in pure CSS with no dependencies">
  7 | <meta name="robots" content="index,follow">
  8 | <meta name="viewport" content="width=device-width, initial-scale=1">
  9 | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 10 | <link href="https://fonts.googleapis.com/css?family=Dosis|Fredoka+One" rel="stylesheet">
 11 | <link href="tabsy.css" rel="stylesheet" type="text/css">
 12 | 
 13 | <style>
 14 | 
 15 |     /*** DEMO only ***/
 16 | 
 17 |     html,body,div,span,applet,object,
 18 |     iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
 19 |     address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
 20 |     strike,sub,sup,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,
 21 |     label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,
 22 |     aside,canvas,details,embed,figure,figcaption,footer,header,
 23 |     hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,
 24 |     video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; }
 25 | 
 26 | 
 27 |     html { 
 28 | 
 29 |         font-size: 62.5%; 
 30 | 
 31 |     }
 32 | 
 33 |     body { 
 34 | 
 35 |         font-size: 1em; background: #F5F5F5; font-family: 'Dosis', sans-serif; color: #565659;  background-color: #f6f3ee;
 36 | 
 37 |     }
 38 | 
 39 |     main {
 40 | 
 41 |         display: block; margin: 80px auto; padding: 0 20px; text-align: center;
 42 | 
 43 |     }
 44 | 
 45 |     h1 {
 46 | 
 47 |         font-size: 70px; font-family: 'Fredoka One', cursive; text-align: center; color: #5a5243;
 48 | 
 49 |     }
 50 | 
 51 |     h1 sup {
 52 | 
 53 |         font-size: 14px; margin-left: -20px; display: inline-block; line-height: 1;
 54 | 
 55 |     }
 56 | 
 57 |     h2 {
 58 | 
 59 |         font-size: 22px; text-align: center; margin: -7px 0 80px 0; padding: 5px 5px 6px 5px; display: inline-block; line-height: 30px;
 60 |         border-bottom: 1px solid #5a5243; border-top: 1px solid #5a5243;
 61 | 
 62 |     }
 63 | 
 64 |     .tabButton {
 65 | 
 66 |         font-size: 15px; font-weight: bold; padding: 15px 20px; 
 67 | 
 68 |     }
 69 | 
 70 |     .tab {
 71 | 
 72 |         padding: 20px; text-align: left;
 73 | 
 74 |     }
 75 | 
 76 |     h3 {
 77 | 
 78 |         font-size: 20px; font-weight: bold;
 79 | 
 80 |     }
 81 | 
 82 |     p {
 83 | 
 84 |         font-size: 15px; margin-top: 10px; 
 85 | 
 86 |     }
 87 | 
 88 |     @media screen and (min-width: 768px) {
 89 | 
 90 |         main {
 91 | 
 92 |             width: 700px;
 93 | 
 94 |         }
 95 | 
 96 |     }
 97 | 
 98 | </style>
 99 | 
100 | </head>
101 | 
102 | <body>
103 | 
104 |     <main>
105 | 
106 |         <h1>Tabsy <sup>[CSS]</sup></h1>
107 |         <h2>Simple and lightweight tabs toggler component written in pure CSS</h2>
108 |         
109 |         <div class="tabsy">
110 | 
111 |             <input type="radio" id="tab1" name="tab" checked>
112 |             <label class="tabButton" for="tab1">Tab One</label>
113 |             
114 |             <div class="tab">
115 |                 <div class="content">
116 |                     <h3>Heading 1</h3>
117 |                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
118 |                     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
119 |                 </div>
120 |             </div>
121 | 
122 |             <input type="radio" id="tab2" name="tab">
123 |             <label class="tabButton" for="tab2">Tab Two</label>
124 |             
125 |             <div class="tab">
126 |                 <div class="content">
127 |                     <h3>Heading 2</h3>
128 |                     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
129 |                     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
130 |                     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
131 |                 </div>
132 |             </div>
133 | 
134 |             <input type="radio" id="tab3" name="tab">
135 |             <label class="tabButton" for="tab3">Tab Three</label>
136 |             
137 |             <div class="tab">
138 |                 <div class="content">
139 |                     <h3>Heading 3</h3>
140 |                     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
141 |                     <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
142 |                 </div>
143 |             </div>
144 | 
145 |         </div>
146 | 
147 |     </main>
148 | 
149 | </body>
150 | 
151 | </html>


--------------------------------------------------------------------------------
/src/library/_animations.scss:
--------------------------------------------------------------------------------
 1 | @include keyframes(showTab) {
 2 | 
 3 |     from { 
 4 | 
 5 |         opacity: 0;
 6 |         transform: translateY(10px);
 7 | 
 8 |     }
 9 | 
10 |     to { 
11 | 
12 |         opacity: 1;
13 |         transform: translateY(0);
14 | 
15 |     }
16 | 
17 | }


--------------------------------------------------------------------------------
/src/library/_mixins.scss:
--------------------------------------------------------------------------------
 1 | // keyframes 
 2 | @mixin keyframes($animation-name) {
 3 | 
 4 |     @-webkit-keyframes #{$animation-name} {
 5 | 
 6 |         @content;
 7 | 
 8 |     }
 9 | 
10 |     @keyframes #{$animation-name} {
11 | 
12 |         @content;
13 | 
14 |     }
15 |     
16 | }
17 | 
18 | // animation 
19 | @mixin animation($args) {
20 | 
21 |     -webkit-animation: #{$args};
22 |     animation: #{$args};
23 | 
24 | }


--------------------------------------------------------------------------------
/src/library/_variables.scss:
--------------------------------------------------------------------------------
 1 | // Base Colors
 2 | $tabActiveBgColor: #fff; 
 3 | $tabActiveTextColor: #5a5243;
 4 | $tabNectiveBgColor: #5a5243; 
 5 | $tabNectiveTextColor: #F5F5F5; 
 6 | 
 7 | // Breakpoint
 8 | $breakpoint: 768px;
 9 | 
10 | // Transition
11 | $transitionSpeed: 200ms;


--------------------------------------------------------------------------------
/src/tabsy.scss:
--------------------------------------------------------------------------------
 1 | // Library
 2 | @import 'library/variables';
 3 | @import 'library/mixins';
 4 | @import 'library/animations';
 5 | 
 6 | .tabsy {
 7 | 
 8 |     > button { 
 9 | 
10 |         width: 100%; font-family: inherit; font-size: 100%; margin: 0; outline: 0; border: 0; 
11 |         vertical-align: baseline; box-sizing: border-box; background: transparent; 
12 | 
13 |     }
14 | 
15 |     > .tabButton {
16 | 
17 |         display: block; margin-top: 1px; background: $tabNectiveBgColor; color: $tabNectiveTextColor; text-align: center; 
18 |         transition: all $transitionSpeed ease-in-out;
19 | 
20 |     }
21 | 
22 |     > input {
23 | 
24 |         display: none;
25 | 
26 |         &:checked + label {
27 | 
28 |             & + .tab {
29 | 
30 |                 display: block; 
31 | 
32 |                 > .content {
33 | 
34 |                     @include animation(showTab $transitionSpeed ease-in-out); 
35 |                     
36 |                 }
37 | 
38 |             }
39 | 
40 |         }
41 | 
42 |     }
43 | 
44 |     > .tab {
45 | 
46 |         background: $tabActiveBgColor; display: none; 
47 | 
48 |     }
49 | 
50 |     @media screen and (min-width: $breakpoint) {
51 | 
52 |         display: flex; flex-wrap: wrap; 
53 | 
54 |         > .tabButton {
55 | 
56 |             order: 1; align-items: flex-start; cursor: pointer;
57 | 
58 |         }
59 | 
60 |         > input {
61 | 
62 |             &:checked + label {
63 | 
64 |                 background: $tabActiveBgColor; color: $tabActiveTextColor;
65 | 
66 |             }
67 | 
68 |         }
69 | 
70 |         > .tab {
71 | 
72 |             order: 2;
73 | 
74 |         }
75 | 
76 |     }
77 | 
78 | }


--------------------------------------------------------------------------------