Simplyfing layout

This commit is contained in:
Dennis Eichhorn 2016-05-17 20:15:23 +02:00
parent d038a10d59
commit be8bd41f40
7 changed files with 50 additions and 161 deletions

View File

@ -5,7 +5,6 @@
}
button, input[type="submit"], input[type="button"], a.button {
@include border-radius(3px);
border: 1px solid $content-border-color;
cursor: pointer;
padding: 6px;
@ -61,12 +60,7 @@ ul.btns li {
@include box-shadow-out(#ffffff);
&:first-child {
@include border-left-radius(3px);
}
&:last-child {
@include border-right-radius(3px);
border-right: 1px solid $content-border-color;
}
}
@ -90,7 +84,6 @@ ul.btns .active {
}
button.simple {
@include border-radius(3px);
background: $content-background-color;
border: 1px solid $content-border-color;
text-shadow: -1px -1px 1px #ffffff;

View File

@ -24,7 +24,6 @@ input[type="email"],
input[type="date"],
input[type="number"],
input[type="datetime-local"] {
@include border-radius(2px);
color: #454545;
background: #fff;
width: 100%;
@ -95,8 +94,6 @@ input[type="text"]:focus {
flex-wrap: nowrap;
button {
@include border-left-radius(2px);
@include border-right-radius(0px);
@include box-sizing(border-box);
display: inline-block;
background: #fff;
@ -126,7 +123,6 @@ input[type="text"]:focus {
}
input {
@include border-left-radius(0px);
@include box-sizing(border-box);
font-size: 1em;

View File

@ -100,10 +100,9 @@ label[for="nav-trigger"] {
.nav-top {
margin: 5px 0 0 5px;
display: block;
background: $content-background-color;
background: #ffffff;
border: 1px solid $content-border-color;
@include border-radius(3px);
@include box-shadow-top(#ffffff);
> li {
@ -112,13 +111,12 @@ label[for="nav-trigger"] {
&:first-child {
@include box-shadow-out(#ffffff);
@include border-left-radius(3px);
}
}
}
.nav-top li {
background: $content-background-color;
background: #fff;
display: inline-block;
margin-right: -4px;
position: relative;

View File

@ -1,27 +1,31 @@
@import "mixin", "color";
section.box {
.box {
@include box-sizing(border-box);
margin: 5px 0 0 5px;
display: inline-block;
}
section.box {
@include box-shadow-bottom(#f1f1f1);
border: 1px solid $content-border-color;
background: #fff;
}
.box .inner {
@include box-sizing(border-box);
@include border-radius(3px);
@include box-shadow-out(#ffffff);
border: 1px solid $content-border-color;
background: $content-background-color;
padding: 10px;
}
section > h1 {
@include box-sizing(border-box);
@include box-shadow-bottom(#f1f1f1);
font-size: 1.3em;
border-bottom: 1px solid $content-border-color;
margin-bottom: 5px;
text-shadow: 1px 1px 1px #ffffff;
section header {
> h1 {
margin: 10px 10px 0 10px;
padding-bottom: 5px;
font-size: 1.1em;
text-shadow: 1px 1px 1px #ffffff;
border-bottom: 1px solid #e1e1e1;
}
}
section > h2 {

View File

@ -3183,11 +3183,6 @@ input[type="email"],
input[type="date"],
input[type="number"],
input[type="datetime-local"] {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
background-clip: padding-box;
color: #454545;
background: #fff;
width: 100%;
@ -3246,16 +3241,6 @@ input[type="range"] {
flex-direction: row;
flex-wrap: nowrap; }
.input button {
-webkit-border-bottom-left-radius: 2px;
border-bottom-left-radius: 2px;
-webkit-border-top-left-radius: 2px;
border-top-left-radius: 2px;
background-clip: padding-box;
-webkit-border-bottom-right-radius: 0px;
border-bottom-right-radius: 0px;
-webkit-border-top-right-radius: 0px;
border-top-right-radius: 0px;
background-clip: padding-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@ -3280,11 +3265,6 @@ input[type="range"] {
position: relative;
vertical-align: middle; }
.input input {
-webkit-border-bottom-left-radius: 0px;
border-bottom-left-radius: 0px;
-webkit-border-top-left-radius: 0px;
border-top-left-radius: 0px;
background-clip: padding-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@ -3648,11 +3628,6 @@ blockquote {
cursor: pointer; }
button, input[type="submit"], input[type="button"], a.button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
background-clip: padding-box;
border: 1px solid #b7b7b7;
cursor: pointer;
padding: 6px;
@ -3763,18 +3738,7 @@ ul.btns li {
-moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
box-shadow: inset 1px 1px 0px 0px #ffffff; }
ul.btns li:first-child {
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
background-clip: padding-box; }
ul.btns li:last-child {
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
background-clip: padding-box;
border-right: 1px solid #b7b7b7; }
ul.btns a {
@ -3792,11 +3756,6 @@ ul.btns .active {
cursor: default; }
button.simple {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
background-clip: padding-box;
background: #f5f5ff;
border: 1px solid #b7b7b7;
text-shadow: -1px -1px 1px #ffffff;
@ -3993,13 +3952,8 @@ label[for="nav-trigger"] {
.nav-top {
margin: 5px 0 0 5px;
display: block;
background: #f5f5ff;
background: #ffffff;
border: 1px solid #b7b7b7;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
background-clip: padding-box;
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff; }
@ -4011,15 +3965,10 @@ label[for="nav-trigger"] {
.nav-top > li:first-child {
-moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
box-shadow: inset 1px 1px 0px 0px #ffffff;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
background-clip: padding-box; }
box-shadow: inset 1px 1px 0px 0px #ffffff; }
.nav-top li {
background: #f5f5ff;
background: #fff;
display: inline-block;
margin-right: -4px;
position: relative;
@ -4365,40 +4314,35 @@ main {
.darkblue {
background: #7ba9d1; }
section.box {
.box {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 5px 0 0 5px;
display: inline-block; }
section.box {
-moz-box-shadow: 0px 1px 0px 0px #f1f1f1;
-webkit-box-shadow: 0px 1px 0px 0px #f1f1f1;
box-shadow: 0px 1px 0px 0px #f1f1f1;
border: 1px solid #b7b7b7;
background: #fff; }
.box .inner {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
background-clip: padding-box;
-moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
box-shadow: inset 1px 1px 0px 0px #ffffff;
border: 1px solid #b7b7b7;
background: #f5f5ff;
padding: 10px; }
section > h1 {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: 0px 1px 0px 0px #f1f1f1;
-webkit-box-shadow: 0px 1px 0px 0px #f1f1f1;
box-shadow: 0px 1px 0px 0px #f1f1f1;
font-size: 1.3em;
border-bottom: 1px solid #b7b7b7;
margin-bottom: 5px;
text-shadow: 1px 1px 1px #ffffff; }
section header > h1 {
margin: 10px 10px 0 10px;
padding-bottom: 5px;
font-size: 1.1em;
text-shadow: 1px 1px 1px #ffffff;
border-bottom: 1px solid #e1e1e1; }
section > h2 {
-moz-box-sizing: border-box;
@ -4466,21 +4410,16 @@ section > h2 {
-moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
box-shadow: inset 1px 1px 0px 0px #ffffff;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
background-clip: padding-box;
border-top: 1px solid #b7b7b7;
border-left: 1px solid #b7b7b7;
border-right: 1px solid #b7b7b7;
background: #f5f5ff;
background: -moz-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #f5f5ff));
background: -webkit-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
background: -o-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
background: -ms-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
background: linear-gradient(to bottom, #e0e3eb 0, #f5f5ff 100);
background: -moz-linear-gradient(top, #e0e3eb 0, #ffffff 100);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #ffffff));
background: -webkit-linear-gradient(top, #e0e3eb 0, #ffffff 100);
background: -o-linear-gradient(top, #e0e3eb 0, #ffffff 100);
background: -ms-linear-gradient(top, #e0e3eb 0, #ffffff 100);
background: linear-gradient(to bottom, #e0e3eb 0, #ffffff 100);
padding: 5px 10px 5px 10px;
text-shadow: 1px 1px 1px #ffffff;
font-size: 0.9em;
@ -4502,19 +4441,10 @@ section > h2 {
display: inline-block;
margin: 0 5px 0 0; }
.tabular .tab-content {
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
background-clip: padding-box;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
background-clip: padding-box;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
background-clip: padding-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: #f5f5ff;
background: #ffffff;
border: 1px solid #b7b7b7;
padding: 10px; }
.tabular .tab-content > input {
@ -4530,19 +4460,14 @@ section > h2 {
-moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
box-shadow: inset 1px 1px 0px 0px #ffffff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
background-clip: padding-box;
border: 1px solid #b7b7b7;
background: #f5f5ff;
background: -moz-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #f5f5ff));
background: -webkit-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
background: -o-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
background: -ms-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
background: linear-gradient(to bottom, #e0e3eb 0, #f5f5ff 100);
background: -moz-linear-gradient(top, #e0e3eb 0, #ffffff 100);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e0e3eb), color-stop(100, #ffffff));
background: -webkit-linear-gradient(top, #e0e3eb 0, #ffffff 100);
background: -o-linear-gradient(top, #e0e3eb 0, #ffffff 100);
background: -ms-linear-gradient(top, #e0e3eb 0, #ffffff 100);
background: linear-gradient(to bottom, #e0e3eb 0, #ffffff 100);
padding: 5px 10px 5px 10px;
text-shadow: 1px 1px 1px #ffffff;
font-size: 0.9em;
@ -4625,11 +4550,6 @@ table.table {
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
background-clip: padding-box;
background: #f5f5ff;
border-right: 1px solid #b7b7b7;
border-left: 1px solid #b7b7b7;
@ -4657,14 +4577,6 @@ table.table {
display: block; }
table.table tbody tr:last-child td {
border-bottom: 1px solid #b7b7b7; }
table.table tbody tr:last-child td:first-child {
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
background-clip: padding-box; }
table.table tbody tr:last-child td:last-child {
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
background-clip: padding-box; }
table.table thead {
background: #f5f5ff; }
table.table thead td:first-child {

View File

@ -10,11 +10,10 @@
.tab-links label {
@include box-shadow-out(#ffffff);
@include border-top-radius(3px);
border-top: 1px solid $content-border-color;
border-left: 1px solid $content-border-color;
border-right: 1px solid $content-border-color;
@include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color);
@include gradient-top-bottom(#e0e3eb, 0, #ffffff, 100, $content-background-color);
padding: 5px 10px 5px 10px;
text-shadow: 1px 1px 1px #ffffff;
font-size: 0.9em;
@ -36,11 +35,8 @@
}
.tab-content {
@include border-bottomleft-radius(3px);
@include border-bottomright-radius(3px);
@include border-topright-radius(3px);
@include box-sizing(border-box);
background: $content-background-color;
background: #ffffff;
border: 1px solid $content-border-color;
padding: 10px;
@ -66,9 +62,8 @@
.tab-links label {
@include box-shadow-out(#ffffff);
@include border-radius(3px);
border: 1px solid $content-border-color;
@include gradient-top-bottom(#e0e3eb, 0, $content-background-color, 100, $content-background-color);
@include gradient-top-bottom(#e0e3eb, 0, #ffffff, 100, $content-background-color);
padding: 5px 10px 5px 10px;
text-shadow: 1px 1px 1px #ffffff;
font-size: 0.9em;

View File

@ -7,7 +7,6 @@ table.table {
caption {
@include box-shadow-top(#ffffff);
@include border-top-radius(3px);
background: $content-background-color;
border-right: 1px solid $content-border-color;
border-left: 1px solid $content-border-color;
@ -56,14 +55,6 @@ table.table {
tr:last-child td {
border-bottom: 1px solid $content-border-color;
}
tr:last-child td:first-child {
@include border-bottomleft-radius(3px);
}
tr:last-child td:last-child {
@include border-bottomright-radius(3px);
}
}
thead {