@import "./css-less-variables/common-import.less"; .standard-button { height: 30px; border-radius: 3px; font-size: 14px !important; text-decoration: none !important; line-height: 14px; font-family: inherit; font-weight: normal; padding: 4px 11px; cursor: pointer; white-space: nowrap; [lang="ar"] & { font-size: 13px !important; } } .large-button { height: 44px; border-radius: 3px; font-size: 16px !important; text-decoration: none !important; line-height: 16px; font-family: inherit; font-weight: normal; padding: 5px 22px; cursor: pointer; white-space: nowrap; [lang="ar"] & { font-size: 15px !important; } } .small-button { height: 22px; border-radius: 3px; font-size: 14px !important; text-decoration: none !important; line-height: 10px; font-family: inherit; font-weight: normal; padding: 3px 11px; cursor: pointer; white-space: nowrap; [lang="ar"] & { font-size: 13px !important; } } .primary-button { background-color: @wos-brand; color: @color-white; border: 0px solid @wos-brand; transition: box-shadow .25s; &:disabled { color: @wos-brand-light; pointer-events: none; &:hover,&:active,&:focus { } } &:hover { background-color: @wos-brand-dark; outline: none; } &:active { background-color: @wos-brand-darker; outline: none; } &:focus { background-color: @wos-brand; outline: none; box-shadow: 0 0 0 2px @wos-brand, inset 0 0 0 1px #fff; } } .secondary-button { background-color: @wos-gray-e; color: @wos-gray-2; border: 1px solid @wos-gray-e; transition: box-shadow .25s; &:disabled { color: @wos-gray-b; border: 1px solid @wos-gray-e; pointer-events: none; &:hover,&:active,&:focus { } } &:hover { background-color: @wos-gray-b; border: 1px solid @wos-gray-b; outline: none; } &:active { background-color: @wos-brand-lightest; color: @wos-brand-darker; outline: none; } &:focus { outline: none; box-shadow: 0 0 0 2px @wos-brand, inset 0 0 0 1px #fff; } } .ghost-button { background-color: @color-white; color: @wos-gray-2; border: 1px solid @wos-gray-b; transition: box-shadow .25s; &:disabled { color: @wos-gray-b; border: 1px solid @wos-gray-b; pointer-events: none; &:hover,&:active,&:focus { } } &:hover { background-color: @wos-gray-e; outline: none; } &:active { background-color: @wos-brand-lightest; color: @wos-brand-darker; outline: none; } &:focus { outline: none; box-shadow: 0 0 0 2px @wos-brand; } } .kopernio-button { background-color: #4AA47B; color: #FFF; border: 0px solid #4b749b; transition: box-shadow 0.25s; &:disabled { color: #669fd5; pointer-events: none; } &:hover { background-color: #347859; outline: none; } &:active { background-color: #88CBAD; outline: none; } &:focus { background-color: #347859; outline: none; box-shadow: 0 0 0 2px #4b749b, inset 0 0 0 1px #fff; } } .borderless-button { border: 0 solid transparent !important; outline: none; background: transparent !important; cursor: pointer; font-family: inherit; font-weight: normal; &:focus { box-shadow: 0 0 4px 2px #23799E; -webkit-box-shadow: 0 0 4px 2px #23799E; -moz-box-shadow: 0 0 4px 2px #23799E; outline: 0 solid #f8f8f8 !important; } &:disabled { cursor: default; i { color: #D5D2D2; cursor: default; } } } .flat-button { font-weight: regular !important; font-color: @wos-brand !important; font-size: 14px !important; font-family: inherit; } .inactive-button { font-size: 14px !important; font-family: inherit; font-weight: normal; color: @wos-gray-b; padding-top: 4px; padding-bottom: 4px; padding-left: 16px; padding-right: 16px; background-color:@wos-gray-e; border-radius: 3px; border: none; } .onload-tertiary-button { font-size: 16px; font-family: inherit; font-weight: normal; color: @wos-gray-2; padding-top: 5px; padding-bottom: 5px; padding-left: 16px; padding-right: 16px; background-color: @color-white; border: 1px solid; border-color: @wos-gray-2; border-radius: 3px; cursor: pointer; } .onload-primary-button { font-size: 14px !important; font-family: inherit; font-weight: normal; color: @color-white; padding-top: 4px !important; padding-bottom: 4px !important; padding-left: 16px !important; padding-right: 16px !important; background-color: @wos-brand; border-radius: 3px; border: 0px; cursor: pointer; } .onload-secondary-button { &:focus { position: relative; color: #FFF !important; background-color: @wos-brand !important; z-index: 57; text-decoration: none; } &:hover { position: relative; color: #FFF !important; background-color: @wos-brand !important; z-index: 57; text-decoration: none; } font-size: 14px !important; font-family: inherit; font-weight: normal; color: @wos-brand !important; padding: 4px 16px !important; background-color: @color-white !important; border: 1px solid !important; border-color: @wos-brand !important; border-radius: 3px; cursor: pointer; &:lang(ar) { padding: 0 16px !important; margin-top: -1px; } } .l-columns-item-ml.ml-overflow { .onload-secondary-button { &:lang(ar) { margin-top: 0 !important; } } } //.selectedExportOption { // //Temporary style until Export is translated NF 04/18/2019 // .onload-secondary-button { // &:lang(ar) { // padding: 4px 16px !important; // } // } //} .exportIconButton, .exportIconButton.nav-link { display: flex; align-items: center; &:focus, &:hover { border: 1px solid @wos-brand !important; } &:focus { box-shadow: 0 0 4px 2px #23799E; -webkit-box-shadow: 0 0 4px 2px #23799E; -moz-box-shadow: 0 0 4px 2px #23799E; } &::before { content: "\0041"; font-family: "wos custom icons"; top: 1px; position: relative; font-size: 17px; padding-right: 10px; line-height: 17px; } [dir = "rtl"] &::before { padding-left: 10px; } } .onload-secondary-button.more{ &:focus { position: relative; margin: 0 0 0 0; color: #FFF !important; background-color: #849EB7 !important; z-index: 57; text-decoration: none; } &:hover { position: relative; margin: 0 0px 0 0; color: #FFF !important; background-color: #849EB7 !important; z-index: 57; text-decoration: none; } &:extend(.onload-secondary-button); border: 0px !important; background-color: transparent !important; padding-left: 6px !important; [lang="ar"] & { margin-top: 5px !important; } } .ghost-secondary-button { &:hover { position: relative; color: #FFF !important; background-color: @wos-brand !important; z-index: 57; text-decoration: none; } font-size: 16px; font-family: inherit; font-weight: normal; color: @wos-brand; padding-top: 4px !important ; padding-bottom: 5px !important; padding-left: 16px !important; padding-right: 16px !important; background-color: @color-white; border: 1px solid; border-color: @wos-brand; corner-radius: 3px !important; cursor: pointer; } .ghost-secondary-button-disabled { font-size: 16px; font-family: "Source Sans Pro"; font-weight: normal; color: @wos-brand; padding-top: 7px !important ; padding-bottom: 7px !important; padding-left: 16px !important; padding-right: 16px !important; background-color: @color-white; border: 1px solid; border-color: @wos-brand; corner-radius: 3px !important; cursor: pointer; opacity:0.5; } .wos-toggle-button-wrapper { clear: both; display: inline-block; text-align: center; position: relative; } .wos-toggle-button { position: absolute; left: -9999em; top: -9999em; & + label { position: relative; float: left; padding: 8px 16px; cursor: pointer; border: 1px solid @border-color; margin-right: -1px; color: @wos-gray-6; background-color: #fff; line-height: 18px; &:first-of-type { border-radius: 3px 0 0 3px; } &:last-of-type { border-radius: 0 3px 3px 0; } } &:checked + label { background-color: @wos-brand; color: #fff; } } .ghost-primary-button { &:hover { position: relative; color:@wos-brand !important; background-color:#FFF !important; z-index: 57; text-decoration: none; } font-size: 16px; font-family: "Source Sans Pro"; font-weight: normal; color: #FFF ; padding-top: 7px !important ; padding-bottom: 7px !important; padding-left: 64px !important; padding-right: 64px !important; background-color:@wos-brand; border: 1px solid; border-color: @wos-brand; corner-radius: 3px !important; cursor: pointer; } .spanned-button { width: 100%; height: 50px; &:disabled { cursor: default; opacity: 0.7; } }