org.opencms.gwt.client.ui.css.button.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 opencms-icon, html-face, cmsState, cmsState-up, cmsState-up-hovering, cmsState-up-disabled, cmsState-down, cmsState-down-hovering, cmsState-down-disabled, resizeButton-up-hovering;

.cmsState, .cmsState-up, .gray, .cmsHovering {}
.cmsState.cmsState-down-disabled, .cmsState.cmsState-up-disabled { cursor:auto; }

/** General styling for the html-face class and it's inner span, if an image is present. */
div.html-face {
	color:inherit;
	font-family:value("constants.css.fontFamily");
	line-height: value("constants.css.lineHeightBig");
	font-weight:inherit;
	text-align:center;
	white-space:nowrap;
}
div.cmsMinWidth div.html-face {
	min-width:5em;
}
div.html-face span {
	display:inline-block;
    vertical-align:middle;
}
div.html-face span.spacerRight {
	margin-right:4px;
}
div.html-face span.spacerLeft {
	margin-left:4px;
}

div.cmsTextButton, div.cmsTransparentButton, div.cmsMenuButton, div.cmsFontIconButton {
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none;
}

div.cmsFontIconButton.cmsState *, div.cmsFontIconButton.cmsState div.html-face, div.cmsFontIconButton.cmsState div.html-face > span {
	font-size: inherit;
	color: inherit;
} 
div.cmsTextButton div.html-face span.opencms-icon, div.cmsTextButton div.html-face span.opencms-icon:before{
	color: inherit;
}

/** Button size styles. */
div.cmsButtonMedium div.html-face {
	font-size: value("constants.css.fontSize");
	line-height: value("constants.css.lineHeight");
}
div.cmsButtonMedium div.html-face span.opencms-icon:before{
	font-size: 16px;
}
div.cmsButtonSmall div.html-face {
	font-size: value("constants.css.fontSizeSmall");
	line-height: value("constants.css.lineHeightSmall");
}
div.cmsButtonSmall div.html-face span.opencms-icon:before{
	font-size: 14px;
}
div.cmsButtonBig div.html-face {
	font-size: value("constants.css.fontSizeBig");
	line-height: value("constants.css.lineHeightBig");
}
div.cmsButtonBig div.html-face span.opencms-icon:before{
	font-size: 20px;
}

/** General styling for all buttons (don't let the background expand the button height and position it in the middle). */
div.cmsTransparentButton, div.cmsMenuButton, div.cmsFontIconButton {
	height:auto !important;
	background-position:50% 50% !important;
	background-color:transparent;
	vertical-align:middle;
	outline:none;
	cursor:pointer;
	display:inline-block;
	text-align:center;
    font-weight:bold;
    user-select: none;
}



/** Specific button styles (text-, transparent-, menu- and image-Button). */
div.cmsMenuButton{
    border: none;
    padding:2px 4px; 
}
div.cmsFontIconButton {
	border: none;	
	font-size: 20px;
	height: 20px;
	padding: 0px;
}


div.cmsTransparentButton {
    vertical-align:top;
}


div.cmsButtonBig.cmsFontIconButton {
	font-size: 32px;
	height: 40px;
	padding: 4px;
	position: relative;
	color:  value("constants.css.textColor");
}

div.cmsFontIconButton.cmsButtonBig.cmsState.cmsState-down-hovering, div.cmsFontIconButton.cmsButtonBig.cmsState.cmsState-up-hovering {
	color:  value("constants.css.textColorHighlight");
	border-color: transparent;
	background: transparent;
}
div.cmsFontIconButton{
	color: value("constants.css.textColorDisabledButton");
}
div.cmsFontIconButton.cmsState.cmsState-down-hovering, div.cmsFontIconButton.cmsState.cmsState-up-hovering {
	color:  value("constants.css.textColor");
	border-color: transparent;
	background: transparent;
}

div.cmsFontIconButton div.html-face{
	line-height: 16px;	
}

div.cmsFontIconButton.cmsButtonSmall{
	font-size: 16px;
}

div.cmsFontIconButton.cmsButtonSmall div.html-face{
	line-height: 12px;	
}

/** Set a general text color for all disabled buttons. */
div.cmsState-up-disabled div.html-face, div.cmsState-down-disabled div.html-face, div.cmsState-up-disabled div.html-face span, div.cmsState-down-disabled div.html-face span {
	color:value("constants.css.textColorDisabledButton") !important;
}
/** Text-button disabled. */
div.cmsTextButton.cmsState-up-disabled, div.cmsTextButton.cmsState-down-disabled  {
	background: value("constants.css.backgroundColorStateDisabled") !important;
	border-color: #c5c5c7 !important;
	-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) !important;
	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) !important;
}

div.cmsTextButton.cmsState-up-disabled:hover:after, div.cmsTextButton.cmsState-down-disabled:hover:after{
	background-color: transparent !important;
}

div.cmsTextButton.cmsState-up-disabled:focus:after, div.cmsTextButton.cmsState-down-disabled: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) !important;
	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) !important;
}

/** Text-button default. */
div.cmsTextButton {
	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: 100px;
	height: 30px;
	padding: 0 13px;
	font-weight: bold;
	border-radius: value("constants.css.borderRadius");
	
	color: #13131f;
	border: 1px solid #c5c5c7;
	border-top-color: #c5c5c7;
	border-bottom-color: #c5c5c7;
	background-color: #FAFAFD;
	background-image: linear-gradient(to bottom,#FAFAFD 0%, #FAFAFD 100%);
	-webkit-box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #efeff8, 0 2px 3px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #efeff8, 0 2px 3px rgba(0, 0, 0, 0.05);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

div.cmsTextButton.cmsButtonMedium {
	min-width: 100px;
	height: 30px;
	padding: 0 10px;
}

div.cmsTextButton.cmsButtonSmall {
	min-width: 80px;
	height: 28px;
	padding: 0 8px;
	
}

div.cmsTextButton:before {
	content: "";
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

div.cmsTextButton > div {
	vertical-align: baseline;
	display: inline-block;
}

@if user.agent safari {
	div.cmsTextButton:before {
		height: 110%;
	}
} @else {
	div.cmsTextButton:before {
		height: 107%;
	}
}

div.cmsTextButton: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;
}

div.cmsTextButton:hover:after {
	background-color: rgba(159, 159, 217, 0.1);
}

div.cmsTextButton:focus:after {
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
	
	border-color: #144382;
	-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);
}

div.cmsTextButton:active:after {
	background-color: rgba(41, 41, 210, 0.2);
}


div.cmsTextButton.blue {
	color: #eff2f8;
	border: 1px solid #2956b1;
	border-top-color: #2956b1;
	border-bottom-color: #2956b1;
	background-color: #356EE1;
	background-image: linear-gradient(to bottom,#356EE1 0%, #356EE1 100%);
	-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);
}

div.cmsTextButton.blue:hover:after {
	background-color: rgba(120, 158, 235, 0.1);
}

div.cmsTextButton.blue: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);
}

div.cmsTextButton.blue:active:after {
	background-color: rgba(5, 48, 134, 0.2);
}

div.cmsTextButton.red {
	color: #f6eaec;
	border: 1px solid #8d1529;
	border-top-color: #8d1529;
	border-bottom-color: #8d1529;
	background-color: #b31b34;
	background-image: linear-gradient(to bottom,#b31b34 0%, #b31b34 100%);
	-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);
}

div.cmsTextButton.red:hover:after {
	background-color: rgba(225, 57, 85, 0.1);
}

div.cmsTextButton.red: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);
}

div.cmsTextButton.red:active:after {
	background-color: rgba(99, 4, 19, 0.2);
}

div.cmsTextButton.green {
	color: #eaf4e9;
	border: 1px solid #227719;
	border-top-color: #227719;
	border-bottom-color: #227719;
	background-color: #2c9720;
	background-image: linear-gradient(to bottom,#2c9720 0%, #2c9720 100%);
	-webkit-box-shadow: inset 0 1px 0 #42ab37, inset 0 -1px 0 #2c9020, 0 2px 3px rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 1px 0 #42ab37, inset 0 -1px 0 #2c9020, 0 2px 3px rgba(0, 0, 0, 0.05);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
}

div.cmsTextButton.green:hover:after {
	background-color: rgba(65, 211, 48, 0.1);
}

div.cmsTextButton.green:focus:after {
	border-color: #144382;
	-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);
}

div.cmsTextButton.green:active:after {
	background-color: rgba(14, 86, 6, 0.2);
}

/** Button styles for resize.*/
div.resizeButton{
	border: none;
    padding: 0;
    position: absolute;
    width: 12px;
    bottom: 0;
    height: 12px;
    right: 0;
    cursor: s-resize;
    outline: none;
    
}
div.resizeButton{
	background-image: linear-gradient(135deg, rgba(119,136,170,0) 0%, rgba(119,136,170,0) 48%, rgba(119,136,170,1) 54%, rgba(119,136,170,0) 60%, rgba(119,136,170,0) 67%, rgba(119,136,170,1) 73%, rgba(119,136,170,0) 79%, rgba(119,136,170,0) 85%, rgba(119,136,170,1) 90%, rgba(119,136,170,0) 92%, rgba(119,136,170,0) 100%);
}