org.opencms.gwt.client.ui.css.tabbedPanel.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of opencms-gwt Show documentation
OpenCms is an enterprise-ready, easy to use website content management system based on Java and XML technology. Offering a complete set of features, OpenCms helps content managers worldwide to create and maintain beautiful websites fast and efficiently.
There is a newer version: 18.0
Show newest version
@external gwt-TabLayoutPanel, gwt-TabLayoutPanelTab, gwt-TabLayoutPanelTabBar, gwt-TabLayoutPanelTabs, gwt-TabLayoutPanelContent, gwt-TabLayoutPanelTab-selected, gwt-TabLayoutPanelTabInner; 

.gwt-TabLayoutPanel .internal-tabbed {
}
.classicTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabBar .gwt-TabLayoutPanelTabs{
	border-bottom: 1px solid value("constants.css.borderColor");
	width: auto !important;
	position: static !important;
	height: 27px;
}

.wrapTabs.classicTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabBar .gwt-TabLayoutPanelTabs{
	height: auto !important; 
}


.gwt-TabLayoutPanel .tabPanel {
}
.gwt-TabLayoutPanel .tabLeftMargin {
	margin-left:30px !important;
}

.buttonTabs.gwt-TabLayoutPanel {	
	display:block;
	height: 100%;
	margin:0;
	padding:0;
}

.buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabBar {
	height: auto;
	display: block;
}

.wrapTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabBar { 
	height: auto !important; 
}

.buttonTabs .gwt-TabLayoutPanelTabs {
	height: 30px !important; 
}

.buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
    background-color: value("constants.css.backgroundColorMenu");
    overflow: visible;
	display:block;
	color:value("constants.css.textColor");
	padding:value("constants.css.defaultSpace");
	margin-top: 6px;
}

.buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {  	
	display: inline-block;
	position: relative;
	text-align: center;
	white-space: nowrap;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	cursor: pointer;
	min-width: 80px;
	height: 30px;
	padding: 0 13px;
	font-weight: bold;
	border-style: solid;
	border-width: 1px 1px 1px 0px;
}

.buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

.buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab > div {
	color: inherit !important;
	vertical-align: middle;
	display: inline-block;
}

@if user.agent safari {
	.buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab:before {
		height: 110%;
	}
} @else {
	.buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab:before {
		height: 107%;
	}
}

.buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab:after {
	content: "";
	position: absolute;
	border-radius: inherit;
	-webkit-transition: box-shadow 180ms, border 180ms;
	-moz-transition: box-shadow 180ms, border 180ms;
	transition: box-shadow 180ms, border 180ms;
	border: inherit;
	top: -1px;
	right: -1px;
	bottom: -1px;
	left: -1px;
}

.buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab div.gwt-TabLayoutPanelTabInner div {
	color: inherit !important;
	padding: 4px 5px;
	font-weight: bold;
	font-size:value("constants.css.fontSize");
	font-family: value("constants.css.fontFamily");
}

.buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab.cornerLeft{
	border-top-left-radius: value("constants.css.borderRadiusButton");
	border-bottom-left-radius: value("constants.css.borderRadiusButton");
}
.buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent{
	border-radius: value("constants.css.borderRadius");
}


.buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab.cornerRight{
	border-width: 1px 1px 1px 0px;
	border-top-right-radius: value("constants.css.borderRadiusButton");
	border-bottom-right-radius: value("constants.css.borderRadiusButton");
}

.buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab.borderAll, .buttonTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab.cornerLeft {
	border-width: 1px;
}



.buttonTabs.gwt-TabLayoutPanel .black .gwt-TabLayoutPanelTab {
	color: #e6e6e6;
	border-color: #525252;
	background: #000;
	-webkit-box-shadow: inset 0 1px 0 #525252, inset 0 -1px 0 black, 0 2px 3px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 #131313, inset 0 -1px 0 black, 0 2px 3px rgba(0, 0, 0, 0.05);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.buttonTabs.gwt-TabLayoutPanel .black .gwt-TabLayoutPanelTab:hover:after {
	background-color: rgba(150, 150, 150, 0.2);
}

.buttonTabs.gwt-TabLayoutPanel .black .gwt-TabLayoutPanelTab:focus:after {
	border: inherit;
	-webkit-box-shadow: 0 0 0 2px rgba(20, 67, 130, 0.5);
	box-shadow: 0 0 0 2px rgba(20, 67, 130, 0.5);
}

.buttonTabs.gwt-TabLayoutPanel .black .gwt-TabLayoutPanelTab:active:after {
	background-color: rgba(0, 0, 0, 0.2);
}


.buttonTabs.gwt-TabLayoutPanel .black .gwt-TabLayoutPanelTab-selected {
	color: #eff2f8;
	border-color: #2956b1;
	background-color: #356EE1;
	-webkit-box-shadow: inset 0 1px 0 #658be3, inset 0 -1px 0 #326ada, 0 2px 3px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 #658be3, inset 0 -1px 0 #326ada, 0 2px 3px rgba(0, 0, 0, 0.05);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.buttonTabs.gwt-TabLayoutPanel .black .gwt-TabLayoutPanelTab-selected:hover:after {
	background-color: rgba(120, 158, 235, 0.1);
}

.buttonTabs.gwt-TabLayoutPanel .black .gwt-TabLayoutPanelTab-selected:focus:after {
	border: inherit;
	-webkit-box-shadow: 0 0 0 2px rgba(20, 67, 130, 0.5);
	box-shadow: 0 0 0 2px rgba(20, 67, 130, 0.5);
}

.buttonTabs.gwt-TabLayoutPanel .black .gwt-TabLayoutPanelTab-selected:active:after {
	background-color: rgba(5, 48, 134, 0.2);
}

.buttonTabs.gwt-TabLayoutPanel .tabLeftMargin.gwt-TabLayoutPanelTab, .buttonTabs.gwt-TabLayoutPanel .tabLeftMargin.gwt-TabLayoutPanelTab-selected {
	color: #f6eaec;
	border-color: #8d1529;
	background-color: #b31b34;
	-webkit-box-shadow: inset 0 1px 0 #c7324a, inset 0 -1px 0 #aa1b34, 0 2px 3px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 #c7324a, inset 0 -1px 0 #aa1b34, 0 2px 3px rgba(0, 0, 0, 0.05);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}

.buttonTabs.gwt-TabLayoutPanel .tabLeftMargin.gwt-TabLayoutPanelTab:hover:after, .buttonTabs.gwt-TabLayoutPanel .tabLeftMargin.gwt-TabLayoutPanelTab-selected:hover:after {
	background-color: rgba(225, 57, 85, 0.1);
}

.buttonTabs.gwt-TabLayoutPanel .tabLeftMargin.gwt-TabLayoutPanelTab:focus:after, .buttonTabs.gwt-TabLayoutPanel .tabLeftMargin.gwt-TabLayoutPanelTab-selected:focus:after {
	border: inherit;
	-webkit-box-shadow: 0 0 0 2px rgba(20, 67, 130, 0.5);
	box-shadow: 0 0 0 2px rgba(20, 67, 130, 0.5);
}

.buttonTabs.gwt-TabLayoutPanel .tabLeftMargin.gwt-TabLayoutPanelTab:active:after, .buttonTabs.gwt-TabLayoutPanel .tabLeftMargin.gwt-TabLayoutPanelTab-selected:active:after {
	background-color: rgba(99, 4, 19, 0.2);
}





.buttonTabs.gwt-TabLayoutPanel .black .tabDisabled.gwt-TabLayoutPanelTab {
	background: value("constants.css.backgroundColorStateDisabled") !important;
	border-color: #c5c5c7;
	-webkit-box-shadow: inset 0 1px 0 value("constants.css.backgroundColorStateDisabled"), inset 0 -1px 0 value("constants.css.backgroundColorStateDisabled"), 0 2px 3px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 value("constants.css.backgroundColorStateDisabled"), inset 0 -1px 0 value("constants.css.backgroundColorStateDisabled"), 0 2px 3px rgba(0, 0, 0, 0.05);
}
.buttonTabs.gwt-TabLayoutPanel .black .tabDisabled.gwt-TabLayoutPanelTab div.gwt-TabLayoutPanelTabInner div {
	color: value("constants.css.textColorDisabledButton") !important;
}

.buttonTabs.gwt-TabLayoutPanel .black .tabDisabled.gwt-TabLayoutPanelTab:hover:after {
	background-color: transparent;
}

.buttonTabs.gwt-TabLayoutPanel .black .tabDisabled.gwt-TabLayoutPanelTab:focus:after {
	border: inherit;
	-webkit-box-shadow: inset 0 1px 0 value("constants.css.backgroundColorStateDisabled"), inset 0 -1px 0 value("constants.css.backgroundColorStateDisabled"), 0 2px 3px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 value("constants.css.backgroundColorStateDisabled"), inset 0 -1px 0 value("constants.css.backgroundColorStateDisabled"), 0 2px 3px rgba(0, 0, 0, 0.05);
}



.classicTabs.gwt-TabLayoutPanel {
	display:block;
    background:value("constants.css.backgroundColorMenu") none repeat scroll 0 0;   
    border:1px solid value("constants.css.borderColor");
	height: 100%;
	margin:0;
	padding:0;
}

.classicTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabBar {
	background-position: 50% 50%;
	display: block;
	background: value("constants.css.backgroundColorSoft");
}

.classicTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
    background-color: value("constants.css.backgroundColorMenu");
    overflow: visible;
	display:block;
	color:value("constants.css.textColor");
	padding: 0;
	margin-top: 0;
}

.classicTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {  	
	background-image: value("constants.css.gradientListItem");;
	height: auto;
	padding:0;		
	border:1px solid value("constants.css.borderColor");	
	border-bottom: none;
	color:value("constants.css.textColor");
	position:relative;
	cursor:pointer;
	border-top-left-radius: value("constants.css.borderRadius");
	border-top-right-radius: value("constants.css.borderRadius");
	vertical-align: top;
	margin:0 0 0 2px;
}
.classicTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab:before{
	content: "";
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	backgound: transparent;
	opacity: 0.4;
	z-index: 0;
	border-top-left-radius: value("constants.css.borderRadius");
	border-top-right-radius: value("constants.css.borderRadius");
}
.classicTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab:hover:before {  	
	background-color: value("constants.css.backgroundColorStateHover");
}
.classicTabs.gwt-TabLayoutPanel .tabDisabled.gwt-TabLayoutPanelTab:before {
	background-color: value("constants.css.backgroundColorStateDisabled");
}

.classicTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab > div {
	position: relative;
}
.classicTabs.gwt-TabLayoutPanel .tabDisabled.gwt-TabLayoutPanelTab div.gwt-TabLayoutPanelTabInner div {
	color:value("constants.css.textColorDisabledButton") !important;
}
.classicTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected, .classicTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected:hover {    
    background: value("constants.css.backgroundColorMenu") none repeat scroll 0 0;
	cursor: default;
	font-size:value("constants.css.fontSize");
	font-family: value("constants.css.fontFamily");
	margin-bottom: -1px;
	padding-bottom: 1px;
}

.classicTabs.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab .gwt-TabLayoutPanelTabInner {
	padding: 3px 5px 4px;
	font-size:value("constants.css.fontSize");
	font-family: value("constants.css.fontFamily");
}

/* disables text selection */
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none;
}