main.less revision 89092dc10fe08b037266c0b4efb94b221f6fffb3
@or-color: #FBEBB2;
@and-color: #E1F2B7;
@not-color: #E4DBF0;
@grabber-image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAFCAYAAABvsz2cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACNJREFUeNpiZGBg8AViBhYQ8f///3pGIHEGxAExGFAYAAEGABbSDZWLLysMAAAAAElFTkSuQmCC";
.webkit-text-rendering-bugfix {
-webkit-transform: translateZ(0px);
-webkit-backface-visibility: hidden;
}
.focus-state {
outline: none;
border-color: rgba(102, 175, 233, 0.4);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.invalid-background(@bgcolor: #F2DED8) {
background-color: @bgcolor;
border-color: #a94442;
color: #a94442;
}
.striped-background(@bgcolor, @stripeColor1, @stripeColor2) {
background-color: @bgcolor;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, @stripeColor1 35px, @stripeColor2 70px);
.webkit-text-rendering-bugfix;
}
.wordwrap {
white-space: initial;
word-wrap: break-word;
word-break: break-word;
}
.ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.page-header {
small {
font-size: 100%;
color: #777;
margin: 0 0 10px 0;
display: block;
.fa {
margin: 0 3px;
font-size: 90%;
}
}
}
/* Jquery-UI overrides */
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
z-index:710;
}
.list-table {
.list-group-header {
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
font-size: 12px;
display: block;
padding: 10px 15px 7px 0;
border-bottom: 2px solid #ddd;
margin-bottom: -1px;
margin-top: 0;
}
.striped-list-filter {
&:not(:focus) {
box-shadow: none;
-webkit-box-shadow: none;
border-color: #ddd;
}
border-radius: 0;
margin-bottom: -1px;
padding: 10px 15px;
height: auto;
}
&:not(.created-items) {
.list-group-item:hover, .list-group-item:focus {
cursor: pointer;
}
.list-group {
border-bottom: 1px solid #eee;
}
}
.list-group {
box-shadow: none;
-webkit-box-shadow: none;
.list-group-item {
border-right: 0;
border-left: 0;
border-radius: 0;
border-color: #eee;
&:last-of-type {
border-bottom: 0;
}
&:nth-child(odd) {
background-color: @background-color;
}
&.list-no-items {
border: 0;
}
.fa {
opacity: 0;
transition: all 300ms ease-in-out;
color: #999;
font-size: 150%;
cursor: pointer;
&.fa-chevron-right {
padding-right: 10px;
}
&:focus {
outline: none;
}
}
&:hover, &:focus {
.fa-chevron-right {
opacity: 1;
color: #31708f;
padding-right: 0;
}
}
&:focus {
.focus-state;
background-color: rgba(217, 237, 247, 0.5) !important;
}
&:not(.editing) {
.radio-inline {
padding-top: 0;
}
}
.radio-group {
margin-right: 10px;
}
&.text-danger {
background: #f2dede;
transition: background 0.2s linear;
.form-control {
color: @failure-color;
}
}
&.text-success {
background-color: #dff0d8;
transition: background 0.2s linear;
}
&.text-info {
background-color: #d9edf7;
}
}
}
&.created-items {
.list-group {
.list-group-item {
&:last-of-type:not(.editing):not(.list-no-items) {
border-bottom: 1px solid #eee;
}
.fa {
opacity: 0.4;
&:focus, &:hover {
opacity: 1;
}
}
.fa-close {
&:focus, &:hover {
color: @failure-color;
}
}
.fa-plus {
margin-top: 8px;
&:focus, &:hover {
color: @base-theme-color;
}
}
&.editing {
background-color: @background-color;
margin-top: 20px;
border: 1px solid #eee;
border-radius: 4px;
.form-control {
margin: 0 5px;
}
}
}
}
}
}
.accordion {
> .panel {
> .panel-collapse > .panel-body {
border-top: 0;
}
> .panel-heading .panel-title {
position: relative;
}
}
.panel-title {
font-size: 18px;
letter-spacing: 0;
font-weight: 600;
> a {
color: @base-theme-color;
display: block;
&:hover {
color: @panel-hover-color;
}
}
.help-link {
display: none;
position: absolute;
right: 0;
top: 0;
color: #777;
.popover {
width: 150px;
}
}
}
.helper-text {
margin-bottom: 30px;
}
.btn-acc-step {
margin-top: 15px;
}
.panel-title a:not(.collapsed) + .help-link {
display: block;
}
#condition-management #pickUpArea ol#pickUpItem li.operator:not(.dragged),
#condition-management #pickUpArea ol#pickUpItem li.rule:not(.dragged) {
display: block;
}
}
cursor: pointer;
overflow-x: auto;
&:focus {
.focus-state;
}
.panel-collapse {
margin-bottom: 0;
}
.panel-heading {
padding: 15px 0;
.panel-title {
display: inline-block;
font-weight: bold;
}
}
&:not(.panel-danger) {
&:hover, &:focus {
background-color: @background-color;
}
.panel-heading {
padding: 15px 0;
.panel-title:after {
content: '';
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 0;
border-top: 7px solid;
position: absolute;
right: 40px;
margin: 5px 0;
color: #777;
}
.empty-msg {
color: #777;
margin-left: 10px;
font-size: 80%;
vertical-align: text-top;
display: none;
}
&.collapsed {
.panel-title:after {
border-left: 7px solid;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 0;
}
.empty-msg {
display: inline;
}
}
}
}
&.panel-danger {
.panel-title {
color: @failure-color;
}
&:hover, &:focus {
background-color: #f2dede;
}
}
.review-text {
line-height: 1em;
margin: 0 0 20px 10px;
background-color: inherit;
border: none;
&:not(.text-danger) {
color: #777;
}
}
font-family: monospace;
}
.review-title {
margin-top: 0;
}
list-style-type: none;
padding: 0;
}
}
.res-type-label {
padding-top: 7px;
}
}
//TODO: needed?
.ui-multiselect {
.remove-all, .add-all {
float: right;
padding: 7px;
}
.count {
float: left;
padding: 7px;
}
.ui-state-default {
border: medium none;
margin-bottom: 1px;
padding-left: 20px;
position: relative;
}
left: 2px;
position: absolute;
}
li a.action {
position: absolute;
right: 2px;
top: 2px;
}
border: 0 none;
float: left;
margin: 0;
padding: 0;
position: relative;
width: 240px !important;
}
.search {
width: 130px;
}
}
> span {
opacity: 0.7;
transition: opacity 200ms linear;
&.fa-check {
display: none;
}
&:hover, &:focus {
opacity: 1;
}
}
}
input[type="text"]:invalid:required, input[type="text"].invalid, select:invalid:required, select.invalid {
.invalid-background(#fff);
}
.ui-state-default .ui-element .dragged{
margin-top:-300px;
}
.nav .nav-tabs {
margin-bottom: 15px;
}
/* XUI Overrides */
body {
/* This will prevent to sudden shift of content which can sometimes occur
* when navigating between them long views which require a scroll bar and
* short ones which do not.
*/
overflow-y: scroll;
}
cursor: move !important;
}
#condition-management #dropOffArea {
background-color: #f7f7f7;
background-image: none;
&:focus {
box-shadow: none;
cursor: default;
}
> .item-button-panel {
.fa {
display: none;
}
}
> .item-button-panel, > .form-control, > .item-data {
color: #ccc;
}
}
}
#condition-management ol.condition-management-group {
box-shadow: 0px 0px 9px rgba(119, 119, 119, 0.5);
&:focus {
cursor: default;
}
& + li.rule {
display: none;
}
.fa-pencil, .fa-trash-o {
display: none;
}
.fa-check {
color: @base-theme-color;
font-size: 30px;
display: block;
}
}
}
}
.condition-management-group {
padding: 0;
}
#environmentContainer {
position: relative;
}
#condition-management{
.fa:hover {
cursor: pointer;
}
.form-control {
height: 30px;
text-overflow: ellipsis;
}
.popover {
min-width: 250px;
color: #2a2f32;
}
.selectize-input {
margin-top: 17px;
padding: 4px 15px 3px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
border-color: #ccc;
min-height: inherit;
}
}
padding: 2px 8px 0;
}
.selectize-control.single .selectize-input:after {
right: 6px;
margin-top: -3px;
}
.btn-group {
margin-top: 16px;
position: absolute;
left: 0;
width: 120px;
.btn {
padding: 4px 12px;
}
}
label {
display: block;
float: left;
padding: 0 5px 0 0;
text-align:left;
white-space: nowrap;
}
ol ol{
padding: 1px;
background: white;
margin: 5px 0 0;
min-height: 8px;
}
#outter-arrow-up {
width: 0;
height: 0;
margin: 10px auto 0;
transition: all 200ms ease-out;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 0 solid #E3F3FD;
}
#pickUpArea{
transition: background-color 200ms ease-out;
}
&.show-hint{
#pickUpArea {
background-color: #E3F3FD;
}
#outter-arrow-up {
border-bottom: 15px solid #E3F3FD;
}
}
.rules-help {
margin-top:20px;
}
#pickUpArea {
padding: 10px 8px;
margin: 0 5px 5px 5px;
background: #f7f7f7;
ol#pickUpItem {
min-height: 77px;
background: #fff;
margin: 0 0 20px 0;
border: 2px dashed #ddd;
cursor: move;
box-shadow:0 1px 1px 0 rgba(0,0,0,0.5);
background-image:url(@grabber-image);
&:not(.dragged){
margin-left:5px;
margin-right:5px;
/*To stop it appearing over accordion. Overridden later*/
display: none;
}
display:none;
}
}
li.operator:not(.dragged){
margin-top: 10px;
}
}
}
ol#dropOffArea li.invalid-rule {
color: #a94442;
.fa-check {
color: #a94442;
}
.striped-background(#f7f7f7, rgba(240, 221, 222, 1),rgba(240, 221, 222, 1));
}
float:right;
padding: 8px 3px;
> span {
font-size: 22px;
padding: 0 5px;
&.tooltips {
&:hover span, &:focus span {
margin-left: -54px;
width: 100px;
}
&.tooltips-wide{
&:hover span, &:focus span {
margin-left: -105px;
width: 200px;
}
}
}
}
}
padding-top: 0;
}
margin-top: 5px;
}
position: absolute;
top: 0;
opacity: 0.9;
z-index: 200;
.help-link {
display: none;
}
}
opacity: 1;
}
.operator > .item-button-panel {
margin-top: -26px;
}
box-shadow:1px 2px 1px 0 rgba(0, 0, 0, 0.4);
background-image:url(@grabber-image);
cursor: move;
background-color: #ccc;
.help-link {
display: none;
}
}
}
li {
display: block;
margin: 5px;
padding: 5px;
background: 0 0 repeat-y #eee;
transition: background 200ms ease-out 0ms, box-shadow 100ms linear 0ms;
&.operator {
&.or {
background-color:@or-color;
> span, > select {color:darken(@or-color, 50%)}
&.dragged, &:focus {background-color:darken(@or-color, 10%)}
> ol > .placeholder {background-color:darken(@or-color, 20%)}
}
&.and {
background-color:@and-color;
> span, > select {color:darken(@and-color, 50%)}
&.dragged, &:focus {background-color:darken(@and-color, 10%)}
> ol > .placeholder {background-color:darken(@and-color, 20%)}
}
&.not {
background-color:@not-color;
> span, > select {color:darken(@not-color, 50%) }
&.dragged, &:focus {background-color:darken(@not-color, 10%)}
> ol > .placeholder {background-color:darken(@not-color, 20%)}
}
&.or, &.and, &.not {
cursor: default;
> .form-control {
width: 80px;
}
&:focus {
outline: none;
cursor: move;
box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.4);
background-image: url(@grabber-image);
}
}
}
&.rule {
cursor: default;
&:focus {
.focus-state;
cursor: move;
background-image: url(@grabber-image);
background-color: #e6e6e6;
}
&.legacy-condition {
color: #777;
.striped-background(#f7f7f7, #ddd, #ddd);
}
}
&.placeholder {
position: relative;
margin: 5px;
padding: 0;
border: none;
height: 10px;
.striped-background(inherit, rgba(255, 255, 255, .5), rgba(255, 255, 255, .5));
background-size: 100% 100px;
box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.5) inset;
}
}
}
.item-data {
padding: 7px 5px 0 5px;
> div {
font-size: 11px;
line-height: 11px;
border-right: 1px solid #ddd;
padding-right: 10px;
margin-right: 10px;
float: left;
&:last-of-type {
border-right: none;
}
h3 {
color: inherit;
font-weight: bold;
font-size: 11px;
line-height: 11px;
padding-bottom: 5px;
margin: 0;
}
> span {
min-height: 11px;
display: block;
padding-bottom: 5px;
.ellipsis;
max-width:500px;
}
&.no-float {
float: none;
margin-right: 30px;
}
}
position: relative;
float: left;
min-width: 145px;
max-width: 588px;
margin: 5px 5px 0 5px; // margin-bottom:0; required for clearing
}
}
li.editing .item-data, ol#pickUpItem li:not(.dragged) .item-data {
padding: 0;
}
li:not(.dragged) .help-link {
float: right;
margin: -3px 2px 0 0;
font-size: 14px;
color: #777;
}
.field-float-pattern, .field-float-select, .field-float-selectize {
label {
font-size:11px;
transition: all 0.1s linear;
font-weight:bold;
padding: 0;
line-height: 11px;
margin: 0;
}
}
.field-float-pattern, .field-float-select {
position:relative;
margin: 5px;
float:left;
min-height: 41px;
min-width: 145px;
&.button-field {
min-width: 120px;
}
label {
opacity: 0;
&.showLabel {
opacity: 1;
}
}
input {
position: absolute;
left: 0;
margin-top: 16px;
width: 133px;
/* Stop chromes autofill adding yellow backgrounds to datalists */
&:-webkit-autofill{
-webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset,0 0 0 50px white inset;
&:focus {
-webkit-box-shadow: 0 0 1px 1px #4481c4,0 0 0 50px white inset;
}
}
}
&#typeSelector label {
top:0;
opacity:1;
}
&#typeSelector select {
margin-top: 6px;
}
select {
margin-top: 16px;
clear:left;
float:left;
&.placeholderText {
color: #ddd;
background-color:transparent;
border-color: transparent;
box-shadow: none;
}
}
}
.field-float-select:not(#typeSelector), .field-float-selectize {
label {
top: 10px;
position: absolute;
&.showLabel {
top: 0;
}
}
}
.field-float-pattern {
label {
margin-top: 10px;
&.showLabel {
margin-top: 0;
}
}
}
.item-data {
.fa-clock-o {
position: absolute;
right: 6px;
bottom: 2px;
color: #ccc;
font-size: 16px;
&:hover {
cursor: text;
}
}
.day-field, .time-field, .date-field {
min-width: 100px;
.form-control {
width: 100px;
}
}
.timezone-field {
.form-control {
width: 130px;
}
}
}
#conditionAttrTimeDate {
border-right: none;
margin-right: 0;
border-right: 1px solid #ddd;
&:last-of-type {
border-right: none;
}
}
}
}
.action-permissions {
position: absolute;
top: 10px;
right: 45px;
}
#editResources {
margin-top: 30px;
}
.selectize-control.multi .selectize-input {
border-color: #ddd;
border-radius: 0;
padding: 10px 15px;
.item {
background-color: @background-color;
border-color: #ddd;
}
}
.selectize-dropdown {
border-color: #ddd;
}
.selectize-input, .selectize-input.focus, .selectize-dropdown {
box-shadow: none;
-webkit-box-shadow: none;
}