org.opencms.gwt.client.ui.css.button.gss 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.
The 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, bsFontIconButton;

.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;
}

.cmsPushButton {}

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 !important;
    font-size: 20px !important;
    height: 20px !important;
    padding: 0px !important;
}


div.cmsTransparentButton {
    vertical-align:top;
}


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

div.cmsButtonBig.cmsFontIconButton.cmsWarning, div.cmsButtonBig.cmsFontIconButton.cmsWarning.cmsState-up-hovering {
    color: value("constants.css.colorWarning") !important;
}

div.cmsButtonBig.cmsFontIconButton.cmsError, div.cmsButtonBig.cmsFontIconButton.cmsError.cmsState-up-hovering {
    color: value("constants.css.colorError") !important;
}

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

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

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

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;
}

div.cmsTextButton:before {
        height: 109%;
}

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%);
}

.cmsFontIconButton.hoverBlack:hover, .bsFontIconButton.hoverBlack:hover {
    color: value("constants.css.textColor") !important
}

div.cmsFontIconButton.helpIcon {
    font-size: 16px !important;
    margin-top: 0;
    width: auto !important;
    height: auto !important;
    position: static;
}