|
@import "compass";
|
|
@import "katello/overrides";
|
|
@import "alchemy-forms/forms";
|
|
@import "alchemy-buttons/buttons";
|
|
|
|
@import "bastion/font-awesome/scss/font-awesome";
|
|
|
|
@import "katello/katello_base";
|
|
|
|
@import "katello/look";
|
|
@import "katello/grid";
|
|
|
|
@import "katello/fancyqueries";
|
|
@import "katello/widgets/search";
|
|
@import "katello/widgets/multiselect";
|
|
@import "katello/widgets/chosen";
|
|
@import "katello/widgets/scrollpane";
|
|
@import "katello/widgets/env_select";
|
|
@import "katello/widgets/tipsy_custom";
|
|
@import "katello/widgets/tabs";
|
|
@import "katello/widgets/path_selector";
|
|
@import "katello/katello_sprites";
|
|
|
|
@import "katello/jquery-ui-1.8.11.custom";
|
|
@import "katello/jquery.loadmask";
|
|
@import "katello/jquery.jnotify";
|
|
@import "katello/jquery.treeTable";
|
|
@import "katello/jquery.jscrollpane";
|
|
@import "katello/jquery.tipsy";
|
|
@import "katello/jquery.multiselect";
|
|
@import "katello/jquery.multiselect.filter";
|
|
@import "katello/ui.spinner";
|
|
|
|
@import "katello/custom_info";
|
|
@import "katello/activation_keys";
|
|
@import "katello/content_search";
|
|
@import "katello/contents";
|
|
@import "katello/dashboard";
|
|
@import "katello/distributors";
|
|
@import "katello/generic";
|
|
@import "katello/notifications";
|
|
|
|
body {
|
|
background-color: white;
|
|
min-width: $static_width;
|
|
}
|
|
|
|
pre { text-indent: 18px; }
|
|
a { outline: 0 none;}
|
|
strong { font-weight: bold; }
|
|
ul { -webkit-padding-start: 0; -moz-padding-start: 0; }
|
|
.clear { clear: both; }
|
|
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
|
|
clear:both;
|
|
height:0;
|
|
font-size: 1px;
|
|
line-height: 0px;
|
|
}
|
|
.wrap { overflow: hidden; margin-bottom: 2em; } /* wrapper around floating elements */
|
|
.nomargin { margin: none; }
|
|
.placeholder { margin-bottom: 2em; }
|
|
.disabled {
|
|
opacity: 0.4;
|
|
cursor: default;
|
|
text-decoration: none;
|
|
|
|
&:hover, &:link, &:visited, &:active {
|
|
text-decoration: none;
|
|
cursor: default;
|
|
}
|
|
a:hover, a:link, a:visited, a:active {
|
|
text-decoration: none;
|
|
cursor: default;
|
|
}
|
|
}
|
|
.hidden { display: none; visibility: visible; }
|
|
.invisible { visibility: hidden; }
|
|
.outlined { outline: 2px solid $kselected_color; }
|
|
.alt { background-color: lighten($lightgrey_color, 35%) !important; }
|
|
.clickable { cursor: pointer; cursor: hand; }
|
|
.light_text { color: $lightgrey_color; }
|
|
hr { color: $border_color; }
|
|
|
|
.la { text-align: left; } /* text align left */
|
|
.ra { text-align: right; } /* text align right */
|
|
.role-alt { color: #888;}
|
|
.ca { text-align: center; } /* text align center */
|
|
.fc { display: inline-block; margin: 0 auto; } /* "float", center */
|
|
.multiline { word-wrap: break-word; word-break: break-all; }
|
|
.full { width: 98%; padding: 0 1%;}
|
|
.twocolumn {
|
|
@include column-count(2);
|
|
@include column-gap(10px);
|
|
}
|
|
|
|
a {
|
|
cursor: hand;
|
|
cursor: pointer;
|
|
color: $linkfg_color;
|
|
text-decoration: none;
|
|
|
|
&:hover, &:focus {
|
|
color: lighten($linkfg_color, 10%);
|
|
text-decoration: underline;
|
|
}
|
|
&:active {
|
|
color: darken($linkfg_color, 20%);
|
|
}
|
|
}
|
|
|
|
/* TEXT ENTRIES */
|
|
input, textarea {
|
|
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2) inset);
|
|
border: 1px solid darken($stroke_color,20%);
|
|
background-color: $input-background_color;
|
|
background: $input_background_img;
|
|
padding: 4px;
|
|
margin: 0;
|
|
|
|
&:focus {
|
|
border-width: 2px;
|
|
padding: 3px;
|
|
background-color: $white_color;
|
|
outline: none;
|
|
}
|
|
&.disabled, &[disabled] {
|
|
opacity: 0.4;
|
|
}
|
|
.grid_1 { width: 30px !important; }
|
|
.grid_2 { width: 90px !important; }
|
|
.grid_2 {
|
|
input[type="file"] { width: 90px; }
|
|
}
|
|
.grid_3 { width: 150px !important; }
|
|
.grid_3 {
|
|
input[type="search"] { width: 118px; }
|
|
}
|
|
.grid_4 { width: 210px !important; }
|
|
.grid_5 { width: 270px !important; }
|
|
.grid_6 { width: 330px !important; }
|
|
.grid_7 { width: 390px !important; }
|
|
}
|
|
|
|
input[type="search"] {
|
|
@include border-radius(20px);
|
|
padding: 4px 30px 4px 10px;
|
|
|
|
&:focus {
|
|
padding: 3px 29px 3px 9px;
|
|
}
|
|
}
|
|
/* CHECKBOXES and RADIOBUTTONS*/
|
|
input[type="checkbox"],input[type="radio"] {
|
|
background-color: transparent;
|
|
border: none;
|
|
margin: 0;
|
|
padding: 2px;
|
|
|
|
&:focus {
|
|
border-width: 1px;
|
|
padding: 1px;
|
|
}
|
|
}
|
|
/* FILE INPUT */
|
|
input[type="file"] {
|
|
/* FIXME */
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* custom ui spinner class for HTML5 like spinners */
|
|
.ui-spinner {
|
|
width: 40px;
|
|
}
|
|
|
|
.status_exclamation_icon {
|
|
background: $status_exclamation_icon;
|
|
height: 16px;
|
|
width: 16px;
|
|
position: absolute;
|
|
}
|
|
.status_confirm_icon {
|
|
background: $status_confirm_icon;
|
|
@extend .status_exclamation_icon;
|
|
}
|
|
.status_alert_icon {
|
|
background: $status_alert_icon;
|
|
@extend .status_exclamation_icon;
|
|
}
|
|
|
|
.status_warning_icon {
|
|
background: $warning_icon_triangle;
|
|
@extend .status_exclamation_icon;
|
|
}
|
|
|
|
/* BUTTONS */
|
|
input[type='submit'], button, .button {
|
|
font-family: $screenfont; /* for some reason ff3.6 won't inherit from body */
|
|
font-size: 10px;
|
|
display: inline-block;
|
|
vertical-align: bottom;
|
|
background: -moz-linear-gradient(top, #f9f9f9, #f0f0f0, #e5e5e5, #e9e9e9);
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), color-stop(0.9, #e5e5e5), to(#e9e9e9));
|
|
@include box-shadow(none);
|
|
border: 1px solid darken($stroke_color, 20%);
|
|
color: #221e1f;
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
@include border-radius(5px);
|
|
@include text-shadow(0 1px 0 rgba($white_color, 1));
|
|
min-height: 14px;
|
|
.nomargin {
|
|
margin: 0;
|
|
}
|
|
&:hover {
|
|
background: -moz-linear-gradient(top, $white_color, $white_color, #cfcfcf);
|
|
background: -webkit-gradient(linear, left top, left bottom, from($white_color), color-stop(0.6, $white_color), to(#cfcfcf));
|
|
@include box-shadow(0 1px 2px rgba(0,0,0,0.5));
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
&:active {
|
|
background: -moz-linear-gradient(top, #c2c3c0, #e4e5e4);
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#c2c3c0), to(#e4e5e4));
|
|
@include box-shadow(none);
|
|
text-decoration: none;
|
|
}
|
|
&:focus {
|
|
text-decoration: none;
|
|
color: #000;
|
|
border-width: 2px;
|
|
}
|
|
&.dialogbutton {
|
|
float: right;
|
|
margin-left: 3px;
|
|
margin: 40px 4px 4px;
|
|
}
|
|
&.formbutton {
|
|
display: inline-block;
|
|
margin-left: 3px;
|
|
margin: 40px 4px 4px;
|
|
}
|
|
&.actionlink {
|
|
margin: 40px 0 0;
|
|
}
|
|
&.disabled, &[disabled] {
|
|
cursor: default;
|
|
background: transparent;
|
|
opacity: 0.4;
|
|
|
|
&:hover {
|
|
background: transparent;
|
|
@include box-shadow(none);
|
|
}
|
|
}
|
|
&.iconbutton {
|
|
display: inline-block;
|
|
}
|
|
&.tiny {
|
|
padding: 4px;
|
|
margin: 0;
|
|
&:active, &:focus {
|
|
margin: 0;
|
|
padding: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border: 1px solid $stroke_color;
|
|
margin: 10px 0 40px; width: 100%;
|
|
font-size: 95%;
|
|
width: 99%;
|
|
|
|
thead {
|
|
background-color: lighten($stroke_color,25%);
|
|
th {
|
|
font-size: 95%;
|
|
padding: 2px 6px;
|
|
font-family: $headlinefont;
|
|
font-weight: bold;
|
|
color: lighten($header_color,20%);
|
|
text-transform: uppercase;
|
|
border-right: 1px dotted darken($stroke_color,20%);
|
|
&:last-child {
|
|
border-right: 0 none;
|
|
}
|
|
a, a:hover {
|
|
display: block;
|
|
margin: 0;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
&.active {
|
|
&.sortable {
|
|
display: inline-block;
|
|
padding-right: 20px;
|
|
}
|
|
&.desc {
|
|
background: $order_desc_img;
|
|
}
|
|
&.asc {
|
|
background: $order_asc_img;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
td {
|
|
padding: 4px;
|
|
vertical-align: top;
|
|
min-height: 16px;
|
|
}
|
|
&.noborder {
|
|
border: none;
|
|
thead {
|
|
background-color: transparent;
|
|
th {
|
|
border: none;
|
|
span {
|
|
color: lighten($header_color,30%);
|
|
}
|
|
}
|
|
}
|
|
td {
|
|
color: #888;
|
|
.percentBlock {
|
|
border:1px solid #909090;
|
|
padding: 0;
|
|
width:100px;
|
|
font-size: 9px;
|
|
text-align: center;
|
|
color: #555;
|
|
.percentBlockInner {
|
|
}
|
|
.gradGreen {
|
|
background-color: $good_color;
|
|
}
|
|
}
|
|
.min {
|
|
background: $arrow_min_img;
|
|
float:left;
|
|
padding-top:5px;
|
|
width:50%;
|
|
}
|
|
.max {
|
|
background: $arrow_max_img;
|
|
float:right;
|
|
padding-top:5px;
|
|
width:50%;
|
|
}
|
|
}
|
|
}
|
|
&.gap {
|
|
margin-bottom: 7em;
|
|
}
|
|
}
|
|
|
|
.treeTable {
|
|
td {
|
|
&:first-child {
|
|
padding-left: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.lock_icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 4px;
|
|
background: $locked_icon;
|
|
}
|
|
|
|
.action {
|
|
background: $search_icon_white;
|
|
|
|
&:hover { background: $search_icon_white; }
|
|
&:active {background: $search_icon_white; }
|
|
}
|
|
|
|
.actions {
|
|
span {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 16px; height: 16px;
|
|
margin: 2px 2px 0px 6px;
|
|
background: url(../../../images/icons/action-icons.png) no-repeat 0 0;
|
|
float: left;
|
|
|
|
&.edit { background-position: -16px 0;}
|
|
&.delete { background-position: -32px 0;}
|
|
&.rename { background-position: -80px 0;}
|
|
&.copy { background-position: -48px 0;}
|
|
&.build { background-position: -64px 0;}
|
|
&.add { background-position: -48px 0;}
|
|
&:first-child { margin-left: 2px; }
|
|
}
|
|
label {
|
|
font-weight: normal;
|
|
float: left;
|
|
border-right: 2px solid #BEBEBE;
|
|
padding-right: 6px;
|
|
&:last-child {
|
|
border-right: none 0;
|
|
}
|
|
}
|
|
/* BUTTONS */
|
|
input[type='submit'],button,.button {
|
|
margin: 0px 4px 4px;
|
|
}
|
|
}
|
|
|
|
/* FORMS */
|
|
/* generic */
|
|
label {
|
|
text-align: right;
|
|
color: $labelfg_color;
|
|
&.required {
|
|
font-weight: bold;
|
|
}
|
|
&.header {
|
|
text-align: left;
|
|
font-weight: normal;
|
|
font-size: 90%;
|
|
margin-bottom: 1em;
|
|
}
|
|
&.big {
|
|
text-align: left;
|
|
text-transform: uppercase;
|
|
font-family: $headlinefont;
|
|
font-size: 110%;
|
|
font-weight: bold;
|
|
color: $formheadfg_color;
|
|
}
|
|
}
|
|
|
|
legend {
|
|
font-size: 130%;
|
|
font-family: $headlinefont;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
color: $header_color;
|
|
}
|
|
|
|
/* When you need to seperate items within a fieldset */
|
|
.fielditem {
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
fieldset {
|
|
.button{ margin-left: 10px; }
|
|
}
|
|
|
|
#toTop {
|
|
display:none;
|
|
text-decoration:none;
|
|
position:fixed;
|
|
bottom:10px;
|
|
left:10px;
|
|
overflow:hidden;
|
|
width:32px;
|
|
height:32px;
|
|
border:none;
|
|
text-indent:-999px;
|
|
background: $ui_totop_img;
|
|
|
|
&:active, &:focus {
|
|
outline:none;
|
|
}
|
|
}
|
|
|
|
#toTopHover {
|
|
background: $ui_totop_hover_img;
|
|
width:32px;
|
|
height:32px;
|
|
display:block;
|
|
overflow:hidden;
|
|
float:left;
|
|
opacity: 0;
|
|
-moz-opacity: 0;
|
|
filter:alpha(opacity=0);
|
|
}
|
|
/* end footer */
|
|
|
|
/* IE and other horror browser workarounds */
|
|
|
|
/* basic image styling for buttons in older browsers */
|
|
.no-cssgradients input[type='submit'], .no-cssgradients button, .no-cssgradients .button {
|
|
/* FIXME image based buttons */
|
|
}
|
|
|
|
.modalbox {
|
|
margin: 130px auto;
|
|
@include box-shadow(0 1px 5px rgba(0, 0, 0, 0.6));
|
|
width: 550px;
|
|
overflow: hidden;
|
|
background-color: $white_color;
|
|
h2 {
|
|
background-color: $formheadbg_color;
|
|
color: $formheadfg_color;
|
|
text-transform: uppercase;
|
|
font-size: 120%;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* when modalbox miss dropshadow set some border */
|
|
.no-boxshadow .modalbox { border: 2px solid $stroke_color; }
|
|
|
|
/* DEBUG GRID */
|
|
#grid {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0; bottom: 0;
|
|
left: 50%;
|
|
width: 1020px;
|
|
margin-left: -510px;
|
|
background: $ninesixty_img;
|
|
}
|
|
|
|
.notifications {
|
|
tr.success {
|
|
@include background-image(linear-gradient(white, white, rgb(242,255,229)));
|
|
&:hover {
|
|
@include background-image(linear-gradient(white, rgb(242,255,229)));
|
|
}
|
|
}
|
|
tr.error {
|
|
@include background-image(linear-gradient(white, white, rgb(255,229,229)));
|
|
&:hover {
|
|
@include background-image(linear-gradient(white, rgb(255,229,229)));
|
|
}
|
|
}
|
|
tr.message {
|
|
@include background-image(linear-gradient(white, white, rgb(239,239,239)));
|
|
&:hover {
|
|
@include background-image(linear-gradient(white, rgb(239,239,239)));
|
|
}
|
|
}
|
|
tr.warning {
|
|
@include background-image(linear-gradient(white, white, rgb(255,255,229)));
|
|
&:hover {
|
|
@include background-image(linear-gradient(white, rgb(255,255,229)));
|
|
}
|
|
}
|
|
}
|
|
|
|
#main {
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
li {
|
|
list-style-type: none;
|
|
}
|
|
}
|
|
.actions {
|
|
margin-top: 1em;
|
|
}
|
|
}
|
|
|
|
.spinner {
|
|
margin: 0 auto;
|
|
margin-top: 30%;
|
|
height: 16px;
|
|
width: 16px;
|
|
display: block;
|
|
position: relative;
|
|
z-index: 1000;
|
|
background: $spinner_img;
|
|
}
|
|
|
|
.large_white_spinner {
|
|
margin: 0 auto;
|
|
margin-top: 20%;
|
|
height: 32px;
|
|
width: 32px;
|
|
display: block;
|
|
position: relative;
|
|
z-index: 1000;
|
|
background: url("large-white-spinner.gif") no-repeat 0 0 transparent;
|
|
}
|
|
|
|
/* editable icon for in place editing */
|
|
.editable {
|
|
padding: 4px 26px 4px 2px;
|
|
background: $edit_icon;
|
|
cursor: pointer;
|
|
cursor: hand;
|
|
@include border-radius(5px);
|
|
&:hover {
|
|
background: $edit_hover_icon;
|
|
}
|
|
}
|
|
|
|
/* end editable icon for in place editing*/
|
|
|
|
/* 2 pane css */
|
|
#container {
|
|
width: 100%;
|
|
margin:0 auto;
|
|
min-height:600px;
|
|
position: relative;
|
|
/* right side of 2 pane below the sliding pane */
|
|
.right_panel {
|
|
float:right;
|
|
width:448px;
|
|
min-height: 300px;
|
|
padding: 20px;
|
|
border: 1px solid $border_color;
|
|
@include border-right-radius(5px);
|
|
background-color: $lightergrey_color;
|
|
margin-top: 94.5px;
|
|
margin-right: 19px;
|
|
position: relative;
|
|
|
|
.panel_action {
|
|
.disabled {
|
|
&:hover {
|
|
text-decoration: none;
|
|
cursor: normal;
|
|
}
|
|
}
|
|
.options {
|
|
display: none;
|
|
@include border-radius(5px);
|
|
@include box-shadow(rgba(0,0,0,0.4), 2px 2px 2px);
|
|
background-color: white;
|
|
border: 1px solid $border_color;
|
|
padding: 15px;
|
|
margin: 4px auto;
|
|
width: 85%;
|
|
.actions {
|
|
float: right;
|
|
}
|
|
}
|
|
input[type="text"], .ui-multiselect {
|
|
margin-left: 20px;
|
|
}
|
|
.validation_error {
|
|
padding-left: 20px;
|
|
color: $validation_error_color;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
#select-result {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
font-size: 18px;
|
|
color: $lightgrey_color;
|
|
}
|
|
#select-none {
|
|
position: absolute;
|
|
top: 36px;
|
|
right: 10px;
|
|
}
|
|
.helptip_area {
|
|
float: left;
|
|
width: 62%;
|
|
clear: both;
|
|
}
|
|
.filter_button {
|
|
|
|
|
|
}
|
|
}
|
|
|
|
/* left side of 2 pane that has clickable links */
|
|
.column_panel_1 { width: 300px; }
|
|
.column_panel_2 { width: 375px; }
|
|
.column_panel_3 { width: 450px; }
|
|
.left_panel {
|
|
float:left;
|
|
min-height:500px;
|
|
z-index: 0;
|
|
h2 {
|
|
margin-bottom: 8px;
|
|
width: 164px;
|
|
max-width: 164px;
|
|
}
|
|
#new {
|
|
border-bottom: 0 none;
|
|
padding: 8px;
|
|
margin: 0;
|
|
clear: right;
|
|
text-align: center;
|
|
width: 10em;
|
|
right: 0;
|
|
min-height: 21px;
|
|
height: auto;
|
|
font-size: 100% !important;
|
|
&.block{
|
|
&.active{
|
|
.arrow-right {
|
|
border-bottom: 19px solid transparent;
|
|
border-left: 17px solid $kselected_color;
|
|
border-top: 18px solid transparent;
|
|
right: -17px;
|
|
}
|
|
&:hover {
|
|
background-color: darken($kselected_color, 10%);
|
|
.arrow-right { border-left-color:darken($kselected_color, 10%); }
|
|
}
|
|
}
|
|
&:hover {
|
|
.arrow-right {
|
|
border-left: 17px solid $listhover_color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#heading_title {
|
|
font-weight: bold;
|
|
}
|
|
/* search forms */
|
|
.search {
|
|
float: right;
|
|
margin-bottom: 6px;
|
|
margin-top: 6px;
|
|
margin-right: 6px;
|
|
position: relative;
|
|
clear: right;
|
|
button {
|
|
position: absolute;
|
|
width: 16px; height: 16px;
|
|
text-indent: -4000em;
|
|
margin: -8px 0 0;
|
|
background-position: 0 0;
|
|
border: none;
|
|
padding: 0;
|
|
&:hover {
|
|
@include box-shadow(none);
|
|
}
|
|
}
|
|
input[type="text"] {
|
|
float: right; /* webkit adds an extra padding and makes the widget narrower */
|
|
width: 185px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.block_head {
|
|
background-color: lighten($stroke_color,8%);
|
|
display: block;
|
|
height: 1.3em;
|
|
color: $lightgrey_color;
|
|
.column_1, .column_2, .column_3 {
|
|
text-align: left;
|
|
padding-left: 1%;
|
|
font-size: 85%;
|
|
font-family: $headlinefont;
|
|
color: lighten($header_color,20%);
|
|
text-transform: uppercase;
|
|
white-space:nowrap;
|
|
border-right: 1px dotted darken($stroke_color,20%);
|
|
&:last-child {
|
|
border-right: 0 none;
|
|
}
|
|
a, a:hover {
|
|
display: block;
|
|
margin: 0;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
&.active {
|
|
&.sortable {
|
|
display: inline-block;
|
|
padding-right: 20px;
|
|
}
|
|
&.desc {
|
|
background: $order_desc_img;
|
|
}
|
|
&.asc {
|
|
background: $order_asc_img;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.column_1 { width: 98%; }
|
|
.column_2 { width: 48%; }
|
|
.column_3 { width: 31%; }
|
|
}
|
|
.column_1 {
|
|
width: 100%;
|
|
float: left;
|
|
height: inherit;
|
|
}
|
|
.column_2 {
|
|
width: 50%;
|
|
float: left;
|
|
height: inherit;
|
|
}
|
|
.column_3 {
|
|
width: 33%;
|
|
float: left;
|
|
height: inherit;
|
|
&:last-child {
|
|
width: 34%;
|
|
}
|
|
}
|
|
|
|
.ui-autocomplete { z-index: 300 !important }
|
|
|
|
.block {
|
|
border-bottom: solid 1px #F2F2F2;
|
|
padding: 4px 10px 8px 5px;
|
|
cursor:pointer;
|
|
position: relative;
|
|
height: 45px;
|
|
font-size: 90%;
|
|
&.active {
|
|
background-color: $kselected_color;
|
|
color: $white_color;
|
|
.arrow-right {
|
|
border-bottom: 22px solid transparent;
|
|
border-left: 22px solid $kselected_color;
|
|
border-top: 22px solid transparent;
|
|
height: 0;
|
|
margin: 0;
|
|
position: absolute;
|
|
right: -21px;
|
|
top: 0px;
|
|
width: 0;
|
|
z-index: 2;
|
|
}
|
|
&:hover {
|
|
background-color: darken($kselected_color, 10%);
|
|
.arrow-right { border-left-color:darken($kselected_color, 10%); }
|
|
}
|
|
a, a:hover, a:visited, a:active, a:link {
|
|
font-color: $white_color;
|
|
}
|
|
}
|
|
&.add {
|
|
background-color: $listhover_color;
|
|
color: $white_color;
|
|
}
|
|
&:hover {
|
|
background-color: $listhover_color;
|
|
color: $white_color;
|
|
.arrow-right {
|
|
border-left: 22px solid $listhover_color;
|
|
}
|
|
}
|
|
}
|
|
|
|
#panel-frame {
|
|
position: fixed;
|
|
width:0px;
|
|
z-index: -1;
|
|
|
|
.tupane_footer {
|
|
margin: 5px 0 0 0;
|
|
overflow: auto;
|
|
padding: 10px;
|
|
|
|
.selection_group {
|
|
height: 30px;
|
|
width: 160px;
|
|
float: right;
|
|
padding-right: 50px;
|
|
}
|
|
}
|
|
.tupane_header {
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
.subnav-header {
|
|
height: 30px;
|
|
z-index: 100;
|
|
|
|
background-color: rgb(194, 223, 255);
|
|
border-bottom: 1px solid #CCC;
|
|
|
|
nav { height: inherit; }
|
|
|
|
.menu-item {
|
|
a, a:visited, a:hover { color: black; }
|
|
}
|
|
}
|
|
|
|
.panel {
|
|
background-color:$panel_color;
|
|
width:490px;
|
|
margin-top:0;
|
|
position:relative;
|
|
left:0;
|
|
@include opacity(0);
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
border-right: 1px solid #D1D1D2;
|
|
border-left: 1px solid #D1D1D2;
|
|
border-bottom: 1px solid #D1D1D2;
|
|
border-top: 1px solid #D1D1D2;
|
|
z-index: 0;
|
|
top: 0;
|
|
@include box-shadow(0 0 20px #ddd inset);
|
|
|
|
.subnav {
|
|
border: 0;
|
|
width: inherit;
|
|
background: $third_level_background_img;
|
|
@include background-size(100% 29px);
|
|
margin-bottom: 10px;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
height: auto;
|
|
&>ul {
|
|
min-height: 0px;
|
|
|
|
li {
|
|
background: none;
|
|
&.selected {
|
|
background: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.subsubnav {
|
|
background: none transparent;
|
|
}
|
|
.helptip-close{
|
|
float: right;
|
|
}
|
|
.helptip-open-button {
|
|
right: 50px;
|
|
top: 7px;
|
|
}
|
|
.data {
|
|
font-size: 100%;
|
|
|
|
.spinner {
|
|
margin-top: 150px;
|
|
height: 250px;
|
|
}
|
|
}
|
|
.panel-close {
|
|
position: absolute;
|
|
top: 9px;
|
|
right: 20px;
|
|
}
|
|
.pane_actions {
|
|
right: 82px;
|
|
position: absolute;
|
|
top: 9px;
|
|
.pane_action {
|
|
&.separator {
|
|
margin: 0;
|
|
border-right: 2px solid $border_color;
|
|
padding: 1px 10px;
|
|
}
|
|
padding: 1px 10px;
|
|
color: darkRed;
|
|
&:hover {
|
|
color: red;
|
|
}
|
|
}
|
|
}
|
|
|
|
.separator {
|
|
border-right: 2px solid $border_color;
|
|
margin: 0 8px 0 0;
|
|
padding: 0 8px 0 0;
|
|
}
|
|
|
|
.remove_item {
|
|
color: darkRed;
|
|
right: 82px;
|
|
position: absolute;
|
|
top: 9px;
|
|
&:hover {
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
margin: 0;
|
|
padding: 10px 0 0 20px;
|
|
width: 60%;
|
|
}
|
|
|
|
#panel_main, #subpanel_main {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
width: auto;
|
|
margin: 0 5px 0 20px;
|
|
min-height: 250px;
|
|
}
|
|
#subpanel_main {
|
|
min-height: 180px;
|
|
}
|
|
.grid_8 {
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
.helptip-close {
|
|
position: relative;
|
|
float: left;
|
|
|
|
.helptip-open-button {
|
|
position: relative;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
.subpanel {
|
|
z-index: 0;
|
|
border-top: 1px solid #D1D1D2;
|
|
position: absolute;
|
|
top: 40px;
|
|
h2 {
|
|
font-size: 100%;
|
|
margin: 0;
|
|
padding: 10px 0 0 20px;
|
|
}
|
|
&.closed {
|
|
display: none;
|
|
}
|
|
&.open {
|
|
display: block;
|
|
}
|
|
}
|
|
#subpanel-frame {
|
|
position:absolute;
|
|
max-width:700px;
|
|
z-index: 0;
|
|
}
|
|
|
|
.list {
|
|
min-height:450px;
|
|
border: 1px solid #B5B5B5;
|
|
background-color: $white_color;
|
|
font-size: 105%;
|
|
clear: both;
|
|
.ajax_scroll {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
}
|
|
li {
|
|
cursor: pointer;
|
|
cursor: hand;
|
|
padding: 4px;
|
|
height: 2.7em;
|
|
&:hover {
|
|
color: $white_color;
|
|
|
|
.st_button {
|
|
color: $white_color;
|
|
}
|
|
}
|
|
//span { vertical-align: middle; }
|
|
}
|
|
.item {
|
|
position: relative;
|
|
top: 4px;
|
|
padding-left: 4px;
|
|
@include border-radius(4px);
|
|
font-size: 100%;
|
|
}
|
|
.button {
|
|
text-align: center;
|
|
width: 3.7em;
|
|
}
|
|
.st_button {
|
|
margin: 2px 20px 4px 4px;
|
|
background: transparent;
|
|
font-weight: bolder;
|
|
text-align: center;
|
|
padding: 0 12px;
|
|
z-index: 400;
|
|
}
|
|
}
|
|
#list-title, .list-title {
|
|
display: block;
|
|
height:74px;
|
|
width: 449px;
|
|
background-color: $white_color;
|
|
|
|
header { height: 40px;}
|
|
|
|
#items_count {
|
|
color: $text_color;
|
|
}
|
|
}
|
|
|
|
/* begin helptip */
|
|
.helptip, .helptip-open {
|
|
background-color: $helptip-background_color;
|
|
display: block;
|
|
padding: 12px;
|
|
border: 1px solid $helptip-border_color;
|
|
margin: 10px auto 5px auto;
|
|
@extend .clearfix;
|
|
|
|
.helptip-close-button {
|
|
position: relative;
|
|
float: right;
|
|
height: 16px;
|
|
width: 16px;
|
|
margin: 0px;
|
|
background: $search_icon_white;
|
|
background-position: -32px 0;
|
|
|
|
&:hover { background-position: -32px -16px; }
|
|
}
|
|
}
|
|
.helptip-close {
|
|
display: block;
|
|
margin: 4px 4px 4px 8px;
|
|
height: 18px;
|
|
|
|
.helptip-open-button {
|
|
background: $search_icon_white;
|
|
background-position: -336px 0;
|
|
height: 16px;
|
|
width: 16px;
|
|
position: absolute;
|
|
|
|
&:hover { background-position: -336px -16px; }
|
|
@extend .clearfix
|
|
}
|
|
}
|
|
/* end helptip */
|
|
|
|
.permission {
|
|
display: inline-block;
|
|
margin-bottom:10px;
|
|
margin-top:10px;
|
|
}
|
|
|
|
.ui-resizable-e { background: $grabber_icon; }
|
|
|
|
.sp {
|
|
width: 90px;
|
|
padding-top: 8px;
|
|
}
|
|
|
|
/*Environment selector stuff*/
|
|
#path-widget {
|
|
|
|
#path-controller {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
|
|
border-color: $path-border_color;
|
|
height: 34px;
|
|
|
|
padding: 6px;
|
|
|
|
.path_selector {
|
|
display: inline;
|
|
float: right;
|
|
vertical-align:middle;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
.path_selected {
|
|
display: inline;
|
|
padding-bottom: 6px;
|
|
margin-bottom: 6px;
|
|
/*position: absolute;*/
|
|
}
|
|
.path_entry_selected {
|
|
background-color: $lightgrey_color;
|
|
}
|
|
.path_entry {
|
|
padding-left: 6px;
|
|
padding-right: 6px;
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
|
|
&:hover {
|
|
background-color: $lightgrey_color;
|
|
color: $white_color;
|
|
}
|
|
}
|
|
.path_entries {
|
|
@include box-shadow(4px,4px,2px,rgba(0, 0, 0, 0));
|
|
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-color: $path-border_color;
|
|
|
|
display: none;
|
|
|
|
z-index: 200;
|
|
position: absolute;
|
|
background-color: $white_color;
|
|
margin-left: 0;
|
|
max-height: 228px;
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
|
|
.one-line-ellipsis {
|
|
h5 {
|
|
display: inline;
|
|
word-wrap: normal;
|
|
}
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.sprite {
|
|
height: 16px;
|
|
width: 16px;
|
|
text-indent: -4000em;
|
|
}
|
|
|
|
.productsbox {
|
|
@include border-radius(3px);
|
|
background-color: $white_color;
|
|
border: 1px solid $border_color;
|
|
margin: 0;
|
|
height: 100px;
|
|
padding: 3px 0 0 3px;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* box for "errors" on the custom 500 error page */
|
|
.error {
|
|
@include border-radius(3px);
|
|
background-color: $lightergrey_color;
|
|
border:1px solid $border_color;
|
|
padding: 0 10px 10px 10px;
|
|
}
|
|
|
|
/* classes to highlight or make "standout" inputs that require action from the user */
|
|
.highlight_input { border: 3px solid $kselected_color; }
|
|
.highlight_input_text { color: $kselected_color; font-weight: 600; font-size: 110%; padding-left: 10px;}
|
|
|
|
|
|
.ui-widget-header {
|
|
font-family: $headlinefont;
|
|
border: 0 none;
|
|
}
|
|
.ui-widget-content {
|
|
table {
|
|
border: 1px solid $stroke_color !important;
|
|
}
|
|
}
|
|
|
|
.bordered-table {
|
|
border: 1px solid $tree-border_color;
|
|
background-color: $white_color;
|
|
font-size: 120%;
|
|
|
|
.parent {
|
|
padding-left: 1%;
|
|
}
|
|
.child {
|
|
padding-left: 5%;
|
|
}
|
|
}
|
|
|
|
.status_icons {
|
|
margin-right: 5px;
|
|
.check_icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
@include action-icon($check_icon_black);
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.error_icon {
|
|
width: 16px;
|
|
@include action-icon($warning_icon_black);
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
|
|
.validation_error_input {
|
|
border-color: $validation_error_color;
|
|
}
|
|
.validation_error_text {
|
|
color: $validation_error_color;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.deletable, .deletable a {
|
|
color: darkRed;
|
|
&:hover {
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
.ui-button-text-only .ui-button-text {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
/* override the header.scss from alchemy */
|
|
#appnav {
|
|
left: 352px !important;
|
|
}
|
|
#nav-container {
|
|
background-color: $kprimary_border_color;
|
|
left: 26% !important;
|
|
.navlink {
|
|
color: white;
|
|
font-weight: bold;
|
|
line-height: 26px;
|
|
margin: 0 8px;
|
|
}
|
|
}
|
|
header#header {
|
|
border-bottom: none;
|
|
margin-bottom: 6px;
|
|
|
|
&:after {
|
|
border-top: 6px solid $kprimary_border_color;
|
|
height: 0;
|
|
bottom: -1px;
|
|
}
|
|
}
|
|
|
|
footer a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
|
|
.container_16 {
|
|
width: $static_width - 20;
|
|
.grid_16 {
|
|
width: $static_width - 20;
|
|
}
|
|
}
|
|
|
|
.flash_hud {
|
|
margin: 5px 0;
|
|
|
|
ul li a {
|
|
color: $kselected_color;
|
|
}
|
|
}
|
|
.flash_messages {
|
|
background-color: $helptip-background_color;
|
|
display: block;
|
|
padding: 12px;
|
|
border: 1px solid $helptip-border_color;
|
|
margin: 10px auto 5px auto;
|
|
@extend .clearfix;
|
|
}
|
|
|
|
#content section.maincontent {
|
|
box-shadow: none !important;
|
|
background: white;
|
|
margin: 40px auto;
|
|
box-sizing: border-box;
|
|
padding-bottom: 20px;
|
|
width: 1172px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.center {
|
|
width: $static_width;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.simple-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.simple-box-header {
|
|
background-color: $border_color;
|
|
padding: 10px;
|
|
}
|
|
|
|
.simple-box-body {
|
|
border: 1px solid $border_color;
|
|
padding: 10px;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
#content {
|
|
padding-bottom: 51px;
|
|
}
|
|
|
|
.primary_color {
|
|
background-color: lighten($kprimary_color, 5%);
|
|
}
|
|
|
|
.row_fade_in {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
@include transition(background-color 1.25s ease-in-out);
|
|
}
|
|
|
|
.table-action {
|
|
padding: 5px 20px;
|
|
}
|
|
|
|
.btn.processing {
|
|
background: url("katell/icons/spinner.gif") no-repeat 50% 50%, linear-gradient(#ffffff, #e5e5e4);
|
|
}
|
|
|
|
#legacy_indicator {
|
|
position: absolute;
|
|
color: rgb(255, 196, 90);
|
|
top: 6px;
|
|
left: 132px;
|
|
font-family: Overpass;
|
|
}
|
|
|
|
tr.no_sort.not_filtered {
|
|
.button {
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
// stoled from github
|
|
code {
|
|
margin: 0 2px;
|
|
padding: 0 5px;
|
|
white-space: nowrap;
|
|
border: 1px solid #eaeaea;
|
|
background-color: #f8f8f8;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
font-family: Consolas, "Liberation Mono", Courier, monospace;
|
|
}
|
|
|
|
pre code {
|
|
margin: 0;
|
|
padding: 0;
|
|
white-space: pre;
|
|
border: none;
|
|
background: transparent;
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
pre {
|
|
background-color: #f8f8f8;
|
|
border: 1px solid #cccccc;
|
|
font-size: 13px;
|
|
line-height: 19px;
|
|
overflow: auto;
|
|
padding: 6px 10px;
|
|
border-radius: 3px;
|
|
margin: 15px 5px;
|
|
}
|
|
|
|
.instruction-page {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.info-tipsy {
|
|
opacity: 0.6;
|
|
color: orange;
|
|
font-size: 13px;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
color: orange;
|
|
}
|
|
}
|
|
|
|
#main .text-list {
|
|
padding-left: 20px;
|
|
|
|
&, li {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
