policyEditor.less revision a093731116a8c24d49b903df7602cf586e499b45
/* VARIABLES */
@or-color: #DDE9FF;
@and-color: #C3DFC5;
@not-color: #E7D1CB;
@subject-color: #CCC;
@grabber-image: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAFCAYAAABvsz2cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACNJREFUeNpiZGBg8AViBhYQ8f///3pGIHEGxAExGFAYAAEGABbSDZWLLysMAAAAAElFTkSuQmCC";
@table-hightlight-bg-color:#D7E9F8;
@table-rollover-bg-color:#d5d5d5;
.webkit-text-rendering-bugfix{
-webkit-transform: translateZ(0px);
-webkit-backface-visibility: hidden;
}
.invalid-background(@bgcolor: #ffd4d4){
background-color:@bgcolor;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(60, 60, 60, 0.1) 35px, rgba(60, 60, 60, 0.1) 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;
}
/* Jquery-UI overrides */
html body .ui-jqgrid tr.ui-widget-content{
box-shadow:none;
}
.ui-widget-content {
border-color: #bbb;
.ui-state-hover{
border-color: #5d6871;
font-weight: normal;
color: #80b7ab;
background: #5d6871;
}
th.ui-state-hover{
background: lighten(#5d6871, 10%);
color: white;
}
}
.ui-jqgrid tr.ui-widget-content {
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
&.jqgrow td {
padding: 5px 10px 4px;
font-size: 13px;
line-height: 18px;
}
}
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
z-index:710;
}
/* --- */
// Accordion
.accordion {
margin: 15px 0 0 0;
background-color: #fff;
border: 1px solid #BCBEC0;
border-bottom: none;
.rounded-corners(5px);
h1.accordion-header {
height: 30px;
line-height: 30px;
display: block;
padding: 0 0 0 10px;
background-color: #d5d5d5;
color: #666;
cursor: pointer;
font-weight: normal;
font-size: 100%;
border-bottom: 1px solid #bebebe;
text-decoration: none;
&:hover, &:focus{
background-color: @table-hightlight-bg-color;
}
.icon-info {
display: none;
font-size: 16px;
float: right;
margin: 7px 7px 0 0;
cursor: pointer;
}
&.step-active{
background-color: #5a646d;
color:white;
box-shadow:none;
&:hover{
cursor:default;
}
.icon-info {
display: block;
}
}
}
.accordion-step {
padding: 15px;
border-bottom: 1px solid #bebebe;
display:none;
& > input.button {
margin-top: 15px;
float:right;
}
.group-field-block, .group-field-row {
label {
width: 180px;
font-size: inherit;
font-weight: normal;
text-align:right;
}
}
&:last-of-type:not(.active-step){
border-bottom: none;
}
}
.prop-val {
float: left;
}
select.prop-val {
width: 200px;
}
textarea.prop-val {
max-width:622px;
min-width:622px;
}
textarea, input:not(.button){
border-radius:0;
}
.review-row {
background: #ebebeb;
padding: 0 8px;
clear: both;
font-size: 13px;
margin: 0 5px 5px 0;
border-radius: 3px;
border:1px solid #bebebe;
cursor: pointer;
overflow-x: auto;
position: relative;
transition: background 100ms linear;
[class*="icon-arrow-"], .advanced-empty-msg {
position: absolute;
top: 8px;
right: 8px;
opacity: 0.5;
}
[class*="icon-arrow-"] {
font-size: 16px;
}
.advanced-empty-msg {
font-size: 12px;
}
.advanced-mode {
margin: 0 0 13px;
}
&.invalid {
.invalid-background;
.invalid {
color: red;
}
.advanced-empty-msg {
display: none;
}
&:hover {
background-color: #FFB5B5;
color: inherit;
}
}
h2 {
font-size: 15px;
line-height: 20px;
padding: 8px 10px 8px 0;
clear:both;
&#responseAttributesHeader{
padding-bottom:15px;
}
}
h3 {
font-size: 13px;
line-height: 1em;
margin: 0 0 8px;
}
ul, p, pre {
clear:left;
padding: 0 0 0 20px;
display:block;
opacity: 0.6;
}
li {
font-family: monospace;
line-height: 1em;
}
p, li {
display: block;
span {
font-weight:bold;
}
}
pre, p {
font-family: monospace;
line-height: 1em;
display: block;
}
&:hover, &:focus{
background-color: #D7E9F8;
box-shadow: none;
color: #1f6fb1;
}
}
#actions {
.toggle-all {
margin: 0 8px 0 1px;
}
.striped-list {
margin-right:0;
.highlight {
background: @table-hightlight-bg-color;
border-color: rgba(0, 0, 0, 0.2);
&:nth-child(odd){
background: darken(@table-hightlight-bg-color, 4%);
}
[class*="icon-checkbox-"] {
color: darken(@table-hightlight-bg-color, 50%);
}
}
}
.action-name {
display: inline-block;
padding: 0 8px;
}
.action-permission {
margin: 0 8px 0 0;
}
[class^="icon-"], [class*="icon-"] {
font-size: 16px;
&:not(.toggle-all){
&:hover, &:focus{
box-shadow:none;
color: darken(@table-hightlight-bg-color, 50%);
cursor:pointer;
}
}
}
}
}
.ui-jqgrid {
cursor: pointer;
margin: 15px 0 0 0;
.ui-jqgrid-htable .ui-search-toolbar {
th {
height: 30px;
padding: 0;
vertical-align: top;
}
.ui-search-table {
.ui-search-clear {
display: none;
}
.ui-search-input {
& > input {
height: 26px;
margin: 0;
}
}
}
}
span.item-button-panel {
> span {
font-size: 16px;
padding: 0 3px;
&.tooltips {
.webkit-text-rendering-bugfix;
&:hover span, &:focus span {
margin-left: -40px;
width: 70px;
}
}
}
}
tr.ui-widget-content {
background:#fff;
box-shadow: none;
td {
vertical-align: middle;
}
}
th[id*="_cb"] {
display: none;
}
tr.jqgrow {
td[aria-describedby*="_iconChB"] {
text-align: center;
color: #A6A6A6;
span {
font-size: 16px;
background-color: white;
&:hover, &:focus {
color: #777;
box-shadow:none;
}
}
}
td{
dl, dt, dd {
display:block;
margin:0;
padding:0;
}
dd {
margin-left:70px;
.wordwrap;
&:after {
content:' ';
white-space:pre;
}
}
dt {
min-width: 70px;
float: left;
clear: left;
font-weight: bold;
&:after {
content:' ';
}
}
dd {
}
dd:after {
content:' ';
}
}
td[aria-describedby*="_name"], td[aria-describedby*="_resources"],
td[aria-describedby*="_resourceAttributes"], td[aria-describedby*="_subject"],
td[aria-describedby*="_resources"] li,
td[aria-describedby*="_resourceAttributes"] li, td[aria-describedby*="_subject"] li{
.ellipsis;
}
td[aria-describedby*="_createdBy"], td[aria-describedby*="_lastModifiedBy"], td[aria-describedby*="_description"]{
.wordwrap;
}
td[aria-describedby*="_name"]{
font-weight:bold;
white-space: initial;
font-size:14px;
}
td[aria-describedby*="_actions"] {
background-color: #d7e9f8;
overflow: visible;
white-space: normal;
text-align: center;
color: darken(@table-hightlight-bg-color,50%);
}
&.ui-state-hover {
border-color: rgba(0, 0, 0, 0.2);
background: @table-rollover-bg-color;
color: inherit;
td[aria-describedby*="_actions"] {
background-color: darken(@table-rollover-bg-color,5%);
color: darken(@table-rollover-bg-color,50%);
}
}
&.ui-state-highlight, &.highlight {
background: @table-hightlight-bg-color;
border-color: rgba(0, 0, 0, 0.2);
color: darken(@table-hightlight-bg-color,50%);
td[aria-describedby*="_iconChB"] span {
color: darken(@table-hightlight-bg-color,50%);
opacity:0.5;
&:hover, &:focus {
opacity:1;
}
}
td[aria-describedby*="_actions"] {
background-color: darken(@table-hightlight-bg-color,5%);
}
span.item-button-panel > span{
color:darken(@table-hightlight-bg-color,50%);
}
}
}
}
/* search dialog */
.ui-jqdialog#searchmodfbox_apps, .ui-jqdialog#searchmodfbox_policies {
width: 750px;
min-width: 750px;
select, input.input-elm {
margin: 3px;
}
input.add-rule {
margin-left: 5px;
}
input.delete-rule {
margin-left: 26px;
}
}
th.ui-state-default.ui-th-column {
border: 0;
background: inherit;
}
[id*='gview_'] .frozen-bdiv {
overflow: visible !important;
height: auto !important;
}
.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;
}
li span.ui-icon-arrowthick-2-n-s {
left: 2px;
position: absolute;
}
li a.action {
position: absolute;
right: 2px;
top: 2px;
}
div.selected, div.available {
border: 0 none;
float: left;
margin: 0;
padding: 0;
position: relative;
width: 240px !important;
}
.search {
width: 130px;
}
}
span.tooltips {
position: relative;
display: inline;
span {
position: absolute;
width: 0;
color: #fff;
background-color:#000;
background-image:-webkit-linear-gradient(top, #555, #000);
text-align: center;
visibility: hidden;
border-radius: 3px;
font-size: 13px;
padding: 6px 5px 10px;
box-shadow: 0px 1px 3px #666;
bottom: 25px;
transition:bottom 200ms ease-out, opacity 100ms ease-in;
opacity:0;
&:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
}
&:hover span, &:focus span {
width: 120px;
margin-left: -65px;
visibility: visible;
opacity: 0.9;
bottom: 30px;
left: 50%;
z-index: 999;
}
}
span.item-button-panel {
> span {
opacity:0.5;
transition:opacity 200ms linear;
&.icon-checkmark {
display:none;
}
&:hover, &:focus {
opacity:1;
box-shadow: none;
}
}
}
#patterns .striped-list {
li {
&:hover, &:focus:not(.created-items){
cursor:pointer;
.icon-arrow-right{
opacity:1;
color:#80b7ab;
padding-right: 0;
}
}
.icon-arrow-right{
opacity:0;
transition: all 300ms ease-in-out;
color:#555
}
.icon-arrow-right{
padding-right: 10px;
}
}
}
.striped-list {
border: 1px solid #ccc;
border-bottom:none;
border-radius: 3px 3px 3px 3px;
margin:0 10px 0 0;
h3 {
font-size: 14px;
background:#5a646d;
color:#fff;
padding-left:8px;
border-radius: 3px 3px 0 0px;
font-weight:normal;
}
li {
padding:8px;
border-bottom: 1px solid #ccc;
&:nth-child(odd){ background-color:#eee; }
&:nth-child(even){ background-color:#fff; }
.icon-close, .icon-arrow-right, .icon-plus{
opacity:0;
transition: all 300ms ease-in-out;
color: #555;
display: block;
}
.icon-arrow-right{
padding-right: 10px;
}
.key{
font-weight: bold;
padding-right: 4px;
}
}
&.created-items {
border: none;
border-top:1px solid #ccc;
&#createdResources {
margin-right:0;
li.editing, li.editing:hover {
min-height: 36px;
line-height: 36px;
input {
width: 27px;
min-width: 27px;
max-width: 300px;
transition: width 0.25s ease-out;
}
}
}
&#selectedRealms{
margin-right:0;
.rules-help{
margin-top:11px;
}
}
&#attrTypeStatic{
li.editing input {
width: 176px;
}
}
li {
border: 1px solid #ccc;
border-top:none;
transition: background 1s linear;
word-wrap: break-word;
word-break: break-all;
.icon-plus {
opacity:0.6;
padding-top: 8px;
&:focus, &:hover{
box-shadow:none;
opacity:1;
color:#80b7ab;
}
}
.icon-close {
opacity:0.4;
&:focus, &:hover{
box-shadow:none;
opacity:1;
color:#DB8383;
}
}
&.editing {
background-color:#eee;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
margin-top: 20px;
border: 1px solid #ccc;
border-radius: 3px;
transition: background-color 200ms linear;
input {
margin: 3px 5px;
padding: 5px 0 5px 5px;
border-radius: 0;
}
}
&.invalid {
.invalid-background;
transition: background-color 200ms linear;
.icon-plus {
&:focus, &:hover{
opacity:0.6;
color:#555;
cursor:default;
}
}
input[type="text"]:invalid:required {
background:white;
}
}
}
}
li {
&.highlight-info {
background:#ffc;
transition: background 0.2s linear;
}
&.highlight-warning {
background:#fcc;
transition: background 0.2s linear;
}
&.highlight-good {
background:#CCFFDE;
transition: background 0.2s linear;
}
}
}
input[type="text"]:invalid:required, input[type="text"].invalid{
.invalid-background;
transition: background-color 200ms linear;
}
.ui-state-default .ui-element .dragged{
margin-top:-300px;
}
.global-actions {
margin: 20px 0 0 -5px;
}
.content-bg {
padding: 20px 10px;
}
.policy-content {
margin: 0 10px;
}
.policy-header {
padding:0 0 30px;
margin: 0 10px;
h1 {
font-weight:normal;
padding:0 0 10px;
span, a{
font-weight:bold;
text-decoration:none;
}
}
h2 {
font-weight: normal;
line-height: 18px;
font-style: italic;
font-size: 12px;
span {
font-weight:normal;
color: #999;
}
a {
font-weight:normal;
text-decoration:none;
}
}
}
li.rule .selectize-control {
margin-top: 11px;
}
.selectize-control.multi .selectize-input {
padding: 6px 5px 2px 5px;
margin: 5px 0 0 0;
border-radius: 0;
border-top-color: #b7b7b7;
border-left-color: #b7b7b7;
&.has-items{
padding: 3px 15px 0px 3px;
}
}
.selectize-input > input {
margin: 0 5px 0 5px !important;
}
html .selectize-dropdown .optgroup-header{
font-weight:bold;
color:#80b7ab;
}
.selectize-control.multi .selectize-input > div {
cursor: pointer;
margin: 0 2px 2px 0;
padding: 1px 5px 0;
background: #D7E9F8;
color: #303030;
border: 1px solid #d0d0d0;
}
#userAttrs .selectize-control.multi .selectize-input:not(.dropdown-active):not(.has-items):after {
position: absolute;
top: 50%;
right: 10px;
display: block;
width: 0;
height: 0;
margin-top: -3px;
border-color: #808080 transparent transparent transparent;
border-style: solid;
border-width: 5px 5px 0 5px;
content: ' ';
}
.selectize-control.single .selectize-input{
padding:6px 5px 2px 5px;
border-radius: 0;
}
.selectize-dropdown-content > div{
border-top: 1px solid #eee;
&:first-of-type{
border-top:none;
}
}
span.realm,.content-bg .policy-header h2 span.realm {
font-size: 20px;
font-weight: bold;
position: relative;
bottom: -4px;
line-height: 10px;
cursor: default;
&.toplevel{
padding: 0 0 0 5px;
bottom: -2px;
}
}
#selectableRealmContainer{
padding: 0 30px 0 0px;
margin: 4px 0 0 3px;
}
#lastFSlash, select {
transition:opacity 300ms linear;
&.fade{
opacity:0;
}
}
/*----- Tabs -----*/
.tabs {
.tab-links {
a {
padding: 7px 10px 5px;
display:block;
border: 1px solid #ddd;
border-radius: 3px 3px 0 0;
font-weight: bold;
text-decoration: none;
color:#4c4c4c;
background:#eee;
transition:background 200ms ease-in-out;
margin: 0px 5px;
float: left;
position: relative;
top:1px;
border-bottom:none;
border-bottom: 1px solid #ddd;
margin-top: 3px;
padding-bottom: 3px;
&:hover {
background:#fff;
}
}
.active-tab {
a, a:hover {
background:#fff;
border-bottom:transparent;
margin-top: 0;
padding-bottom: 7px;
cursor: default;
}
}
}
.tab-content {
border-radius: 3px;
background: #fff;
padding: 0 10px 10px;
border: 1px solid #ddd;
.inactive-tab {
height: 0;
overflow: hidden;
position:absolute;
top:-1000px;
left:-1000px;
}
p {
padding:15px 5px 0 5px;
}
}
}
/* XUI Overrides */
#content {
/*stop dragged items from cropping when they go out of content bounds*/
overflow: visible;
}
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;
}
body.dragging,
body.dragging *{
cursor: move !important;
}
body.editing{
#dialog-background{
height:auto;
opacity:0.5;
z-index:500;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(60, 60, 60, 0.1) 35px, rgba(60, 60, 60, 0.1) 70px);
}
#condition-management ol.condition-management-group li.rule.editing{
position: absolute;
left: 0;
right: 0;
z-index: 700;
margin: -8px 48px 0;
.icon-pencil {
display:none;
}
.icon-checkmark {
font-size: 36px;
display:block;
}
.icon-remove {
display:none;
}
&:first-child {
margin-top: -3px;
}
}
}
#condition-management{
select {
width:auto;
height:auto;
padding:0;
}
label {
display: block;
float: left;
padding: 0 5px 0 0;
text-align:left;
white-space: nowrap;
}
input[type="text"], textarea, select {
border-radius:0;
padding:5px;
font-size: 13px;
text-overflow: ellipsis;
}
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 #ccc;
#inner-arrow-up {
transition: all 200ms ease-out;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 0 solid #eee;
margin: 2px 0 0 -15px;
position: absolute;
}
}
#pickUpArea{
transition: background-color 200ms ease-out;
}
&.show-hint{
#pickUpArea{
background-color:#D7E9F8;
}
#outter-arrow-up {
border-bottom: 15px solid #ccc;
#inner-arrow-up {
border-bottom: 15px solid #D7E9F8;
}
}
}
.rules-help{
margin-top:20px;
}
#pickUpArea{
padding: 10px 8px;
margin: 0 5px 5px 5px;
border: 1px solid #ccc;
background: #eee;
border-radius: 5px;
ol#pickUpItem {
min-height: 77px;
background: #fff;
margin: 0 0 20px 0;
border: 2px dashed #ddd;
li.operator, li.rule{
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;
}
span.item-button-panel{
display:none;
}
}
li.operator:not(.dragged){
margin-top: 14px;
}
}
}
ol#dropOffArea li.invalid-rule{
.invalid-background;
span.item-button-panel > span {
color:#B65D5D;
}
}
span.item-button-panel {
float:right;
padding: 8px 3px;
> span {
padding: 0 5px;
&.tooltips {
&:hover span, &:focus span {
margin-left: -54px;
width: 100px;
}
&.tooltips-wide{
&:hover span, &:focus span {
margin-left: -105px;
width: 200px;
}
}
}
}
}
li.operator > span.item-button-panel{
padding-top: 0;
}
li.editing span.item-button-panel{
position: absolute;
top: 5px;
right: 0;
}
li.dragged{
position: absolute;
top: 0;
opacity: 0.9;
z-index: 200;
.help-link {
display: none;
}
}
li.dragged.dropped{
opacity: 1;
}
ol.dropbox li.dragged {
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;
}
}
ol.condition-management-group {
li {
display: block;
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
background: 0 0 repeat-y #ddd;
transition: background 200ms ease-out 0ms, box-shadow 100ms linear 0ms,;
&.operator {
&.or {
background-color:@or-color;
> span, > select {color:darken(@or-color, 40%)}
&.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, 40%)}
&.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, 40%) }
&.dragged, &:focus {background-color:darken(@not-color, 10%)}
> ol > .placeholder {background-color:darken(@not-color, 20%)}
}
&.or,&.and,&.not{
cursor: default;
&:focus{
cursor: move;
box-shadow:1px 2px 1px 0 rgba(0, 0, 0, 0.4);
background-image:url(@grabber-image);
}
}
}
&.rule{
cursor: default;
&:focus{
cursor: move;
box-shadow:1px 2px 1px 0 rgba(0, 0, 0, 0.4);
background-image:url(@grabber-image);
background-color: #ccc;
}
&.legacy-condition{
.invalid-background(#FCFFD4);
span.item-button-panel > span {
color:#9B9E75;
}
}
}
&.placeholder {
position: relative;
margin: 5px;
padding: 0;
border: none;
height: 10px;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
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 {
color: #444;
font-size:11px;
line-height: 11px;
border-right: 1px solid #eee;
padding-right: 10px;
margin-right: 10px;
float:left;
&:last-of-type {
border-right: none;
}
h3 {
font-weight: bold;
font-size: 11px;
line-height: 11px;
padding-bottom: 5px;
}
> span {
min-height: 11px;
display: block;
padding-bottom: 5px;
.ellipsis;
max-width:500px;
}
&.no-float {
float: none;
margin-right: 30px;
}
}
div.field-float-selectize {
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-top: -4px;
.icon-info {
font-size: 14px;
> span {
text-align: left;
width: 400px;
padding: 8px;
margin-left: -209px;
}
}
}
.field-float-pattern, .field-float-select, .field-float-selectize {
label {
font-size:11px;
color:#555;
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: 98px;
}
&.date-field {
min-width: 112px;
}
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;
margin-bottom: 1px;
min-width: 177px;
clear:left;
float:left;
padding:5px 20px 5px 5px;
-webkit-appearance: none;
background: url('../img/sort_both.png') no-repeat right #fff;
background-color:#fff;
&.placeholderText {
color: #ddd;
background-color:transparent;
border-color: transparent;
box-shadow: none;
}
&:invalid {
.invalid-background;
transition: background 0.3s ease-in-out 0s;
}
}
}
.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;
}
}
}
}
/*Overrides for accordion states*/
section.active-step{
#condition-management #pickUpArea ol#pickUpItem li.operator:not(.dragged),
#condition-management #pickUpArea ol#pickUpItem li.rule:not(.dragged) {
display: block;
}
}
#condition-management ol.condition-management-group ul.buttonControl{
margin-top: 16px;
font-size: 0;
width: 100px;
position: absolute;
li{
border:none;
display:inline-block;
margin:0;
padding:0;
a.button{
border-radius:0;
margin-left:0;
background-color:lighten(@color-inactive, 5%);
transition:background 100ms;
&:not(.selected){
border-color:@color-inactive;
background-image:none;
&:hover{
background-color:average(@color-active, @color-inactive)
}
}
&.selected:hover{
.linear-gradient(top, @color-active, darken(@color-active, 10%));
}
}
&:first-of-type{
a.button{
border-radius:5px 0 0 5px;
}
}
&:last-of-type{
a.button{
border-radius:0 5px 5px 0;
}
}
}
a.button {
line-height:12px;
}
}
#condition-management .item-data > div span.inline-right {
padding: 0;
position: absolute;
right: 4px;
bottom: 1px;
color: #ddd;
}
#condition-management .item-data div.field-float-pattern.time-field {
min-width: 82px;
input {
width: 70px;
}
}
#condition-management .item-data div.field-float-select.day-field {
min-width: 100px;
select {
width:100px;
min-width:0;
}
}
#condition-management .item-data {
> div#conditionAttrTimeDate {
border-right: none;
margin-right:0;
div.float-left {
float: left;
border-right: 1px solid #eee;
&:last-of-type{
border-right: none;
}
}
.datePicker{
width:100px;
}
}
}
#uma{
margin-bottom: 40px;
.policy-content {
min-height:100px;
}
#selectUser{
width: 370px;
margin: 0 15px 10px 0;
}
#selectPermission{
min-width:370px;
margin: 0 15px 10px 0;
}
#resourceList{
margin-bottom:30px;
}
input.button{
padding-top: 5px;
padding-bottom: 5px;
margin: 26px 0 0 0;
}
label {
display: block;
padding: 0 0 4px 2px;
color: grey;
}
.backgrid-container {
width: 100%;
overflow-x: scroll;
}
.backgrid{
.string-cell, .uri-cell, .email-cell, .string-cell.editor input[type=text], .uri-cell.editor input[type=text], .email-cell.editor input[type=text], .datetime-cell {
text-align: left;
}
th {
text-align: left;
a {
color:#777;
margin-bottom:34px;
}
&.filter-header-cell a {
margin-bottom:0;
}
background-color: white;
}
tbody tr {
background-color: #eee;
&:nth-child(even) {
background-color: #fff;
}
&.empty {
background-color: transparent;
td{
display: table-cell;
padding:10px;
}
}
td {
// required for tooltips
overflow:visible;
a {
color: #777;
text-decoration: none;
font-weight:bold;
&:hover{
text-decoration: underline;
}
}
}
&:hover{
background-color: #d7e9f8;
color: #1f6fb1;
td a {
color: #1f6fb1;
}
}
}
.ascending .sort-caret{
border-bottom: 4px solid #80b7ab;
}
.descending .sort-caret {
border-top: 4px solid #80b7ab;
}
max-width: none;
overflow: hidden;
position: relative;
}
.backgrid-container{
height:auto;
overflow: auto;
border: 1px solid rgb(226, 223, 223);
min-height: 369px; // the height of 10 records
background-color: #ddd;
}
.backgrid-filter.form-search {
margin: 0 0 5px;
.hideSearchCloseBtn;
}
.selectize-cell {
width: 300px;
}
.search {
&:after {
background-color: #80b7ab;
}
&:before {
border: 3px solid #80b7ab;
}
}
.selectize-control.multi .selectize-input, .selectize-control.single .selectize-input{
margin: 5px 0 0 0;
}
span.tooltips:hover span, span.tooltips:focus span {
width: 200px;
margin-left: -100px;
}
span.tooltips span {
color: #d7e9f8;
background-color: #1f6fb1;
padding: 6px 5px;
background-image: -webkit-linear-gradient(top, lighten(#1f6fb1, 10%), #1f6fb1);
}
span.tooltips span:after {
border-top: 8px solid #1f6fb1;
}
}
#default-base{
width:100%;
max-width:980px;
}
.menubar {
margin: 0 5px 0;
}
#menu {
.menu {
margin:0 0 15px 0;
}
}
.content {
padding: 0px 10px;
}
.submenubar {
clear: both;
border: none;
margin: 0 5px 0;
li a {
text-decoration:none;
color: #777;
}
a:hover, .active a{
border-radius: 0;
background-color: transparent;
color: #80b7ab;
}
}
#dialog-background.show {
opacity: 0.5;
}