diff options
Diffstat (limited to 'deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-button.less')
-rw-r--r-- | deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-button.less | 272 |
1 files changed, 272 insertions, 0 deletions
diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-button.less b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-button.less new file mode 100644 index 00000000..26ed4b15 --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-button.less @@ -0,0 +1,272 @@ +@import "../default/theme.less"; + +@padding-normal: 0px 16px; +@padding-sm: 0px 14px; +@padding-xs: 0px 12px; +@min-width-normal: 80px; +@min-width-sm: 60px; +@min-width-xs: 60px; +@btn-margin-right: 10px; +@btn-margin-right-sm: 5px; +@btn-margin-right-xs: 5px; +@btn-border-height: 1px; + +.border-min-width(@min-width, 14px) { + min-width: @min-width + 8px; +} + +.border-min-width(@min-width, 12px) { + min-width: @min-width; +} + +.background-color-white-color-disabled (@color) when (@color = #fff) { + color: @disabled-text-color; + background-color: @common-color; + border-color: #e9e9e9; +} + +.background-color-white-color-disabled (@color) when not (@color = #fff) { + border-color: @color; + background-color: @color; + opacity: @opacity-disable; +} + +.plx-btn { + font-family: @font-family; + color: @common-textcolor; + .border-min-width(@min-width-normal, @font-size); + letter-spacing: 1px; + padding: @padding-normal; + height: @btn-height; + font-size: @font-size; + cursor: pointer; + text-align: center; + white-space: nowrap; + margin-right: @btn-margin-right; + vertical-align: middle; + border: @btn-border-height solid @border-color-base; + background-color: @common-color; + border-radius: @radius; + line-height: @btn-height - @btn-border-height * 2; + &:hover, + &:disabled, + &[disabled], + &:focus, + &:active { + outline: none; + background-image: none; + filter: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + text-shadow: none; + } + &:hover, + &:focus { + color: @btn-common-color-text-hover; + border-color: @btn-common-color-border-hover; + background-color: @common-color-hover; + } + &:active { + color: @btn-common-color-text-click; + border-color: @btn-common-color-border-click; + background-color: @common-color-click; + } + &:disabled, + &[disabled] { + .background-color-white-color-disabled(@common-color); + } + &:disabled:hover, + &[disabled]:hover, + &:disabled:focus, + &[disabled]:focus { + .background-color-white-color-disabled(@common-color); + cursor: not-allowed; + } + & .plx-btn-icon { + font-size: 16px; + vertical-align: text-top; + margin-right: 3px; + } +} + +.plx-btn-primary { + background-color: @primary-color; + color: @scene-textcolor; + border-color: @primary-color; + &:hover, + &:focus { + color: @scene-textcolor; + background-color: @primary-color-hover; + border-color: @primary-color-hover; + } + &:active { + color: @scene-textcolor; + background-color: @primary-color-click; + border-color: @primary-color-click; + } + &:disabled, + &[disabled], + &:disabled:hover, + &[disabled]:hover, + &:disabled:focus, + &[disabled]:focus { + color: @scene-textcolor; + .background-color-white-color-disabled(@primary-color); + } +} + +.plx-btn-guide { + background-color: @guide-color; + color: @scene-textcolor; + border-color: @guide-color; + &:hover, + &:focus { + color: @scene-textcolor; + background-color: @primary-color-guide-hover; + border-color: @primary-color-guide-hover; + } + &:active { + color: @scene-textcolor; + background-color: @primary-color-guide-click; + border-color: @primary-color-guide-click; + } + &:disabled, + &[disabled], + &:disabled:hover, + &[disabled]:hover, + &:disabled:focus, + &[disabled]:focus { + color: @scene-textcolor; + .background-color-white-color-disabled(@guide-color); + } +} + +.plx-btn-table { + color: @text-color; +} + +.plx-btn-error { + background-color: @error-color; + color: @scene-textcolor; + border-color: @error-color; + &:hover, + &:focus { + color: @scene-textcolor; + background-color: @error-color-hover; + border-color: @error-color-hover; + } + &:active { + color: @scene-textcolor; + background-color: @error-color-click; + border-color: @error-color-click; + } + &:disabled, + &[disabled], + &:disabled:hover, + &[disabled]:hover, + &:disabled:focus, + &[disabled]:focus { + color: @scene-textcolor; + .background-color-white-color-disabled(@error-color); + } +} + +.plx-btn-sm { + height: @btn-height-sm; + padding: @padding-sm; + .border-min-width(@min-width-sm, @font-size); + margin-right: @btn-margin-right-sm; + line-height: @btn-height-sm - @btn-border-height * 2; +} + +.plx-btn-xs{ + height: @btn-height-xs; + padding: @padding-xs; + .border-min-width(@min-width-xs, @font-size); + margin-right: @btn-margin-right-xs; + line-height: @btn-height-xs - @btn-border-height * 2; +} + +.plx-btn.dropdown-toggle { + margin-right: 0; + outline: none !important; + background-image: none !important; + filter: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + text-shadow: none; +} + +.plx-btn.dropdown-toggle::after { + margin-left: 16px; + border-top: 4px solid; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + color: darken(@border-color-base, 10%); + margin-bottom: 1px; +} + +.plx-btn-sm.dropdown-toggle::after { + margin-left: 14px; +} + +.plx-btn-xs.dropdown-toggle::after { + margin-left: 12px; +} + +.plx-btn+.dropdown-menu { + margin: 0; + padding: 0; + border: 0; + min-width: 100%; + font-size: @font-size; + border-radius: @radius; + .shadow; + & .dropdown-item { + background-color: @component-bg; + color: @text-color; + font-size: @font-size; + padding: @padding-normal; + height: 30px; + cursor: pointer; + &:hover, + &:focus, + &:active{ + outline: none; + background-color: @hover-bg-color; + } + &:disabled, + &[disabled] { + color: @disabled-text-color; + } + &:disabled:hover, + &[disabled]:hover, + &:disabled:focus, + &[disabled]:focus { + cursor: not-allowed; + background-color: @component-bg; + } + } +} + +.plx-btn-sm+.dropdown-menu .dropdown-item { + padding: @padding-sm; +} +.plx-btn-xs+.dropdown-menu .dropdown-item { + padding: @padding-xs; +} + +.plx-btn-more { + display: inline-block; + margin-right: @btn-margin-right; +} + +.plx-btn-more-sm { + margin-right: @btn-margin-right-sm; +} + +.plx-btn-more-xs { + margin-right: @btn-margin-right-xs; +}
\ No newline at end of file |