Style bug fixes

This commit is contained in:
Dennis Eichhorn 2019-01-13 22:45:52 +01:00
parent 1021e185e7
commit d71b1605a1
65 changed files with 55 additions and 76 deletions

3
.gitignore vendored
View File

@ -1 +1,2 @@
*.map
*.map
*.scssc

View File

@ -4883,21 +4883,21 @@ section > h2 {
/* pagination */
/* pre */
/* tag */
.tab .tab-links {
.tabview .tab-links {
padding: 0.3rem 0 0 0.3rem; }
.tab .tab-links label {
.tabview .tab-links label {
text-shadow: 1px 1px 1px #fff;
font-size: 0.9em;
cursor: pointer; }
.tab .tab-links .active a {
.tabview .tab-links .active a {
cursor: default; }
.tab .tab-links li {
.tabview .tab-links li {
display: inline-block; }
.tab .tab-content > input {
.tabview .tab-content > input {
display: none; }
.tab .tab-content input + div {
.tabview .tab-content input + div {
display: none; }
.tab .tab-content input:checked + div {
.tabview .tab-content input:checked + div {
display: inherit; }
.tab-1 .tab-links {
@ -4942,21 +4942,11 @@ section > h2 {
border-top: 1px solid #b7b7b7; }
.tab-2 .tab-links label {
padding: 5px 10px 5px 10px;
-moz-box-shadow: inset 1px 1px 0px 0px #fff;
-webkit-box-shadow: inset 1px 1px 0px 0px #fff;
box-shadow: inset 1px 1px 0px 0px #fff;
border: 1px solid #b7b7b7;
background: #f5f5ff;
background: -moz-linear-gradient(top, #e0e3eb 0, #fff 100);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #fff));
background: -webkit-linear-gradient(top, #e0e3eb 0, #fff 100);
background: -o-linear-gradient(top, #e0e3eb 0, #fff 100);
background: -ms-linear-gradient(top, #e0e3eb 0, #fff 100);
background: linear-gradient(to bottom, #e0e3eb 0, #fff 100); }
padding: 5px 10px 5px 10px; }
.tab-2 .tab-links li {
margin: 0 5px 15px 0; }
.tab-2 .tab-links .active a, .tab-2 .tab-links label:hover {
.tab-2 .tab-links .active a, .tab-2 .tab-links .active label {
border: 1px solid #b7b7b7;
background: #fff;
background: -moz-linear-gradient(top, #fff 0, #f5f5ff 100);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100, #f5f5ff));

30
tab.css
View File

@ -18,21 +18,21 @@
/* pagination */
/* pre */
/* tag */
.tab .tab-links {
.tabview .tab-links {
padding: 0.3rem 0 0 0.3rem; }
.tab .tab-links label {
.tabview .tab-links label {
text-shadow: 1px 1px 1px #fff;
font-size: 0.9em;
cursor: pointer; }
.tab .tab-links .active a {
.tabview .tab-links .active a {
cursor: default; }
.tab .tab-links li {
.tabview .tab-links li {
display: inline-block; }
.tab .tab-content > input {
.tabview .tab-content > input {
display: none; }
.tab .tab-content input + div {
.tabview .tab-content input + div {
display: none; }
.tab .tab-content input:checked + div {
.tabview .tab-content input:checked + div {
display: inherit; }
.tab-1 .tab-links {
@ -77,21 +77,11 @@
border-top: 1px solid #b7b7b7; }
.tab-2 .tab-links label {
padding: 5px 10px 5px 10px;
-moz-box-shadow: inset 1px 1px 0px 0px #fff;
-webkit-box-shadow: inset 1px 1px 0px 0px #fff;
box-shadow: inset 1px 1px 0px 0px #fff;
border: 1px solid #b7b7b7;
background: #f5f5ff;
background: -moz-linear-gradient(top, #e0e3eb 0, #fff 100);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #fff));
background: -webkit-linear-gradient(top, #e0e3eb 0, #fff 100);
background: -o-linear-gradient(top, #e0e3eb 0, #fff 100);
background: -ms-linear-gradient(top, #e0e3eb 0, #fff 100);
background: linear-gradient(to bottom, #e0e3eb 0, #fff 100); }
padding: 5px 10px 5px 10px; }
.tab-2 .tab-links li {
margin: 0 5px 15px 0; }
.tab-2 .tab-links .active a, .tab-2 .tab-links label:hover {
.tab-2 .tab-links .active a, .tab-2 .tab-links .active label {
border: 1px solid #b7b7b7;
background: #fff;
background: -moz-linear-gradient(top, #fff 0, #f5f5ff 100);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100, #f5f5ff));

View File

@ -1,6 +1,6 @@
@import "_mixins", "_vars";
.tab {
.tabview {
.tab-links {
padding: 0.3rem 0 0 0.3rem;
@ -103,17 +103,15 @@
.tab-links {
label {
padding: 5px 10px 5px 10px;
@include box-shadow-out(#fff);
border: 1px solid $content-border-color;
@include gradient-top-bottom(#e0e3eb, 0, #fff, 100, $content-background-color);
}
li {
margin: 0 5px 15px 0;
}
}
.tab-links .active a, .tab-links label:hover {
@include gradient-top-bottom(#fff, 0, $content-background-color, 100, #fff);
.active a, .active label {
border: 1px solid $content-border-color;
@include gradient-top-bottom(#fff, 0, $content-background-color, 100, #fff);
}
}
}

View File

@ -610,7 +610,7 @@
<h1>Tabs</h1>
<h2>With Container</h2>
<section class="box-container wf-100">
<div class="tab tab-1">
<div class="tabview tab-1">
<ul class="tab-links">
<li><label for="c-tab-1">TAAAB</label></li>
<li class="active"><label for="c-tab-2">TAAAB</label></li>
@ -621,7 +621,7 @@
Test content
</div>
<input type="radio" id="c-tab-2" name="tabular-1">
<div class="tab tab-2">
<div class="tab">
<p>Test content 2</p><p>asdf</p>
</div>
</div>
@ -630,7 +630,7 @@
<h2>Without Container</h2>
<section class="box-container wf-100">
<div class="tab tab-2">
<div class="tabview tab-2">
<ul class="tab-links">
<li><label for="c-tab2-1">TAAAB</label></li>
<li class="active"><label for="c-tab2-2">TAAAB</label></li>
@ -641,7 +641,7 @@
Test content
</div>
<input type="radio" id="c-tab2-2" name="tabular-2">
<div class="tab tab-2">
<div class="tab">
<p>Test content 2</p><p>asdf</p>
</div>
</div>

View File

@ -167,11 +167,11 @@
<li><a href="?page=forms">Forms</a></li>
<li><input id="nav-help" type="checkbox" checked>
<ul>
<li><span class="centerText">
<li><label for="nav-Help">
<span class="centerText">
<i class="fa fa-question-circle"></i>
</span>
UI Elements
<label for="nav-Help">
<i class="fa fa-chevron-down min"></i>
<i class="fa fa-chevron-up max"></i>
</label>
@ -188,11 +188,11 @@
</li>
<li><input id="nav-help" type="checkbox" checked>
<ul>
<li><span class="centerText">
<li><label for="nav-Help">
<span class="centerText">
<i class="fa fa-question-circle"></i>
</span>
Images
<label for="nav-Help">
<i class="fa fa-chevron-down min"></i>
<i class="fa fa-chevron-up max"></i>
</label>
@ -204,11 +204,11 @@
</li>
<li><input id="nav-help" type="checkbox" checked>
<ul>
<li><span class="centerText">
<li><label for="nav-Help">
<span class="centerText">
<i class="fa fa-question-circle"></i>
</span>
Tables & Lists
<label for="nav-Help">
<i class="fa fa-chevron-down min"></i>
<i class="fa fa-chevron-up max"></i>
</label>
@ -219,11 +219,11 @@
</li>
<li><input id="nav-help" type="checkbox" checked>
<ul>
<li><span class="centerText">
<li><label for="nav-Help">
<span class="centerText">
<i class="fa fa-question-circle"></i>
</span>
Layout
<label for="nav-Help">
<i class="fa fa-chevron-down min"></i>
<i class="fa fa-chevron-up max"></i>
</label>
@ -234,11 +234,11 @@
</li>
<li><input id="nav-help" type="checkbox" checked>
<ul>
<li><span class="centerText">
<li><label for="nav-Help">
<span class="centerText">
<i class="fa fa-question-circle"></i>
</span>
Interaction
<label for="nav-Help">
<i class="fa fa-chevron-down min"></i>
<i class="fa fa-chevron-up max"></i>
</label>
@ -249,11 +249,11 @@
</li>
<li><input id="nav-help" type="checkbox" checked>
<ul>
<li><span class="centerText">
<li><label for="nav-Help">
<span class="centerText">
<i class="fa fa-question-circle"></i>
</span>
Views
<label for="nav-Help">
<i class="fa fa-chevron-down min"></i>
<i class="fa fa-chevron-up max"></i>
</label>
@ -265,11 +265,11 @@
</li>
<li><input id="nav-help" type="checkbox" checked>
<ul>
<li><span class="centerText">
<li><label for="nav-Help">
<span class="centerText">
<i class="fa fa-question-circle"></i>
</span>
JS Tests
<label for="nav-Help">
<i class="fa fa-chevron-down min"></i>
<i class="fa fa-chevron-up max"></i>
</label>
@ -280,11 +280,11 @@
</li>
<li><input id="nav-help" type="checkbox" checked>
<ul>
<li><span class="centerText">
<li><label for="nav-Help">
<span class="centerText">
<i class="fa fa-question-circle"></i>
</span>
Charts
<label for="nav-Help">
<i class="fa fa-chevron-down min"></i>
<i class="fa fa-chevron-up max"></i>
</label>

View File

@ -1,7 +1,7 @@
<div class="row">
<div class="col-xs-12">
<div class="box wf-100">
<div class="tab tab-1">
<div class="tabview tab-1">
<ul class="tab-links">
<li class="active"><label for="c-tab-1">TAAAB</label></li>
<li><label for="c-tab-2">TAAAB</label></li>
@ -12,7 +12,7 @@
Test content
</div>
<input type="radio" id="c-tab-2" name="tabular-1">
<div class="tab tab-2">
<div class="tab">
<p>Test content 2</p><p>asdf</p>
</div>
</div>
@ -24,7 +24,7 @@
<div class="row">
<div class="col-xs-6">
<div class="box wf-100">
<div class="tab tab-1 left">
<div class="tabview tab-1 left">
<ul class="tab-links">
<li class="active"><label for="c-tab-1-2">TAAAB</label></li>
<li><label for="c-tab-2-3">TAAAB</label></li>
@ -35,7 +35,7 @@
Test content
</div>
<input type="radio" id="c-tab-2-3" name="tabular-3">
<div class="tab tab-2">
<div class="tab">
<p>Test content 2</p><p>asdf</p>
</div>
</div>
@ -47,7 +47,7 @@
<div class="row">
<div class="col-xs-12">
<div class="box wf-100">
<div class="tab tab-2">
<div class="tabview tab-2">
<ul class="tab-links">
<li><label for="c-tab2-1">TAAAB</label></li>
<li class="active"><label for="c-tab2-2">TAAAB</label></li>
@ -58,7 +58,7 @@
Test content
</div>
<input type="radio" id="c-tab2-2" name="tabular-2">
<div class="tab tab-2">
<div class="tab">
<p>Test content 2</p><p>asdf</p>
</div>
</div>