MY GTECH
airram features
<head><style> $color__main: #444; $color__active: #676c6e; $background__active: none; $width__tabs-side: 400px; $breakpoint: 800px; @mixin tab-active() { background: #8abe25; color: #fff; } /* Some styles to make this demo look pretty (or at least decent) If you want to style everything yourself, you shouldn't need these */ @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,900'); body { padding: 1em; background: none; color: #444; font-family: 'Roboto', sans-serif; font-weight: 100; a { text-decoration: none; color: #fff; } p { margin-top: 0; } div { box-sizing: border-box; } } h2 { margin: 2em auto 0; text-align: center; } .tabbed-content { background: #fff; box-shadow: none; max-width: 1600px; padding: 1em; margin: 1em auto; } .tabs { ul { margin: 1em; padding: 0 0 1em 0; font-weight: normal; li { background: #7B7B7B; a { padding: .5em 1em; &:hover, &.active { @include tab-active(); } } } } } .item { margin-bottom: 2px; &::before { cursor: pointer; font-weight: bold; background: $background__active; padding: .5em; display: block; } &.active { &::before { @include tab-active(); } .item-content { padding: 1em; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } } } @media all and (min-width: $breakpoint ) { .item { &.active { .item-content { padding-top: 0; } } } .tabs-side { .tabs { li { margin-bottom: 2px; } } } } /* The project specific CSS starts here This is the minimum CSS that you will need in order for this to work */ // Accordion for small screens (mobile first principle) .tabbed-content { .tabs { display: none; } .item { min-height: 2em; // We need a minimum height for each item or else the accordion buttons would dissapear width:400px; &::before { content: attr(data-title); // Instead of polluting the HTML with a duplicate set of tabs, we get the accordion using the data-title attribute. } .item-content { // We hide the inactive content with zero opacity instead of "display:none" because this allows us to apply transition effects if we want. opacity: 0; visibility: hidden; height: 0; width:400px; } &.active { .item-content { opacity: 1; visibility: visible; height:auto; width:400px; } } } } // Tabs for larger screens @media all and (min-width: $breakpoint) { .tabbed-content { .tabs { display: block; li { display: inline-block; a { display: block; } } } .item { min-height: 0; &::before { display: none; } } // Tabs on the side (works only on big screens) &.tabs-side { .tabs { width: $width__tabs-side; float: left; li { display: block; } } .item { margin-left: $width__tabs-side; } } } } </style></head>
Making your life easier
We have designed the Gtech AirRam dirt collection system to be easy to empty. As you clean, dirt is collected and compressed into a capsule in the head of the vacuum and is emptied with a simple slide of the ejector arm.
Tab Two Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab Three Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Tab Three Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Tab Three Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Tab Three Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
