Presentational changes to tabs
This commit is contained in:
parent
a1d33728d1
commit
edeeb4c839
|
@ -358,3 +358,4 @@
|
||||||
- Edited the demo page to include most of the new functionality.
|
- Edited the demo page to include most of the new functionality.
|
||||||
- *TODO* Move `_accordion.scss` to the `legacy` folder etc.
|
- *TODO* Move `_accordion.scss` to the `legacy` folder etc.
|
||||||
- Deployed live demo.
|
- Deployed live demo.
|
||||||
|
- Minor change to the way `transition`s work for `tabs`, they will now all utilize the `transform` implementation.
|
|
@ -2,7 +2,7 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<!-- Live demo styled as of 20161109 -->
|
<!-- 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">
|
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
|
||||||
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
|
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
|
@ -870,7 +870,11 @@ progress {
|
||||||
clip: rect(0 0 0 0);
|
clip: rect(0 0 0 0);
|
||||||
-webkit-clip-path: inset(100%);
|
-webkit-clip-path: inset(100%);
|
||||||
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-left-radius: 2px;
|
||||||
border-bottom-right-radius: 2px; }
|
border-bottom-right-radius: 2px; }
|
||||||
.tabs > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label {
|
.tabs > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label {
|
||||||
|
@ -888,6 +892,8 @@ progress {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
-webkit-transform: scaleY(1);
|
||||||
|
transform: scaleY(1);
|
||||||
border: 1px solid #78909c;
|
border: 1px solid #78909c;
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
|
@ -914,19 +920,14 @@ progress {
|
||||||
.tabs.stacked > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div {
|
.tabs.stacked > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div {
|
||||||
-webkit-order: initial;
|
-webkit-order: initial;
|
||||||
order: initial;
|
order: initial;
|
||||||
-webkit-transform: scaleY(0);
|
|
||||||
transform: scaleY(0);
|
|
||||||
-webkit-transform-origin: top;
|
-webkit-transform-origin: top;
|
||||||
transform-origin: top;
|
transform-origin: top;
|
||||||
transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s;
|
|
||||||
border-radius: 0; }
|
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 {
|
.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: 1px solid #78909c;
|
||||||
border-top: 0; }
|
border-top: 0; }
|
||||||
.tabs.stacked > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
|
.tabs.stacked > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
|
||||||
height: auto;
|
height: auto; }
|
||||||
-webkit-transform: scaleY(1);
|
|
||||||
transform: scaleY(1); }
|
|
||||||
.tabs.stacked > [type="radio"] + label + div:last-of-type, .tabs.stacked > [type="checkbox"] + label + div:last-of-type {
|
.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-left-radius: 2px;
|
||||||
border-bottom-right-radius: 2px; }
|
border-bottom-right-radius: 2px; }
|
||||||
|
|
2
flavors/v2/mini-default.min.css
vendored
2
flavors/v2/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -78,7 +78,13 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
|
||||||
clip: rect(0 0 0 0);
|
clip: rect(0 0 0 0);
|
||||||
-webkit-clip-path: inset(100%);
|
-webkit-clip-path: inset(100%);
|
||||||
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
|
// Style for tab labels except the first
|
||||||
@if $tab-border-style != 0 {
|
@if $tab-border-style != 0 {
|
||||||
& + [type="radio"] + label{
|
& + [type="radio"] + label{
|
||||||
|
@ -115,6 +121,8 @@ $tab-stacked-name: 'stacked' !default; // Class name for stacked tabs
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
-webkit-transform: scaleY(1);
|
||||||
|
transform: scaleY(1);
|
||||||
@if $tab-panel-back-color != $back-color {
|
@if $tab-panel-back-color != $back-color {
|
||||||
background: $tab-panel-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 {
|
& > [type="radio"] + label + div, & > [type="checkbox"] + label + div {
|
||||||
-webkit-order: initial; // Reset order to show stacked tabs properly
|
-webkit-order: initial; // Reset order to show stacked tabs properly
|
||||||
order: initial;
|
order: initial;
|
||||||
// Presentation
|
// Presentation
|
||||||
-webkit-transform: scaleY(0);
|
|
||||||
transform: scaleY(0);
|
|
||||||
-webkit-transform-origin: top;
|
-webkit-transform-origin: top;
|
||||||
transform-origin: top;
|
transform-origin: top;
|
||||||
transition: -webkit-transform 0.3s ease 0s,
|
|
||||||
transform 0.3s ease 0s;
|
|
||||||
@if $tab-border-radius != 0 {
|
@if $tab-border-radius != 0 {
|
||||||
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 {
|
& > [type="radio"]:checked + label + div, & > [type="checkbox"]:checked + label + div {
|
||||||
height: auto;
|
height: auto;
|
||||||
-webkit-transform: scaleY(1);
|
|
||||||
transform: scaleY(1);
|
|
||||||
}
|
}
|
||||||
@if $tab-border-radius != 0 {
|
@if $tab-border-radius != 0 {
|
||||||
& > [type="radio"] + label + div:last-of-type, & > [type="checkbox"] + label + div:last-of-type {
|
& > [type="radio"] + label + div:last-of-type, & > [type="checkbox"] + label + div:last-of-type {
|
||||||
|
|
Loading…
Reference in a new issue