Hi matar ,thanks for reply,
optebiz
.
css
[font=arial]
[size=4]
/* Import the reindeer theme. /
/ This only allows us to use the mixins defined in it and does not add any styles by itself. */
@import “…/reindeer/reindeer.scss”;
/* This contains all of your theme. /
/ If somebody wants to extend the theme she will include this mixin. */
@mixin optebiz {
/* Include all the styles from the reindeer theme */
@include reindeer;
/* Required field caption for Custom components. /
.v-caption-mystyle:after {
content: '';
color: red;
}
/* Lay the options horizontally */
.v-select-optiongroup-horizontal .v-select-option {
display: inline-block;
}
.v-select-optiongroup-horizontal {
white-space: nowrap;
}
.v-select-optiongroup-horizontal
.v-select-option.v-radiobutton {
padding-right: 10px;
}
.v-select-optiongroup-horizontal
.v-select-option.v-checkbox {
padding-right: 10px;
}
/* Show hand cursor on Button mouse over */
.v-button {
cursor: pointer;
}
.v-button-new,
.v-button-new:focus,
.v-button-new:active,
.v-button-new.v-pressed,
.v-disabled.v-button.v-button-new {
border: 1px solid #B8B8B8;
border-bottom: none;
background: rgb(220, 222, 224);
height: auto;
padding: 0;
cursor: pointer;
}
.v-button-new .v-button-wrap,
.v-button-new:focus .v-button-wrap,
.v-button-new:active .v-button-wrap,
.v-button-new.v-pressed .v-button-wrap,
.v-disabled.v-button.v-button-new .v-button-wrap {
background: rgb(220, 222, 224);
height: auto;
cursor: pointer;
}
.notifications.v-window {
overflow: visible !important;
// top: 3 * $v-unit-size !important;
right: $view-padding;
left: auto !important;
max-width: 90%;
$window-outline: $v-overlay-shadow;
@if list-of-lists($window-outline) {
$window-outline: last($v-overlay-shadow);
}
$window-outline: flatten-list(valo-bevel-and-shadow($bevel: null, $shadow: $window-outline));
$outline-width: nth($window-outline, length($window-outline) - 1);
$outline-color: last($window-outline);
@include transform-origin(296px - (2 * $v-unit-size - round($v-unit-size / 3)) -7px);
&.v-window-animate-in {
@include animation(animate-in-scale-up 260ms cubic-bezier(.68,.37,.51,1.37));
}
&:before,
&:after {
content: "";
position: absolute;
top: -14px;
right: 2 * $v-unit-size - round($v-unit-size / 3);
border: 7px solid transparent;
width: 0;
height: 0;
border-bottom-color: $v-window-background-color;
}
&:before {
@if type-of($outline-width) == number and $outline-width > 0 {
top: -15px - 2 * $outline-width;
margin-right: -$outline-width;
border-width: 7px + $outline-width;
border-bottom-width: 8px;
border-bottom-color: $outline-color;
} @else {
content: none;
}
}
.v-window-header {
color: $v-selection-color;
}
.v-window-outerheader:after,
.v-scrollable:before {
display: none;
}
.notification-item {
font-size: round($v-font-size * 0.9);
}
.notification-title {
font-weight: $v-font-weight + 200;
}
.notification-time {
font-size: round($v-font-size * 0.8);
color: valo-font-color($v-window-background-color, .5);
}
}
// Need to use normal media queries because Responsive doesn’t work for overlay elements just yet
@media screen and (max-width: 480px) {
.notifications.v-window {
right: round($view-padding / 2);
}
}
/* Menubar styles */
.v-menubar {
position: relative;
float: left;
padding: 0;
border: 0px solid #EFEFEF;
margin: 0 0px 0px 0;
background: #00007B;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
.v-menubar-submenu,
.v-menubar-menuitem-caption {
cursor: pointer;
}
/* Header background. */
.v-verticallayout-header {
background: #ECECE8;
}
.v-verticallayout-mainbody {
background: -webkit-linear-gradient(left top, #F0F0F0, white, white, white, #F0F0F0);
background: -o-linear-gradient(bottom right, #F0F0F0, white, white, white, #F0F0F0);
background: -moz-linear-gradient(bottom right, #F0F0F0, white, white, white, #F0F0F0);
background: linear-gradient(to bottom right, #F0F0F0, white, white, white, #F0F0F0);
}
.v-verticallayout-separator {
border-top: 1px solid rgb(199, 199, 199);
}
/* Toolbar CSS. /
.v-horizontallayout-toolbar .v-horizontallayout .v-label {
cursor: pointer;
color: white;
height: 23px;
padding: 1px 8px;
font-weight: normal;
float: left;
border-right: 1px solid #000;
border-left: 1px solid rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.3);
background: #2A2F33; / Old browsers /
background: -moz-linear-gradient(top, #2A2F33 0%, #26292D 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2A2F33), color-stop(100%,#26292D)); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #2A2F33 0%,#26292D 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, #2A2F33 0%,#26292D 100%); / Opera 11.10+ /
background: -ms-linear-gradient(top, #2A2F33 0%,#26292D 100%); / IE10+ /
background: linear-gradient(to bottom, #2A2F33 0%,#26292D 100%); / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#2A2F33’, endColorstr=‘#26292D’,GradientType=0 ); / IE6-9 */
}
.v-horizontallayout-toolbar .v-horizontallayout .v-label-first {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-left: none;
}
.v-horizontallayout-toolbar .v-horizontallayout .v-label-last {
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-right: none;
}
.v-horizontallayout-toolbar .v-horizontallayout .v-label:hover {
font-weight: bold;
}
/* Label text related styles */
.v-label-rounded {
display: inline-block;
line-height: 1;
padding: 4px 10px;
text-decoration: none;
font-weight: bold;
color: #FFF;
background-color: #252A2E;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
cursor: pointer;
}
.v-label-submenuheader {
font-size: 20px;
padding-top: 5px;
color: maroon;
}
.v-label-logo {
font-size: 14px;
color: #00007B;
}
.v-label-username {
color: #252A2E;
}
.v-label-caption {
color: #252A2E;
font-size: 10px;
}
/* Panel styles. */
.v-panel-caption {
border-color: rgb(199, 199, 199);
background-color: rgb(40, 126, 206);
color: rgb(247, 248, 249);
text-shadow: 0 -1px 0 rgb(46, 90, 132);
padding: 4px 10px;
}
/* Formlayout styles. */
.v-formlayout {
border-top: 2px solid rgb(199, 199, 199);
background: #ECECE8;
padding: 3px 10px;
}
.v-caption-bold {
font-weight: bold;
}
/* Tree +, - signs. */
.v-tree-node {
background: url(icons/plus_10px.png) no-repeat 4px 4px;
}
.v-tree-node-expanded {
background-image: url(icons/minus_10px.png);
}
.v-tree-node-children {
background: url(icons/verticalline_10px.png) no-repeat 7px -1px;
}
.v-tree-node .v-tree-node-caption {
background: url(icons/horizontalline_10px.png) no-repeat -20px 7px;
}
/* Caption Header horizontal Layout. */
.v-horizontallayout-formheader {
background-color: rgb(40, 126, 206);
padding-right: 3px;
padding-left: 8px;
padding-top: 1px;
color: rgb(247, 248, 249);
text-shadow: 0 -1px 0 rgb(46, 90, 132);
font-weight: bold;
}
/* TabSheet related CSS changes. */
.v-tabsheet-tabs {
height: 30px;
background-image: none;
}
.v-tabsheet-tabitemcell {
background: transparent url(icons/tabsheet/tab-bg.png);
margin: 0px;
}
.v-tabsheet-tabitemcell-first {
padding-left: 0px;
background-image: none;
}
.v-tabsheet-spacertd div {
height: 30px;
border-top: 1px solid #B6BBBC;
border-bottom: 1px solid #B6BBBC;
background: transparent url(icons/tabsheet/tab-bg.png);
margin: 0;
}
.v-tabsheet-spacertd {
background: transparent;
margin: 0;
}
.v-tabsheet-scroller {
margin-top: -30px;
float: right;
}
.v-tabsheet-scrollerPrev,
.v-tabsheet-scrollerNext,
.v-tabsheet-scrollerPrev-disabled,
.v-tabsheet-scrollerNext-disabled {
border: none;
width: 12px;
padding: 0;
height: 30px;
opacity: 0.9999;
margin-top: -1px;
}
.v-tabsheet-scrollerNext,
.v-tabsheet-scrollerNext-disabled {
background: transparent url(icons/tabsheet/next.png) no-repeat;
}
.v-tabsheet-scrollerPrev,
.v-tabsheet-scrollerPrev-disabled {
background: transparent url(icons/tabsheet/prev.png) no-repeat;
}
.v-tabsheet-scrollerPrev:hover,
.v-tabsheet-scrollerNext:hover {
background-position: -24px 0px;
}
.v-tabsheet-scrollerPrev-disabled,
.v-tabsheet-scrollerNext-disabled {
background-position: -12px 0px;
}
.v-tabsheet-scrollerPrev-disabled:hover,
.v-tabsheet-scrollerNext-disabled:hover {
background-position: -12px 0px;
}
.v-tabsheet-tabitem {
// border: 1px solid #b6bbbc;
border-top: 1px solid #B6BBBC;
border-bottom: 1px solid #B6BBBC;
height: 30px;
padding: 0px;
margin-top: -2px;
color: #777F85;
font-size: 15px;
line-height: 18px;
background: #F8F9F9 url(icons/tabsheet/tab-bg.png);
}
.v-tabsheet-tabitem .v-caption {
height: 20px;
padding: 5px 15px 0px 15px;
background-image: none;
}
.v-tabsheet-tabitem-selected {
border: none;
background: transparent url(icons/tabsheet/top-left.png) no-repeat;
margin: 0;
padding: 0;
height: 34px;
color: #EE5311;
}
.v-tabsheet-tabitem:hover {
color: #4B5257;
}
.v-tabsheet-tabitem-selected:hover {
color: #EE5311;
}
.v-tabsheet-tabitem-selected .v-caption {
background: transparent url(icons/tabsheet/top-right.png) repeat-x right top;
margin: 0 0px 0 9px;
height: 18px;
padding: 8px;
overflow: visible;
}
.v-tabsheet-caption-close {
margin-left: 3px;
margin-right: -3px;
margin-top: 2px;
font-size: 15px;
width: 15px;
height: 15px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
color: #777F85;
line-height: 13px;
}
.v-tabsheet-caption-close:hover {
background: #DCE0E0;
}
.v-tabsheet-caption-close:active {
background: #B6BBBC;
color: #FFF;
}
.v-tabsheet-content {
border: 1px solid #BABFC0;
background-color: #FFF;
border-bottom: 1px solid #DEE2E3;
border-top: none;
}
.v-tabsheet-hidetabs .v-tabsheet-content {
border-top: 1px solid #B5BABB;
}
.v-tabsheet-deco {
height: 10px;
background: transparent url(icons/tabsheet/bottom-right.png) repeat-x right top;
overflow: visible;
}
.v-tabsheet-deco:before {
display: block;
content: “”;
width: 9px;
height: 9px;
background: transparent url(icons/tabsheet/bottom-left.png) no-repeat;
}
.v-ie .v-tabsheet-content {
border-bottom: none;
}
.v-ie .v-tabsheet-deco {
height: 1px;
background: #BABFC0;
overflow: hidden;
margin: 0;
}
.v-ie8 .v-tabsheet-deco,
.v-ie9 .v-tabsheet-deco {
width: 100%;
}
/* Text field style. */
.v-textfield-style4 {
padding: 5px;
font-size: 15px;
font-weight: bold;
text-shadow: 0px 1px 0px white;
outline: none;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid white;
box-shadow: 0 -3px 4px 0px #858585,inset 0 10px 10px 1px #CFCFCF;
border-bottom: solid 1px #AAA;
border-left: solid 1px #AAA;
border-right: solid 1px #AAA;
}
@media print {
#__gwt_historyFrame {
display:none;
}
.v-ie6,
.v-ie6 DIV,
.v-ie7,
.v-ie7 DIV,
.v-ie8,
.v-ie8 DIV,
.v-ff32,
.v-ff32 DIV,
.v-ff3,
.v-ff3 DIV {
overflow: visible !important;
background-color: white !important;
}
.v-label {
color: black !important;
}
}
/* Table header style. */
.v-table-header-cell{
text-align: left;
}
.v-table-caption-container-align-right {
float: left;
text-align: left;
}
.v-table-caption-container-align-center {
float: left;
text-align: left;
}
.v-table-caption-container-align-left {
float: left;
text-align: left;
}
}
[/size]
[/font]