Using a mixin for hairlines so they can be more flexible.
This commit is contained in:
Родитель
088cd1a41f
Коммит
c5a7cf37c8
|
@ -401,7 +401,7 @@ strong {
|
|||
.table-view li {
|
||||
position: relative;
|
||||
padding: 11px 60px 12px 15px;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>");
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
|
||||
background-position: 15px 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
@ -428,7 +428,6 @@ strong {
|
|||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.table-view.inset li:first-child,
|
||||
.table-view.inset li:last-child {
|
||||
background-image: none;
|
||||
}
|
||||
|
@ -441,8 +440,9 @@ strong {
|
|||
color: #999;
|
||||
font-weight: 500;
|
||||
background-color: #fafafa;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='1'><rect fill='#e6e6e6' x='0' y='0' width='320' height='0.5'/></svg>");
|
||||
background-position: top, bottom;
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320px' height='1'><rect fill='#c8c7cc' x='0' y='0' width='320px' height='0.5'/></svg>");
|
||||
background-position: 0 100%, 0 0%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.table-view .table-view-divider:first-child {
|
||||
top: 0;
|
||||
|
|
|
@ -67,3 +67,19 @@
|
|||
-webkit-animation-direction: $direction;
|
||||
animation-direction: $direction;
|
||||
}
|
||||
|
||||
|
||||
// Misc
|
||||
// --------------------------------------------------
|
||||
@mixin hairline($color, $width, $offset, $type) {
|
||||
@if $type == single {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>");
|
||||
background-position: $offset 100%;
|
||||
|
||||
} @else if $type == double {
|
||||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>"),
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$width}' height='1'><rect fill='#{$color}' x='0' y='0' width='#{$width}' height='0.5'/></svg>");
|
||||
background-position: $offset 100%, $offset 0%;
|
||||
}
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
|
|
@ -12,9 +12,7 @@
|
|||
li {
|
||||
position: relative;
|
||||
padding: 11px 60px 12px 15px; // Given extra right padding to accomodate badges, chevrons or buttons. Extra 1px bottom padding given for hairline divider.
|
||||
background-image: $hairline;
|
||||
background-position: 15px 100%;
|
||||
background-repeat: no-repeat;
|
||||
@include hairline(#c8c7cc, 320px, 15px, single);
|
||||
|
||||
|
||||
// Remove the border from the last table view item
|
||||
|
@ -51,8 +49,7 @@
|
|||
border: 1px solid rgba(0, 0, 0, .15);
|
||||
border-radius: 6px;
|
||||
|
||||
// Remove border from first/last standard list items to avoid double border at top/bottom of table views
|
||||
li:first-child,
|
||||
// Remove border from last standard list items to avoid double border at top/bottom of table views
|
||||
li:last-child {
|
||||
background-image: none;
|
||||
}
|
||||
|
@ -71,8 +68,7 @@
|
|||
color: #999;
|
||||
font-weight: $font-weight;
|
||||
background-color: #fafafa;
|
||||
background-image: $hairline, $hairline;
|
||||
background-position: top, bottom;
|
||||
@include hairline(#c8c7cc, 320px, 0, double);
|
||||
|
||||
// Rounding first divider on inset lists and remove border on the top
|
||||
&:first-child {
|
||||
|
|
Загрузка…
Ссылка в новой задаче