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

1
.gitignore vendored
View File

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

View File

@ -4883,21 +4883,21 @@ section > h2 {
/* pagination */ /* pagination */
/* pre */ /* pre */
/* tag */ /* tag */
.tab .tab-links { .tabview .tab-links {
padding: 0.3rem 0 0 0.3rem; } padding: 0.3rem 0 0 0.3rem; }
.tab .tab-links label { .tabview .tab-links label {
text-shadow: 1px 1px 1px #fff; text-shadow: 1px 1px 1px #fff;
font-size: 0.9em; font-size: 0.9em;
cursor: pointer; } cursor: pointer; }
.tab .tab-links .active a { .tabview .tab-links .active a {
cursor: default; } cursor: default; }
.tab .tab-links li { .tabview .tab-links li {
display: inline-block; } display: inline-block; }
.tab .tab-content > input { .tabview .tab-content > input {
display: none; } display: none; }
.tab .tab-content input + div { .tabview .tab-content input + div {
display: none; } display: none; }
.tab .tab-content input:checked + div { .tabview .tab-content input:checked + div {
display: inherit; } display: inherit; }
.tab-1 .tab-links { .tab-1 .tab-links {
@ -4942,21 +4942,11 @@ section > h2 {
border-top: 1px solid #b7b7b7; } border-top: 1px solid #b7b7b7; }
.tab-2 .tab-links label { .tab-2 .tab-links label {
padding: 5px 10px 5px 10px; 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); }
.tab-2 .tab-links li { .tab-2 .tab-links li {
margin: 0 5px 15px 0; } 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: #fff;
background: -moz-linear-gradient(top, #fff 0, #f5f5ff 100); 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)); 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 */ /* pagination */
/* pre */ /* pre */
/* tag */ /* tag */
.tab .tab-links { .tabview .tab-links {
padding: 0.3rem 0 0 0.3rem; } padding: 0.3rem 0 0 0.3rem; }
.tab .tab-links label { .tabview .tab-links label {
text-shadow: 1px 1px 1px #fff; text-shadow: 1px 1px 1px #fff;
font-size: 0.9em; font-size: 0.9em;
cursor: pointer; } cursor: pointer; }
.tab .tab-links .active a { .tabview .tab-links .active a {
cursor: default; } cursor: default; }
.tab .tab-links li { .tabview .tab-links li {
display: inline-block; } display: inline-block; }
.tab .tab-content > input { .tabview .tab-content > input {
display: none; } display: none; }
.tab .tab-content input + div { .tabview .tab-content input + div {
display: none; } display: none; }
.tab .tab-content input:checked + div { .tabview .tab-content input:checked + div {
display: inherit; } display: inherit; }
.tab-1 .tab-links { .tab-1 .tab-links {
@ -77,21 +77,11 @@
border-top: 1px solid #b7b7b7; } border-top: 1px solid #b7b7b7; }
.tab-2 .tab-links label { .tab-2 .tab-links label {
padding: 5px 10px 5px 10px; 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); }
.tab-2 .tab-links li { .tab-2 .tab-links li {
margin: 0 5px 15px 0; } 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: #fff;
background: -moz-linear-gradient(top, #fff 0, #f5f5ff 100); 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)); 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"; @import "_mixins", "_vars";
.tab { .tabview {
.tab-links { .tab-links {
padding: 0.3rem 0 0 0.3rem; padding: 0.3rem 0 0 0.3rem;
@ -103,17 +103,15 @@
.tab-links { .tab-links {
label { label {
padding: 5px 10px 5px 10px; 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 { li {
margin: 0 5px 15px 0; margin: 0 5px 15px 0;
} }
}
.tab-links .active a, .tab-links label:hover { .active a, .active label {
@include gradient-top-bottom(#fff, 0, $content-background-color, 100, #fff); 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> <h1>Tabs</h1>
<h2>With Container</h2> <h2>With Container</h2>
<section class="box-container wf-100"> <section class="box-container wf-100">
<div class="tab tab-1"> <div class="tabview tab-1">
<ul class="tab-links"> <ul class="tab-links">
<li><label for="c-tab-1">TAAAB</label></li> <li><label for="c-tab-1">TAAAB</label></li>
<li class="active"><label for="c-tab-2">TAAAB</label></li> <li class="active"><label for="c-tab-2">TAAAB</label></li>
@ -621,7 +621,7 @@
Test content Test content
</div> </div>
<input type="radio" id="c-tab-2" name="tabular-1"> <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> <p>Test content 2</p><p>asdf</p>
</div> </div>
</div> </div>
@ -630,7 +630,7 @@
<h2>Without Container</h2> <h2>Without Container</h2>
<section class="box-container wf-100"> <section class="box-container wf-100">
<div class="tab tab-2"> <div class="tabview tab-2">
<ul class="tab-links"> <ul class="tab-links">
<li><label for="c-tab2-1">TAAAB</label></li> <li><label for="c-tab2-1">TAAAB</label></li>
<li class="active"><label for="c-tab2-2">TAAAB</label></li> <li class="active"><label for="c-tab2-2">TAAAB</label></li>
@ -641,7 +641,7 @@
Test content Test content
</div> </div>
<input type="radio" id="c-tab2-2" name="tabular-2"> <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> <p>Test content 2</p><p>asdf</p>
</div> </div>
</div> </div>

View File

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

View File

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