diff options
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-button.less')
| -rw-r--r-- | sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-button.less | 272 |
1 files changed, 272 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-button.less b/sdc-workflow-designer-ui/src/app/assets/components/themes/common/plx-button.less new file mode 100644 index 00000000..a1421c81 --- /dev/null +++ b/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 |