mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-01-16 21:28:40 +00:00
style fixes, bug fixes
This commit is contained in:
Dennis Eichhorn
parent
722fcf8b97
commit
8ae12cc6da
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
.log-msg {
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
.nobreak, .nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -35,7 +39,3 @@
|
|||
.overflowfix {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -9,7 +9,6 @@ button, input[type="submit"], input[type="button"], label.button, a.button {
|
|||
min-width: 70px;
|
||||
background: var(--button-colored-background);
|
||||
color: var(--text-on-background-color-2);
|
||||
margin: 0;
|
||||
padding: 0 1rem 0 1rem;
|
||||
flex-grow: 0;
|
||||
height: 32px;
|
||||
|
|
@ -82,15 +81,19 @@ button.disabled, .button.disabled, input[type="submit"].disabled {
|
|||
.link.default {
|
||||
color: var(--button-colored-background);
|
||||
}
|
||||
|
||||
.link.save {
|
||||
color: #8fff79;
|
||||
}
|
||||
|
||||
.link.cancel {
|
||||
color: #ee5649;
|
||||
}
|
||||
|
||||
.link.close {
|
||||
color: #fffc3e;
|
||||
}
|
||||
|
||||
.link.disabled {
|
||||
color: #e1e1e1;
|
||||
}
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
|
||||
|
||||
canvas {
|
||||
background: #fff;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
canvas.chart {
|
||||
width: 100%;
|
||||
&.chart {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,14 +40,14 @@
|
|||
.consent_element {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#cookieConsentForm form {
|
||||
background : #fff;
|
||||
border: 1px solid var(--box-border);
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
border-radius: 3px;
|
||||
form {
|
||||
background : #fff;
|
||||
border: 1px solid var(--box-border);
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
#cookieConsentForm_defaultbuttons,
|
||||
|
|
|
|||
43
form.scss
43
form.scss
|
|
@ -34,46 +34,3 @@ form {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> *:not(label) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
& + * {
|
||||
margin-top: .75rem;
|
||||
}
|
||||
|
||||
label {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.input-control {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& +.input-control {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
textarea, .contenteditable {
|
||||
height: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
* + .form-group {
|
||||
margin-top: .75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
@ -211,7 +211,7 @@
|
|||
|
||||
.end-xs {
|
||||
justify-content: flex-end;
|
||||
text-align: end;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.top-xs {
|
||||
|
|
|
|||
51
input.scss
51
input.scss
|
|
@ -368,33 +368,35 @@ label.radio, label.checkbox {
|
|||
}
|
||||
}
|
||||
|
||||
label.radio {
|
||||
.checkmark {
|
||||
border-radius: 50%;
|
||||
|
||||
&:after {
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
label {
|
||||
&.radio {
|
||||
.checkmark {
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
|
||||
&:after {
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label.checkbox {
|
||||
.checkmark {
|
||||
&:after {
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
width: 4px;
|
||||
height: 6px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
&.checkbox {
|
||||
.checkmark {
|
||||
&:after {
|
||||
top: 2px;
|
||||
left: 4px;
|
||||
width: 4px;
|
||||
height: 6px;
|
||||
border: solid white;
|
||||
border-width: 0 3px 3px 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -472,9 +474,6 @@ select.plain {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
// * fix height definition (should be automatic)
|
||||
// * fix close automatic if radio, if checkbox = multiple, don't close automatic
|
||||
// * fix opening drop down when clicken on text instead of end of text area
|
||||
.dropdown {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
|
|
|||
62
layout.scss
62
layout.scss
|
|
@ -36,4 +36,64 @@ div.sticky, section.sticky {
|
|||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> *:not(label) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
& + * {
|
||||
margin-top: .75rem;
|
||||
}
|
||||
|
||||
label {
|
||||
flex: 0 0 100%;
|
||||
}
|
||||
|
||||
.input-control {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& +.input-control {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
textarea, .contenteditable {
|
||||
height: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
* + .form-group {
|
||||
margin-top: .75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-group {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@each $tuple in
|
||||
'wf-100' 100%, 'wf-80' 80%, 'wf-20' 20%, 'wf-66' 66.66%,
|
||||
'wf-50' 50%, 'wf-33' 33.33%, 'wf-25' 25%, 'wf-75' 75% {
|
||||
.#{nth($tuple, 1)} {
|
||||
width: #{nth($tuple, 2)};
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.resizable {
|
||||
resize: both;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
101
portlet.scss
101
portlet.scss
|
|
@ -1,38 +1,22 @@
|
|||
.portlet {
|
||||
border: 1px solid var(--box-border);
|
||||
//box-shadow: 0 0 3px 1px rgba(72, 71, 114, 0.3);
|
||||
box-sizing: border-box;
|
||||
margin-top: 1rem;
|
||||
//overflow-x: auto; removed in order to prevent scroll bars for tooltips which are longer than the portlet (test in general settings view)
|
||||
//border-top: 2px solid var(--box-highlight);
|
||||
|
||||
//border-top-left-radius: 4px;
|
||||
//border-top-right-radius: 4px;
|
||||
//border-bottom-left-radius: 4px;
|
||||
//border-bottom-right-radius: 4px;
|
||||
|
||||
.portlet-head {
|
||||
background: #fff;
|
||||
//border-top-left-radius: 4px;
|
||||
//border-top-right-radius: 4px;
|
||||
border-bottom: 1px solid #ebedf2;
|
||||
padding: .7rem 1rem .7rem 1rem;
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.portlet-foot {
|
||||
background: #fff;
|
||||
//border-bottom-left-radius: 4px;
|
||||
//border-bottom-right-radius: 4px;
|
||||
border-top: 1px solid #ebedf2;
|
||||
padding: .7rem 1rem .7rem 1rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
column-gap: .5rem;
|
||||
}
|
||||
|
|
@ -44,6 +28,46 @@
|
|||
.portlet-separator {
|
||||
border-bottom: 1px solid #ebedf2;
|
||||
}
|
||||
|
||||
&.highlight-1 {
|
||||
background: var(--color-red);
|
||||
color: #fff;
|
||||
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-red);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-2 {
|
||||
background: var(--color-green);
|
||||
color: #fff;
|
||||
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-green);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-3 {
|
||||
background: var(--color-blue);
|
||||
color: #fff;
|
||||
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-blue);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlight-4 {
|
||||
background: var(--color-yellow);
|
||||
color: #fff;
|
||||
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-yellow);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plain-portlet {
|
||||
|
|
@ -55,49 +79,4 @@
|
|||
.portlet-body {
|
||||
background: #fff;
|
||||
padding: 1rem;
|
||||
|
||||
//border-top-left-radius: 4px;
|
||||
//border-top-right-radius: 4px;
|
||||
//border-bottom-left-radius: 4px;
|
||||
//border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.portlet.highlight-1 {
|
||||
background: var(--color-red);
|
||||
color: #fff;
|
||||
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-red);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.portlet.highlight-2 {
|
||||
background: var(--color-green);
|
||||
color: #fff;
|
||||
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-green);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.portlet.highlight-3 {
|
||||
background: var(--color-blue);
|
||||
color: #fff;
|
||||
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-blue);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.portlet.highlight-4 {
|
||||
background: var(--color-yellow);
|
||||
color: #fff;
|
||||
|
||||
.portlet-body, .portlet-head {
|
||||
background: var(--color-yellow);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
.meter {
|
||||
height: 15px; /* Can be anything */
|
||||
position: relative;
|
||||
|
|
@ -17,6 +15,27 @@
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.orange > span {
|
||||
background-color: #f1a165;
|
||||
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
|
||||
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
|
||||
}
|
||||
|
||||
&.blue > span {
|
||||
background-color: #96c2f1;
|
||||
background-image: -moz-linear-gradient(top, #96c2f1, #4394f3);
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #96c2f1),color-stop(1, #4394f3));
|
||||
background-image: -webkit-linear-gradient(#96c2f1, #4394f3);
|
||||
}
|
||||
|
||||
&.red > span {
|
||||
background-color: #f0a3a3;
|
||||
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
|
||||
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
|
||||
}
|
||||
}
|
||||
|
||||
.meter > span:after, .animate > span > span {
|
||||
|
|
@ -62,29 +81,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.meter {
|
||||
&.orange > span {
|
||||
background-color: #f1a165;
|
||||
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
|
||||
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
|
||||
}
|
||||
|
||||
&.blue > span {
|
||||
background-color: #96c2f1;
|
||||
background-image: -moz-linear-gradient(top, #96c2f1, #4394f3);
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #96c2f1),color-stop(1, #4394f3));
|
||||
background-image: -webkit-linear-gradient(#96c2f1, #4394f3);
|
||||
}
|
||||
|
||||
&.red > span {
|
||||
background-color: #f0a3a3;
|
||||
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
|
||||
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
|
||||
}
|
||||
}
|
||||
|
||||
.noanimation > span > span, .noanimation > span:after {
|
||||
-webkit-animation: none;
|
||||
}
|
||||
|
|
|
|||
16
size.scss
16
size.scss
|
|
@ -1,16 +0,0 @@
|
|||
@each $tuple in
|
||||
'wf-100' 100%, 'wf-80' 80%, 'wf-20' 20%, 'wf-66' 66.66%,
|
||||
'wf-50' 50%, 'wf-33' 33.33%, 'wf-25' 25%, 'wf-75' 75% {
|
||||
.#{nth($tuple, 1)} {
|
||||
width: #{nth($tuple, 2)};
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.resizable {
|
||||
resize: both;
|
||||
overflow: auto;
|
||||
}
|
||||
723
styles.css
723
styles.css
File diff suppressed because it is too large
Load Diff
|
|
@ -1,5 +1,5 @@
|
|||
@import "clean", "default", "size", "transformation", "alignment", "visibility", "animate", "grid";
|
||||
@import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag", "tree";
|
||||
@import "clean", "default", "alignment", "visibility", "animate", "grid";
|
||||
@import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "pagination", "progress", "section", "tab", "table", "tag", "tree";
|
||||
@import "media";
|
||||
@import "portlet", "menu";
|
||||
@import "editor", "cookie_consent";
|
||||
358
table.scss
358
table.scss
|
|
@ -1,36 +1,186 @@
|
|||
table.fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table .order-up, table .order-down {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table thead input[type=radio] {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
table thead i.fa {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
table input[type=radio]:checked + i {
|
||||
.order-up, .order-down, .remove-form, .update-form, .save-form, .form-action {
|
||||
color: var(--button-colored-background);
|
||||
}
|
||||
|
||||
table input[type=checkbox]:checked + label i {
|
||||
color: var(--button-colored-background);
|
||||
table {
|
||||
&.fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
input[type=radio]:checked + i {
|
||||
color: var(--button-colored-background);
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label i {
|
||||
color: var(--button-colored-background);
|
||||
}
|
||||
|
||||
.order-up, .order-down {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sort-asc, .sort-desc, .filter {
|
||||
padding: 0 2px 0 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:not([id]) > thead .sort-asc, &:not([id]) > thead .sort-desc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.default.sticky {
|
||||
position: relative;
|
||||
|
||||
thead {
|
||||
th, td {
|
||||
background: var(--table-head-background);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
||||
& > * {
|
||||
vertical-align : middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.default {
|
||||
//border-radius: 4px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
font-size: 0.9em;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
|
||||
caption {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
background: var(--table-caption-background);
|
||||
padding: .5rem;
|
||||
|
||||
//border-top-left-radius: 4px;
|
||||
//border-top-right-radius: 4px;
|
||||
|
||||
text-align: left;
|
||||
|
||||
i {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 3px 10px 3px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
height: 2.5rem;
|
||||
|
||||
&:nth-of-type(2n) td {
|
||||
background: var(--table-row-background);
|
||||
}
|
||||
|
||||
&:nth-of-type(2n+1) td {
|
||||
background: var(--table-row-background-alt);
|
||||
}
|
||||
|
||||
&:hover td, &:focus td {
|
||||
background: var(--table-row-background-hover);
|
||||
}
|
||||
|
||||
td, th {
|
||||
border-bottom: 1px solid #ebedf2;
|
||||
}
|
||||
|
||||
&:last-child td, &:last-child th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
outline: none;
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 5px var(--box-border);
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--table-head-background);
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
background: var(--table-head-background);
|
||||
|
||||
tr {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #ebedf2;
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
display: none;
|
||||
|
||||
&:checked + label {
|
||||
color: var(--box-highlight);;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: #d8d8d8;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border: none;
|
||||
|
||||
label {
|
||||
float: left;
|
||||
}
|
||||
|
||||
select {
|
||||
width: auto;
|
||||
float: right;
|
||||
margin: 0;
|
||||
min-width: 0px;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.list {
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 2px 0 2px 0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 2px 5px 2px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table .sort-asc, table .sort-desc, table .filter {
|
||||
padding: 0 2px 0 2px;
|
||||
cursor: pointer;
|
||||
thead {
|
||||
input[type=radio] {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
|
|
@ -41,152 +191,6 @@ table .sort-asc, table .sort-desc, table .filter {
|
|||
}
|
||||
}
|
||||
|
||||
table.default.sticky {
|
||||
position: relative;
|
||||
|
||||
thead {
|
||||
th, td {
|
||||
background: var(--table-head-background);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
||||
& > * {
|
||||
vertical-align : middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-up, .order-down, .remove-form, .update-form, .save-form, .form-action {
|
||||
color: var(--button-colored-background);
|
||||
}
|
||||
|
||||
table.default {
|
||||
//border-radius: 4px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
font-size: 0.9em;
|
||||
box-sizing: border-box;
|
||||
overflow-x: auto;
|
||||
|
||||
caption {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 400;
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
background: var(--table-caption-background);
|
||||
padding: .5rem;
|
||||
|
||||
//border-top-left-radius: 4px;
|
||||
//border-top-right-radius: 4px;
|
||||
|
||||
text-align: left;
|
||||
|
||||
i {
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 3px 10px 3px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
height: 2.5rem;
|
||||
|
||||
&:nth-of-type(2n) td {
|
||||
background: var(--table-row-background);
|
||||
}
|
||||
|
||||
&:nth-of-type(2n+1) td {
|
||||
background: var(--table-row-background-alt);
|
||||
}
|
||||
|
||||
&:hover td, &:focus td {
|
||||
background: var(--table-row-background-hover);
|
||||
}
|
||||
|
||||
td, th {
|
||||
border-bottom: 1px solid #ebedf2;
|
||||
}
|
||||
|
||||
&:last-child td, &:last-child th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
outline: none;
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 5px var(--box-border);
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--table-head-background);
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
background: var(--table-head-background);
|
||||
|
||||
tr {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #ebedf2;
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
display: none;
|
||||
|
||||
&:checked + label {
|
||||
color: var(--box-highlight);;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: #d8d8d8;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
border: none;
|
||||
|
||||
label {
|
||||
float: left;
|
||||
}
|
||||
|
||||
select {
|
||||
width: auto;
|
||||
float: right;
|
||||
margin: 0;
|
||||
min-width: 0px;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.list {
|
||||
th {
|
||||
text-align: left;
|
||||
padding: 2px 0 2px 0;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 2px 5px 2px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
table.table {
|
||||
display: table;
|
||||
|
|
@ -226,8 +230,4 @@ table.list {
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nobreak {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user