mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-01-18 05:18:25 +01:00
Code Issues Releases Wiki Activity

Tab module tweaks

Browse Source
This commit is contained in:
Angelos Chalaris 2016-12-06 11:43:10 +02:00
parent 928112b979
commit 5824b6fb10
5 changed files with 26 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
dist/mini-default.css vendored
View File

@ -1023,15 +1023,11 @@ table.striped tr:nth-of-type(2n) > td {
cursor: pointer;
-webkit-transition: background 0.3s ease 0s;
transition: background 0.3s ease 0s;
background: #cfd8dc;
border: 1px solid #78909c;
padding: 4px 6px; }
.tabs > label:first-of-type {
border-top-left-radius: 2px; }
.tabs > label:last-of-type {
border-top-right-radius: 2px; }
background: #e0e0e0;
border: 1px solid #9e9e9e;
padding: 8px 12px; }
.tabs > label:hover, .tabs > label:active, .tabs > label:focus {
background: rgba(207, 216, 220, 0.75); }
background: rgba(224, 224, 224, 0.8); }
.tabs > [type="radio"], .tabs.stacked > [type="checkbox"] {
display: none;
visibility: hidden; }
@ -1053,17 +1049,15 @@ table.striped tr:nth-of-type(2n) > td {
-webkit-transform-origin: top;
transform-origin: top;
-webkit-transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s;
transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s; }
.tabs > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label {
border-left: 0; }
.tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
border-left: 0; }
.tabs > [type="radio"]:checked + label, .tabs.stacked > [type="checkbox"]:checked + label {
background: #b0bec5; }
background: #eeeeee; }
.tabs > [type="radio"]:checked + label:hover, .tabs > [type="radio"]:checked + label:active, .tabs > [type="radio"]:checked + label:focus, .tabs.stacked > [type="checkbox"]:checked + label:hover, .tabs.stacked > [type="checkbox"]:checked + label:active, .tabs.stacked > [type="checkbox"]:checked + label:focus {
background: rgba(176, 190, 197, 0.75); }
background: rgba(238, 238, 238, 0.8); }
.tabs > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
box-sizing: border-box;
position: relative;
@ -1073,9 +1067,10 @@ table.striped tr:nth-of-type(2n) > td {
margin: 0;
-webkit-transform: scaleY(1);
transform: scaleY(1);
border: 1px solid #78909c;
background: #fafafa;
border: 1px solid #9e9e9e;
border-top: 0;
padding: 6px;
padding: 8px;
clip: auto;
-webkit-clip-path: inset(0%);
clip-path: inset(0%); }
@ -1087,29 +1082,16 @@ table.striped tr:nth-of-type(2n) > td {
.tabs.stacked > label {
-webkit-order: initial;
order: initial; }
.tabs.stacked > label:last-of-type {
border-top-right-radius: 0;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
.tabs.stacked > label:first-of-type {
border-top-right-radius: 2px; }
.tabs.stacked > [type="radio"]:checked + label, .tabs.stacked > [type="checkbox"]:checked + label {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.tabs.stacked > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div {
-webkit-order: initial;
order: initial;
-webkit-transform-origin: top;
transform-origin: top;
border-radius: 0; }
transform-origin: top; }
.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 #9e9e9e;
border-top: 0; }
.tabs.stacked > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
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; }
@media (max-width: 767px) {
.tabs {
@ -1119,25 +1101,12 @@ table.striped tr:nth-of-type(2n) > td {
.tabs > label {
-webkit-order: initial;
order: initial; }
.tabs > label:first-of-type {
border-top-right-radius: 2px; }
.tabs > label:last-of-type {
border-top-right-radius: 0;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
.tabs > [type="radio"]:checked + label {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0; }
.tabs > [type="radio"] + label + div {
-webkit-order: initial;
order: initial;
border-radius: 0; }
order: initial; }
.tabs > [type="radio"] + label + div + [type="radio"] + label {
border: 1px solid #78909c;
border-top: 0; }
.tabs > [type="radio"] + label + div:last-of-type {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; } }
border: 1px solid #9e9e9e;
border-top: 0; } }
mark {
background: #0277bd;
color: #f5f5f5;

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
docs/v2/DEVLOG.md
View File

@ -609,3 +609,4 @@
- Logo in `header` changed to reflect the new style.
- Changed `button` default coloration to a material color palette from Google Material Design, so that it will now be more consistent. Tweaked `opacity` to make this work.
- Bumped demo stylesheet to latest commit.
- Tweaked `tab` module colors and variables for consistency with the rest of the modules.

2
docs/v2/demo.html
View File

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

16
src/flavors/mini-default.scss
View File

@ -350,18 +350,18 @@ $card-section-padding1-padding: 10px 12px 10px; // Padding for card sect
$tab-container-name: 'tabs'; // Class name for the tabs' container
$tab-container-box-shadow: // Box shadow for the tabs' container
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
$tab-label-back-color: #cfd8dc; // Background color for tabs' labels
$tab-label-back-color: #e0e0e0; // Background color for tabs' labels
$tab-label-fore-color: $fore-color; // Text color for tabs' labels
$tab-label-selected-back-color: #b0bec5; // Background color for open tab's label
$tab-label-selected-back-color: #eeeeee; // Background color for open tab's label
$tab-label-selected-fore-color: $fore-color; // Text color for open tab's label
$tab-label-hover-opacity: 0.75; // Opacity of the tab's label on hover
$tab-label-padding: 4px 6px; // Padding for tabs' labels
$tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover
$tab-label-padding: 8px 12px; // Padding for tabs' labels
$tab-label-height: 26px; // Height for tabs' labels
$tab-border-style: 1px solid #78909c; // Border style for tabs
$tab-border-radius: 2px; // Border radius for tabs
$tab-panel-back-color: $back-color; // Background color for tabs' panels
$tab-border-style: 1px solid #9e9e9e; // Border style for tabs
$tab-border-radius: 0; // Border radius for tabs
$tab-panel-back-color: #fafafa; // Background color for tabs' panels
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
$tab-panel-padding: 6px; // Padding for tabs' panels
$tab-panel-padding: 8px; // Padding for tabs' panels
$tab-panel-height: 400px; // Height for tabs' panels
$tab-stacked-breakpoint: 767px; // Breakpoint for tabs layout (stacked/horizontal)
$tab-stacked-name: 'stacked'; // Class name for stacked tabs