qfq-bs.css.less 21.54 KiB
@spinner : url(data:image/gif;base64,R0lGODlhEAAQAKIAAP///9bW1szMzL29vXt7e3Nzc2ZmZv4BAiH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBwAHACwAAAAAEAAQAAADPAi6QRQrymJMkcwFatuLXOFt1bWEYBmNq6awGDCicUhjIYzBwTBAmc9CQBSkLJGiYKZi+EgdV60ZCwIjCQAh+QQFBwAHACwAAAYABgAIAAADE3gz1/LCwaYYbYTQYkxpnEdlRwIAIfkEBQcABwAsAAACAAYACAAAAxN4OqMnUKgoVzuEuGJMUZznZE4CACH5BAUHAAcALAIAAAAIAAYAAAMUeKozqyKKQ8iRohhTTjsa91DWkwAAIfkEBQcABwAsBgAAAAgABgAAAxR4RNddxhR3oDxjtHWEF9QHUtmRAAAh+QQFBwAHACwKAAIABgAIAAADFHhE12WmOCjbaviMgYUXzQc225EAACH5BAUHAAcALAoABgAGAAgAAAMTeEqkV8YUBaVjagwnulDel21KAgAh+QQFBwAHACwGAAoACAAGAAADFHiqRKvFmHLGOHGKLU47XPdYz5EAADs=);
@alert_container_id : #qfqAlertContainer;
@spinner_class : spinner;
@CodeMirror_border_color: #ccc;
@{alert_container_id} {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
.alert {
padding: 30px;
border-radius: 0px;
margin-bottom: 2px;
border-top: none;
border-left: none;
border-right: none;
}
.alert + .alert {
margin-top: -2px;
}
}
i.@{spinner_class} {
display: inline-block;
background: @spinner no-repeat;
//height: image-height(@spinner);
//width: image-width(@spinner);
height: 16px;
width: 16px;
}
.qfq-dot {
display: inline-block;
height: 9px;
width: 9px;
margin: 1px;
margin-left: 5px;
background-color: #f2b867;
border-radius: 50%;
}
.alert-buttons {
margin-top: 10px;
}
/* CUSTOM RADIOS */
/* Hide the browser's default radio */
.radio-inline>input[type=radio], .radio>input[type=radio] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Customize the label (the container) */
.radio-inline, .radio {
display: inline-block;
position: relative;
padding-left: 1.8em;
padding-top: 0 !important;
margin-top: 7px !important;
margin-right: 10px;
cursor: pointer; font-size: 1em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radio {
display: block;
}
/* Create a custom radio button */
.radio-inline .checkmark, .radio .checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 50%;
border: 2px solid #ccc;
}
.radio-inline:hover input ~ .checkmark, .radio:hover input ~ .checkmark {
border-color: #2196F3;
}
.radio-inline input[type=radio]:checked ~ .checkmark, .radio input[type=radio]:checked ~ .checkmark {
background-color: #2196F3;
border-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.radio-inline input[type=radio]:checked ~ .checkmark:after, .radio input[type=radio]:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.radio-inline .checkmark:after, .radio .checkmark:after {
top: 3px;
left: 3px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
}
/* CUSTOM CHECKBOXES */
/* Hide the browser's default radio */
.checkbox-inline>input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Customize the label (the container) */
.checkbox-inline, .checkbox {
display: inline-block;
position: relative;
padding-left: 1.8em;
padding-top: 0 !important; margin-top: 7px !important;
margin-right: 10px;
cursor: pointer;
font-size: 1em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox-inline input:read-only ~ .checkmark {
cursor: not-allowed;
pointer-events: none;
}
.checkbox {
display: block;
}
.qfq-disabled {
cursor: not-allowed !important;
pointer-events: none !important;
}
/* Create a custom radio button */
.checkbox-inline .checkmark, .checkbox .checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
width: 18px;
background-color: #fff;
border-radius: 4px;
border: 2px solid #ccc;
}
.checkbox-inline:hover input ~ .checkmark, .checkbox:hover input ~ .checkmark {
border-color: #66afe9;
}
.checkbox-inline input:checked ~ .checkmark, .checkbox input:checked ~ .checkmark {
background-color: #2196F3;
border-color: #2196F3;
}
.checkbox-inline.qfq-disabled input ~ .checkmark, checkbox.qfq-disabled input ~ .checkmark,
.checkbox-inline.qfq-disabled:hover input ~ .checkmark, .checkbox.qfq-disabled:hover input ~ .checkmark,
.radio-inline.qfq-disabled:hover input ~ .checkmark, .radio.qfq-disabled:hover input ~ .checkmark,
.radio-inline.qfq-disabled .checkmark, .radio.qfq-disabled .checkmark {
background-color: #eee;
border-color: #bbb;
}
.checkbox-inline.qfq-disabled input:checked ~ .checkmark, .checkbox.qfq-disabled input:checked ~ .checkmark,
.radio-inline.qfq-disabled input[type=radio]:checked ~ .checkmark, .radio.qfq-disabled input[type=radio]:checked ~ .checkmark {
background-color: #ccc;
border-color: #ccc;
}
/* Show the indicator (dot/circle) when checked */
.checkbox-inline input:checked ~ .checkmark:after, .checkbox input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.checkbox-inline .checkmark:after, .checkbox .checkmark:after {
top: 1px;
left: 4px;
width: 6px; height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* ERROR HIGHLIGHTING */
/* Error Marking for Checkboxes */
.has-error .checkmark {
background-color: #fcf8e3;
border-color: #f2b867;
}
.has-error .radio-inline:hover input ~ .checkmark, .has-error .radio:hover input ~ .checkmark, .has-error .checkbox-inline:hover input ~ .checkmark, .has-error .checkbox:hover input ~ .checkmark {
background-color: #f2b867;
}
.has-error .radio-inline, .has-error .radio, .has-error .checkbox, .has-error .checkbox-inline {
color: #ca7a0a;
}
/* END CUSTOM CHECKBOX / RADIO */
.has-error .help-block {
display: inline-block;
padding: 6px 12px;
padding-left: 25px;
background-color: #f2b867;
border-radius: 4px;
color: #333;
}
.has-error .help-block:before {
content: "\f0e7"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
left:25px;
position:absolute;
}
.with-errors.help-block {
display: none;
/* visibility: hidden;
margin-bottom: 0;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
overflow: hidden;
opacity: 0;
transition: opacity 1s linear, max-height 0.25s ease-out; */
}
.form-group.has-error .btn {
background-color: #f0ad4e;
background-image: linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%);
background-repeat: repeat-x;
border-color: #e38d13;
font-weight: 200;
color: #fff;
}
input:focus ~ .with-errors.help-block:not(.hidden), textarea:focus ~ .with-errors.help-block:not(.hidden) {
display: inline-block;
/* visibility: visible;
max-height: 150px;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 7px; opacity: 1;
transition: opacity 1s linear, max-height 0.25s ease-out; */
}
.has-error .control-label {
color: #333;
}
.help-block.with-errors ul {
margin-bottom: 0px;
}
.has-error .form-control {
background-color: #fcf8e3;
border-width: medium;
border-color: #f2b867;
}
.has-error .form-control:focus {
background-color: #fcf8e3;
border-color: #f2b867;
}
/* Color Variation Example Start */
.rebel-yell .has-error .form-control, .rebel-yell .has-error .form-control:focus {
border-color: #d30b6f;
background-color: #eb92be;
}
.rebel-yell .form-group.has-error .btn, .btn-rebel {
background-color: #e72a89;
background-image: linear-gradient(to bottom,#e72a89 0,#d30b6f 100%);
background-repeat: repeat-x;
border-color: #d30b6f;
font-weight: 200;
text-shadow: 0 1px 0 #e72a8;
color: #333;
}
.rebel-yell .has-error .help-block {
background-color: #e72a89;
}
.rebel-yell .qfq-dot {
background-color: #e72a89;
}
.rebel-yell .checkbox-inline input:checked ~ .checkmark, .rebel-yell .checkbox input:checked ~ .checkmark,
.rebel-yell .radio-inline input[type=radio]:checked ~ .checkmark, .rebel-yell .radio input[type=radio]:checked ~ .checkmark {
background-color: #e72a89;
border-color: #e72a89;
}
/* Error Color Example End
Error Soft Example Start */
.qfq-notify .has-error .form-control {
border-width: 1px;
}
.qfq-notify .has-error .help-block {
padding-left: 12px;
border: 0;
padding: 0 12px;
background-color: transparent;
color: #ca7a0a;
}
.qfq-notify .has-error .help-block:before { content: ""; /* this is your text. You can also use UTF-8 character codes as I do here */
}
/* ERROR END */
/* inline elements in horizontal mode are too much left */
.form-horizontal {
.form-inline {
.form-group {
margin: 0;
}
}
/* reduce unwished padding-top offset */
.checkbox {
padding-top: 7px;
}
.checkbox-inline {
padding-top: 7px;
padding-right: 12px;
margin-top: 0;
}
.checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline {
margin-left: 0;
}
.radio {
padding-top: 7px;
}
input[type=file] {
display: inline;
}
}
// select:invalid: Dropdown with 'emptyItemAtStart' and required are grey on form load.
select.qfq-locked:invalid {
color: #a0a0a0;
}
.form-inline {
.control-label {
font-weight: normal;
}
}
.lower-canvas {
background-color: #fff;
}
//.form-group.required.control-label:before{
// color: red;/home/a/bbaer/PhpstormProjects/uzh_cd_template
// content: "*";
// position: absolute;
// margin-left: -10px;
//}
.required-right:after {
color: #d00;
content: "*";
//position: absolute;
margin-left: 3px;
//top: 10px;
}
.required-left:before {
color: #d00; content: "*";
//position: absolute;
margin-right: 3px;
//top: 10px;
}
.qfq-table-50 {
min-width: 50%;
width: auto;
}
.qfq-table-80 {
min-width: 80%;
width: auto;
}
.qfq-table-100 {
min-width: 100%;
width: auto;
}
.qfq-fieldset {
margin-top: 5px;
margin-bottom: 15px;
}
.qfq-form-pill {
/*
border-top-right-radius: 4px;
border-top-left-radius: 4px; */
border: 1px solid #ccc;
border-top: none;
}
.qfq-form-body {
padding-top: 5px;
padding-bottom: 5px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #ccc;
border-top: none;
}
.qfq-form-no-title {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border: 1px solid #ccc;
}
/* adjust BS padding of input elements: center */
.form-group {
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 0;
}
/* adjust BS padding: Filename (=Text) of the uploaded file should be on the same base line as the label text left of it. */
.uploaded-file {
padding-top: 4px;
}
.qfq-subrecord-table {
margin-top: -5px;
min-width: 100%;
width: auto;
}
.qfq-form-title { border: 1px solid #ccc;
border-radius: 4px 4px 0 0;
background-image: linear-gradient(to bottom, #fefefe 0, #dedede 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
min-height: 45px;
font-size: 1.2em;
padding: 13px 15px;
font-weight: bold;
}
.qfq-table-button-width {
width: 44px;
}
.qfq-comment-marker {
position: absolute;
right: 22px;
z-index: 2;
}
.nav-pills>li>a {
border-radius: 0;
}
.qfq-color-white {
background-color: #ffffff;
}
.qfq-color-grey-1 {
background-color: #dedede;
}
.qfq-color-grey-2 {
background-color: #ededed;
}
.qfq-color-blue-1 {
background-color: #d2dded;
}
.qfq-color-blue-2 {
background-color: #e2eeff;
}
.qfq-form-right .qfq-label {
text-align: right;
padding-right: 0;
}
.qfq-child-margin-top + .qfq-child-margin-top {
margin-top: 15px;
}
.qfq-note {
padding-top: 2px;
}
.control-label .small, .control-label small {
font-weight: normal;
}
.label-rebel {
background-color: #e72a89;
}
// Fabric Plugin classes
.qfq-fabric-bar {
position: -webkit-sticky;
position: sticky; top: 0;
width: 100%;
min-height: 41px;
z-index: 100;
border: 1px solid #ccc;
background-color: #ededed;
padding: 5px;
}
.qfq-fabric-bar .btn {
padding: 3px 8px;
}
.fabric-text {
width: 100%;
height: 80px;
}
#text-bg-submit {
background-color: #ccc;
height: 24px;
border: none;
}
.text-bg-toggle {
width: 24px;
height: 24px;
background-size: contain;
border: none;
}
.color-picker {
margin-top: 2px;
}
.color-picker > button {
margin-right: 2px;
}
.qfq-fabric-image {
display: none;
}
// Emoji
.emoji {
display: inline-block;
border: none;
/*background-color: #fff;*/
width: 32px;
height: 32px;
margin: 5px;
}
// typeAhead Input: Default Bootstrap column width
.twitter-typeahead {
display: block !important;
}
.qfq-cc-style {
font-size: 0.8em;
color: #777;
//position: relative;
//top: -24px;
//right: 10px;
//text-align: right;
//display: block;
}
// TypeAhead Suggestions
.tt-menu {
background-color: #fff;
border-left: 1px solid #66afe9;
border-right: 1px solid #66afe9;
border-bottom: 1px solid #66afe9;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
width: 100%;
}
@media (min-width: 768px) {
.form-horizontal .control-label {
text-align: unset;
}
}
.tt-suggestion {
cursor: pointer;
cursor: hand;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 6px;
padding-top: 12px;
}
.tt-suggestion + .tt-suggestion {
padding-top: 6px;
}
.tt-suggestion:hover {
background-color: rgba(102, 175, 233, .6);
}
// Workaround as long as rendering of notes can't be specific.
.qfq-note-no-padding {
margin-top: -7px;
}
// Mit BB anschauen wie man die NOTE Felder formatiert
//
//.text-input {
// padding-top: 7px;
//}
//
//.text-note {
// padding-top: 7px;
//}
.CodeMirror {
border: 1px solid @CodeMirror_border_color;
border-radius: 4px;
}
//}
/* classes for toggleable note mockup, bb */
.qfq-icon-inside {
position: relative;
top: -22px;
left: calc(100% - 26px);
}
.qfq-margin-top {
margin-top: 10px;
}
/* spinning icons */
.text-large-with-margin {
font-size: 92px;
line-height: normal;
margin: 0.4em;
}
.qfq-icon-gear {
height: 190px;
width: 190px;
margin: 1em;
}
.glyphicon-spin {
-webkit-animation: spin 2350ms infinite linear;
animation: spin 2350ms infinite linear;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.noclick {
pointer-events: none;
}
// Buttons: full width
.qfq-100 {
width: 100%;
}
// Buttons: text left aligned
.qfq-left {
text-align: left;
}
.alert-interactive {
position: fixed;
display: box;
left: 50%;
transform: translate(-50%,0);
top: 200px;
max-height: 60%;
padding: 20px;
color: #d0d0d0;
min-width: 24%;
max-width: 90%;
border-left: 5px solid;
background-color: #333;
overflow-y: auto;
overflow-x: hidden;
}
.alert-side > p.body {
margin: 0px;
overflow: hidden;
white-space: nowrap;
}
.alert-side {
position: fixed;
display: box;
right: 0px;
top: 20px;
padding: 20px;
color: #d0d0d0;
border-left: 5px solid;
background-color: #333;
z-index: 10000; /* Always on top */
}
.border-success {
border-color: #5cb85c;
}
.border-error {
border-color: #fb4f4f;
}
.border-warning {
border-color: #fbb64f;
}
.border-info {
border-color: #25adf1;
}
.blockscreenQfq {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
z-index: 998;
filter: blur(23px);
background: rgba(255, 255, 255, 0.5);
}
.blur {
filter: blur(2px);
}
.alert-interactive p.title {
font-size: 1.5em;
margin-bottom: 0px;
}
.alert-interactive p.buttons {
margin-top: 20px;
text-align: center;
}
.alert-interactive .table-hover>tbody>tr:hover {
color: #333;
background-image: linear-gradient(to bottom,#b9def0 0,#9acfea 100%)
}
// Code Correction
.codeCorrectionWrap {
border: 1px solid #ccc;
border-top: unset; margin-bottom: 10px;
}
.qfqCodeCorrectionTitle {
border: 1px solid #ccc;
border-radius: 10px 10px 0 0;
background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
height: 40px;
};
.qfqLineCount {
user-select: none;
width: 50px;
height: 100%;
text-align: right;
border-right: 1px solid #ccc;
padding-right: 10px;
line-height: 23px;
background-color: #efefef;
}
.qfqCode {
width: ~"calc(100% - 50px)";
min-height: 23px;
padding-left: 15px;
padding-right: 15px;
text-align: left;
font-size: 1.2em;
font-family: monospace;
word-break: break-word;
}
.qfqCodeLine {
background-color: #fff;
}
.qfqCodeLine:hover {
background-color: #efefef;
}
.qfqCodeLine:hover .qfqLineCount {
background-color: #b9def0;
border-color: #9acfea;
color: #31708f;
}
.qfqCommentContainer {
color: #333;
height: 100%;
padding-bottom: 20px;
}
.qfqComment {
display: grid;
position: relative;
grid-template-columns: 110px auto;
grid-template-rows: 30px auto;
margin: 10px;
margin-top: 20px;
}
.qfqCommentAvatar {
background-color: #fff;
grid-column: 1;
grid-row-start: 1;
grid-row-end: 2;
align-self: start;
width: 100px;
height: 120px; border: 1px solid #ccc;
padding: 4px;
padding-bottom: 20px;
/*transform: rotate(20deg);*/
}
.qfqCommentAuthor {
position: absolute;
top: 10px;
left: 10px;
font-weight: bold;
}
.qfqCommentText {
position: relative;
grid-column: 2;
grid-row: 2;
background-color: #fff;
width: 100%;
min-height: 90px;
height: 100%;
padding: 10px;
padding-bottom: 25px;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 5px 5px;
}
.qfqCommentCommands {
position: absolute;
bottom: 5px;
right: 15px;
width: 100%;
color: #ccc;
text-align: right;
}
.qfqCommentCommand {
cursor: pointer;
margin-left: 9px;
}
.qfqCommentCommand:hover {
color: #9acfea;
}
.qfqCommentTopLine {
position: relative;
grid-row: 1;
grid-column: 2;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 5px 5px 0 0;
background-color: #fff;
}
.qfqCommentDateTime {
position: absolute;
right: 10px;
top: 10px;
color: grey;
font-size: 0.8em;
}
.qfqEditorContainer {
display: grid;
position: relative;
width: 100%;
grid-template-columns: auto 110px;
grid-template-rows: auto; margin: 20px 10px 10px;
}
.qfqEditor {
z-index: 1;
position: relative;
grid-column: 1;
width: 100%;
min-height: 100px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
padding-left: 40px;
}
.qfqEditorControls {
grid-column: 2;
width: 100%;
padding-left: 10px;
}
.qfqCodeElement {
display: block;
background: #333;
color: #eee;
margin: 10px;
padding: 15px;
border-left: 2px solid #5cb85c;
}
.qfqEditor ul {
margin: 10px;
}
.qfqEditorControl {
z-index: 5;
cursor: pointer;
color: #ccc;
position: absolute;
left: 10px;
}
.qfqEditorControl:hover {
color: #9acfea;
}
.qfqCodeAdd {
top: 10px;
}
.qfqCodeList {
top: 35px;
}
.qfqSyntaxDoc {
color: #888;
}
.qfqSyntaxWord {
font-weight: bold;
color: #31708f;
}
.qfqSyntaxData {
color: #5cb85c;
}
.qfqDropTarget {
height: 50px; margin: 0;
border: 1px dashed #ccc;
}
.qfqTargetDisplay {
border: 1px dashed #25adf1;
}
span.qfq-more-text {
display: none
}
// Droplets
.qfq-droplet-container {
position: absolute;
border-radius: 6px;
padding: 15px;
}
.qfq-droplet-container:before {
content: ' ';
position: absolute;
left: 10px;
top: -10px;
border: 5px solid;
}
.qfq-droplet-container:after {
content: ' ';
position: absolute;
left: 20px;
top: -10px;
border: 5px solid;
}
.qfq-droplet-grey {
border: 2px solid #ccc;
background-image: linear-gradient(to bottom,#f0f0f0 0,#e0e0e0 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
}
.qfq-droplet-container.qfq-droplet-grey:after {
border-color: transparent transparent #ccc #ccc;
}
.qfq-droplet-container.qfq-droplet-grey:before {
border-color: transparent #ccc #ccc transparent;
}
.qfq-droplet-blue {
border: 2px solid #25adf1;
background-image: linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);
}
.qfq-droplet-container.qfq-droplet-blue:after {
border-color: transparent transparent #25adf1 #25adf1;
}
.qfq-droplet-container.qfq-droplet-blue:before {
border-color: transparent #25adf1 #25adf1 transparent;
}
.qfq-wavy-underline {
background: url('../icons/wavy-underline.gif') bottom repeat-x
}
legend {
margin-bottom: 0;
margin-top: 15px; padding-bottom: 5px;
font-size: 17px;
}
/* glyphicon functions */
.icon-flipped {
transform: scaleX(-1);
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
}
.icon-spin {
display: block;
}
.icon-spin:hover {
-webkit-animation: spin 850ms 1 ease-in;
animation: spin 850ms 1 ease-in;
}
.icon-spin-reverse {
display: block;
}
.icon-spin-reverse:hover {
-webkit-animation: spin-reverse 850ms 1 ease-in;
animation: spin-reverse 850ms 1 ease-in;
}
@keyframes spin-reverse {
0% {
transform: scaleX(-1) rotate(-360deg);
}
100% {
transform: scaleX(-1) rotate(0deg);
}
}
.qfq-sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
thead.qfq-sticky th, thead.qfq-sticky td {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: white;
z-index: 900;
}
thead.qfq-sticky td {
top: 33px;
}
.dropdown-menu {
z-index: 920;
}