forked from verdnatura/hedera-web
705 lines
9.8 KiB
SCSS
705 lines
9.8 KiB
SCSS
|
|
@import "./variables";
|
|
|
|
/* Icon */
|
|
|
|
.htk-icon {}
|
|
|
|
/* Button */
|
|
|
|
.htk-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
& > .htk-icon {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* Grid */
|
|
|
|
.htk-grid {
|
|
margin: auto;
|
|
border-collapse: collapse;
|
|
|
|
& > thead > tr,
|
|
& > tfoot > tr {
|
|
background-color: $color-primary;
|
|
vertical-align: middle;
|
|
height: 3em;
|
|
}
|
|
th {
|
|
color: white;
|
|
cursor: pointer;
|
|
font-weight: normal;
|
|
padding: 0 0.4em;
|
|
}
|
|
th:hover {
|
|
background-color: rgba(1, 1, 1, 0.2);
|
|
}
|
|
tr {
|
|
height: 3.5em;
|
|
}
|
|
& > tfoot a,
|
|
& > thead a {
|
|
color: black;
|
|
}
|
|
tr.pair-row {
|
|
background-color: transparent;
|
|
}
|
|
& > tbody tr {
|
|
border-top: 1px solid #DDD;
|
|
}
|
|
& > tbody tr:first-child {
|
|
border-top: none;
|
|
}
|
|
& > tbody td {
|
|
margin: 0;
|
|
padding: 0 0.5em;
|
|
}
|
|
th,
|
|
td {
|
|
text-align: left;
|
|
}
|
|
td:first-child,
|
|
th:first-child {
|
|
padding-left: 1em;
|
|
}
|
|
td:last-child,
|
|
th:last-child {
|
|
padding-right: 1em;
|
|
}
|
|
.message {
|
|
padding: 1.5em;
|
|
text-align: center;
|
|
}
|
|
.message > * {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
padding-right: .8em;
|
|
}
|
|
}
|
|
|
|
/* Repater */
|
|
|
|
.htk-repeater {
|
|
& > .message {
|
|
padding: 1.5em;
|
|
text-align: center;
|
|
|
|
& > * {
|
|
vertical-align: middle;
|
|
}
|
|
& > span,
|
|
& > .htk-spinner {
|
|
display: inline-block;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Grid cells */
|
|
|
|
th.cell-spin {
|
|
text-align: right;
|
|
}
|
|
td.cell-spin {
|
|
width: 2.5em;
|
|
text-align: right;
|
|
}
|
|
th.cell-check,
|
|
th.cell-radio {
|
|
text-align: center;
|
|
}
|
|
td.cell-button {
|
|
max-width: 20px;
|
|
text-align: center;
|
|
}
|
|
td.cell-button > button,
|
|
td.cell-button > a {
|
|
@extend %clickable;
|
|
display: block;
|
|
height: 44px;
|
|
width: 44px;
|
|
margin: 0 auto;
|
|
border-radius: 50%;
|
|
padding: 10px;
|
|
border: none;
|
|
background-color: transparent;
|
|
box-sizing: border-box;
|
|
|
|
& > .htk-icon {
|
|
display: block;
|
|
}
|
|
}
|
|
td.cell-button > button:hover,
|
|
td.cell-button > a:hover {
|
|
background-color: rgba(1, 1, 1, 0.1);
|
|
}
|
|
td.cell-button img {
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
display: block;
|
|
margin: auto;
|
|
padding: 0;
|
|
}
|
|
td.cell-image {
|
|
text-align: center;
|
|
}
|
|
td.cell-image .htk-image {
|
|
max-width: 2.5em;
|
|
max-height: 2.5em;
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
|
|
/* Select */
|
|
|
|
.htk-select,
|
|
.htk-date-chooser {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: normal;
|
|
|
|
& > span {
|
|
flex: 1;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
& > .htk-icon {
|
|
flex: none;
|
|
color: #666;
|
|
}
|
|
}
|
|
.htk-select {
|
|
width: 100%;
|
|
}
|
|
.htk-select-menu {
|
|
height: 100%;
|
|
max-height: 80em;
|
|
overflow: auto;
|
|
min-width: 14em;
|
|
|
|
tbody > tr {
|
|
border-top: none;
|
|
height: 2.5em;
|
|
}
|
|
td.message {
|
|
padding: 1em;
|
|
}
|
|
tr:hover {
|
|
background-color: rgba(1, 1, 1, 0.1);
|
|
cursor: pointer;
|
|
}
|
|
td {
|
|
max-width: 11em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
/* List */
|
|
|
|
.htk-list {
|
|
a.item,
|
|
.item.clickable {
|
|
@extend %clickable;
|
|
}
|
|
.item {
|
|
padding: 20px;
|
|
border-bottom: 1px solid #DDD;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
& > .side {
|
|
flex: none;
|
|
}
|
|
& > .content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
|
|
& > .important {
|
|
font-weight: bold;
|
|
font-size: 1rem;
|
|
margin-bottom: .5em;
|
|
}
|
|
& > p {
|
|
margin: .1em 0;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
& > .actions {
|
|
flex: none;
|
|
display: none;
|
|
align-items: center;
|
|
|
|
& > .htk-button {
|
|
margin: 0;
|
|
}
|
|
& > * {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
& > input {
|
|
margin: .6em;
|
|
}
|
|
}
|
|
}
|
|
.item:hover > .actions {
|
|
display: flex;
|
|
}
|
|
.item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
/* Calendar */
|
|
|
|
.htk-calendar {
|
|
@extend %box;
|
|
width: 20em;
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
thead tr,
|
|
tfoot tr {
|
|
font-weight: normal;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
height: 3em;
|
|
}
|
|
thead > tr {
|
|
&.weekdays > th {
|
|
font-weight: normal;
|
|
color: #999;
|
|
text-transform: lowercase;
|
|
}
|
|
& > th {
|
|
&.previous, &.next {
|
|
font-size: .8rem;
|
|
|
|
button {
|
|
border-radius: 50%;
|
|
padding: 10px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
|
|
& > .htk-icon {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
}
|
|
&.month-year {
|
|
font-size: 1.2rem;
|
|
text-transform: lowercase;
|
|
}
|
|
}
|
|
}
|
|
tfoot tr {
|
|
border-top: none;
|
|
}
|
|
th.button {
|
|
display: table-cell;
|
|
}
|
|
th.button:hover {
|
|
cursor: pointer;
|
|
background-color: rgba(1, 1, 1, 0.2);
|
|
}
|
|
col {
|
|
width: 14.2%;
|
|
}
|
|
tr {
|
|
height: 2em;
|
|
}
|
|
tbody td {
|
|
text-align: right;
|
|
}
|
|
tbody td > div {
|
|
height: 2em;
|
|
width: 2em;
|
|
line-height: 2em;
|
|
text-align: center;
|
|
border-radius: 2em;
|
|
padding: 0.3em;
|
|
margin: 0 auto;
|
|
color: #555;
|
|
}
|
|
div {
|
|
&.disabled {
|
|
color: #bbb;
|
|
}
|
|
&.today {
|
|
font-weight: bold;
|
|
color: black;
|
|
}
|
|
&.selected {
|
|
color: white;
|
|
background-color: $color-primary;
|
|
}
|
|
&.enabled {
|
|
@extend %clickable;
|
|
|
|
&:hover {
|
|
background-color: rgba(140, 198, 63, 0.8);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Image */
|
|
|
|
.htk-image {
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&.clickable:hover {
|
|
cursor: pointer;
|
|
opacity: 0.85;
|
|
}
|
|
& > img {
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
& > button {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
padding: .15em;
|
|
display: none;
|
|
}
|
|
&:hover > button {
|
|
display: block;
|
|
}
|
|
& > button > img {
|
|
display: block;
|
|
height: 1.2em;
|
|
height: 1.2em;
|
|
}
|
|
}
|
|
|
|
/* Full image */
|
|
|
|
.htk-full-image {
|
|
img {
|
|
display: block;
|
|
cursor: pointer;
|
|
}
|
|
.htk-spinner {
|
|
background-color: #FFF;
|
|
margin: .6em;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* Image editor */
|
|
|
|
.htk-image-editor {
|
|
width: 18em;
|
|
margin: 0 auto;
|
|
padding: 1.5em;
|
|
|
|
h2 {
|
|
color: white;
|
|
background-color: #009688;
|
|
text-align: left;
|
|
font-size: 1.3em;
|
|
line-height: 1.7em;
|
|
font-weight: normal;
|
|
padding: 0.6em 0.8em;
|
|
margin: 0;
|
|
}
|
|
iframe {
|
|
display: none;
|
|
}
|
|
.footer {
|
|
margin-top: 2em;
|
|
|
|
& > .htk-spinner {
|
|
padding-right: 1.2em;
|
|
height: 1.3em;
|
|
width: 1.3em;
|
|
}
|
|
& > .htk-spinner,
|
|
& > input {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Toast */
|
|
|
|
.htk-toast {
|
|
z-index: 210;
|
|
display: block;
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 4em;
|
|
width: 21em;
|
|
margin-left: -10.5em;
|
|
text-align: center;
|
|
overflow: auto;
|
|
max-height: 40em;
|
|
overflow: visible;
|
|
|
|
& > div {
|
|
margin: .5em 0;
|
|
padding: .5em 2%;
|
|
border-radius: 0.1em;
|
|
box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.6);
|
|
width: 96%;
|
|
|
|
opacity: 0;
|
|
transform: translateZ(0) translateY(-1em);
|
|
-webkit-transform: translateZ(0) translateY(-1em);
|
|
|
|
transition-property: opacity, transform;
|
|
transition-duration: 200ms;
|
|
transition-timing-function: ease-out;
|
|
|
|
&.show {
|
|
opacity: 1;
|
|
transform: translateZ(0) translateY(0em);
|
|
-webkit-transform: translateZ(0) translateY(0em);
|
|
}
|
|
}
|
|
& > .message {
|
|
background-color: #BBFFBB;
|
|
color: #363;
|
|
}
|
|
& > .warning {
|
|
background-color: #FFE0B2;
|
|
color: #C30;
|
|
}
|
|
& > .error {
|
|
background-color: #FFCDD2;
|
|
color: #A00;
|
|
}
|
|
}
|
|
|
|
/* Popup */
|
|
|
|
.htk-background {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 190;
|
|
background-color: rgba(1, 1, 1, 0.7);
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-in-out;
|
|
}
|
|
.htk-popup {
|
|
z-index: 200;
|
|
display: block;
|
|
position: fixed;
|
|
overflow: hidden;
|
|
background-color: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.6);
|
|
box-sizing: content-box;
|
|
|
|
&.modal {
|
|
position: absolute;
|
|
font-size: 1.2em;
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
& > * {
|
|
border-radius: 0.1em;
|
|
}
|
|
}
|
|
|
|
/* Dialog */
|
|
|
|
.htk-dialog {
|
|
padding: 1.5em;
|
|
max-width: 20em;
|
|
font-weight: normal;
|
|
color: #555;
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
img {
|
|
float: left;
|
|
height: 3em;
|
|
margin-top: 0;
|
|
margin-right: 1em;
|
|
}
|
|
p {
|
|
padding: 0;
|
|
}
|
|
.button-bar > button {
|
|
float: right;
|
|
margin-left: 1em;
|
|
margin-top: .5em;
|
|
}
|
|
}
|
|
|
|
/* Assistant */
|
|
|
|
.htk-assistant > div {
|
|
display: none;
|
|
|
|
& > h2 {
|
|
text-align: center;
|
|
font-weight: normal;
|
|
font-size: 1.5rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-bottom: 1em;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
/* Assistant bar */
|
|
|
|
.htk-assistant-bar {
|
|
position: relative;
|
|
padding: .8em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
|
|
& > button {
|
|
border-radius: 50%;
|
|
padding: .5em;
|
|
margin: 0;
|
|
text-align: center;
|
|
|
|
& > img {
|
|
display: block;
|
|
width: 1.8em;
|
|
padding: .5em;
|
|
}
|
|
}
|
|
& > .end {
|
|
display: none;
|
|
color: #8cc63f;
|
|
|
|
& > .icon {
|
|
font-size: 1.6rem;
|
|
}
|
|
}
|
|
& > .steps {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
& > div {
|
|
background-color: #AAA;
|
|
width: .5em;
|
|
height: .5em;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
margin: .5em;
|
|
|
|
transition-property: width, height;
|
|
transition-duration: 100ms;
|
|
transition-timing-function: ease-in-out;
|
|
|
|
&.selected {
|
|
background-color: #666;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
&:hover {
|
|
opacity: .7;
|
|
}
|
|
}
|
|
& > img {
|
|
width: 1.3em;
|
|
margin: 0 .2em;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
opacity: .7;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Search entry */
|
|
|
|
.htk-search-entry {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background-color: white;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
padding: 0 15px;
|
|
overflow: hidden;
|
|
|
|
& > * {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
& > .htk-icon {
|
|
display: block;
|
|
margin: 0;
|
|
color: gray;
|
|
}
|
|
& > .entry {
|
|
margin: 0;
|
|
border: none;
|
|
width: 100px;
|
|
box-shadow: none;
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
height: inherit;
|
|
}
|
|
& > .entry:focus {
|
|
background-color: initial;
|
|
}
|
|
}
|
|
|
|
/* Spinner */
|
|
|
|
.htk-spinner {
|
|
width: 1.8em;
|
|
height: 1.8em;
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
& > .spinner {
|
|
left: 0;
|
|
position: absolute;
|
|
width: inherit;
|
|
height: inherit;
|
|
box-sizing: border-box;
|
|
border-radius: 50%;
|
|
border: 2px solid transparent;
|
|
border-top-color: #666;
|
|
border-left-color: #666;
|
|
animation: spinner 1s linear infinite;
|
|
-webkit-animation: spinner 1s linear infinite;
|
|
}
|
|
&.dark > .spinner {
|
|
border-top-color: white;
|
|
border-left-color: white;
|
|
}
|
|
}
|
|
@keyframes spinner {
|
|
to {transform: rotate(360deg);}
|
|
}
|
|
@-webkit-keyframes spinner {
|
|
to {-webkit-transform: rotate(360deg);}
|
|
}
|
|
|
|
/* Loader */
|
|
|
|
.htk-loader > .spinner {
|
|
text-align: center;
|
|
}
|