beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Presentational changes to tabs

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-09 23:09:29 +02:00
parent a1d33728d1
commit edeeb4c839
5 changed files with 21 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/v2/DEVLOG.md
View file

@ -358,3 +358,4 @@
- Edited the demo page to include most of the new functionality.
- *TODO* Move `_accordion.scss` to the `legacy` folder etc.
- Deployed live demo.
- Minor change to the way `transition`s work for `tabs`, they will now all utilize the `transform` implementation.

2
docs/v2/index.html
View file

@ -2,7 +2,7 @@
<html>
<head>
<!-- Live demo styled as of 20161109 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/e9750940ad12ecafc6a75957f11bb342b907d62d/flavors/v2/mini-default.min.css">
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/e9750940ad12ecafc6a75957f11bb342b907d62d/flavors/v2/mini-default.min.css"> -->
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8">

15
flavors/v2/mini-default.css
View file

@ -870,7 +870,11 @@ progress {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: height 0.3s ease 0s;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
.tabs > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label {
@ -888,6 +892,8 @@ progress {
width: 100%;
overflow: auto;
margin: 0;
-webkit-transform: scaleY(1);
transform: scaleY(1);
border: 1px solid #78909c;
border-top: 0;
padding: 6px;
@ -914,19 +920,14 @@ progress {
.tabs.stacked > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div {
-webkit-order: initial;
order: initial;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s;
border-radius: 0; }
.tabs.stacked > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="radio"] + label + div + [type="checkbox"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
border: 1px solid #78909c;
border-top: 0; }
.tabs.stacked > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
height: auto;
-webkit-transform: scaleY(1);
transform: scaleY(1); }
height: auto; }
.tabs.stacked > [type="radio"] + label + div:last-of-type, .tabs.stacked > [type="checkbox"] + label + div:last-of-type {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }

2
flavors/v2/mini-default.min.css vendored
View file

File diff suppressed because one or more lines are too long

18
scss/v2/mini-shell/_tab.scss
View file

@ -78,7 +78,13 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
clip: rect(0 0 0 0);
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
transition: height 0.3s ease 0s;
// Presentation
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: top;
transform-origin: top;
transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s;
// Style for tab labels except the first
@if $tab-border-style != 0 {
& + [type="radio"] + label{
@ -115,6 +121,8 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
width: 100%;
overflow: auto;
margin: 0;
-webkit-transform: scaleY(1);
transform: scaleY(1);
@if $tab-panel-back-color != $back-color {
background: $tab-panel-back-color;
}
@ -164,13 +172,9 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
& > [type="radio"] + label + div, & > [type="checkbox"] + label + div {
-webkit-order: initial; // Reset order to show stacked tabs properly
order: initial;
// Presentation
-webkit-transform: scaleY(0);
transform: scaleY(0);
// Presentation
-webkit-transform-origin: top;
transform-origin: top;
transition: -webkit-transform 0.3s ease 0s,
transform 0.3s ease 0s;
@if $tab-border-radius != 0 {
border-radius: 0;
}
@ -183,8 +187,6 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
}
& > [type="radio"]:checked + label + div, & > [type="checkbox"]:checked + label + div {
height: auto;
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
@if $tab-border-radius != 0 {
& > [type="radio"] + label + div:last-of-type, & > [type="checkbox"] + label + div:last-of-type {