Make buttongroup available in plugins
Change-Id: I4226039a3511963881c76d059de4b652290949ec
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
index d5cb6c8..4f4c77e 100644
--- a/dev/scss/base/base.scss
+++ b/dev/scss/base/base.scss
@@ -10,6 +10,7 @@
@import "banner";
@import "showPWD";
@import "copyToClipboard";
+@import "buttongroup";
/**
* Basic global CSS rules for Kalamar
diff --git a/dev/scss/base/buttongroup.scss b/dev/scss/base/buttongroup.scss
new file mode 100644
index 0000000..85b2527
--- /dev/null
+++ b/dev/scss/base/buttongroup.scss
@@ -0,0 +1,149 @@
+@charset "utf-8";
+@import "../util";
+
+/*
+ * Define the base layout of horizontal button groups
+ */
+.button-group {
+ font-size: 0;
+ > span {
+ cursor: pointer;
+ }
+
+ &.button-panel,
+ &.operators {
+ > span,
+ input[type=submit],
+ a {
+ @include choose-item;
+ box-shadow: $choose-box-shadow;
+ font-size: 9pt;
+ font-weight: normal;
+ line-height: 1.5em;
+ padding: 0 4px;
+ display: inline-block;
+ border-style: solid;
+ border-width: $border-size 0;
+
+ &:hover {
+ @include choose-hover;
+ }
+
+ &:first-child {
+ border: {
+ left-width: $border-size;
+ top-left-radius: $standard-border-radius;
+ bottom-left-radius: $standard-border-radius;
+ }
+ }
+
+ &:last-child {
+ border: {
+ right-width: $border-size;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ }
+ }
+ }
+ }
+
+ &.button-panel {
+ > span,
+ input[type=submit],
+ a {
+ margin-top: 0;
+ width: auto;
+ min-width: auto;
+
+ > span.check {
+ @include icon-font;
+ width: 1em;
+ display: inline-block;
+ text-align: left;
+
+ &:not(.checked)::after {
+ content: $fa-check;
+ }
+
+ &.checked::after {
+ content: $fa-checked;
+ }
+
+ > span {
+ @include blind;
+ }
+ }
+ }
+ }
+
+ &.button-view {
+ position: absolute;
+ display: block;
+ right: 0;
+ top: 0;
+ z-index: 20;
+ margin: 0;
+ padding: 0;
+ width: $right-view-distance;
+ font-size: 10pt;
+ color: $nearly-white;
+
+ > span:first-child {
+ margin-top: $border-size
+ }
+
+ > span {
+ display: block !important;
+ border-width: 0;
+ text-decoration: none;
+ text-align: center;
+ font-style: normal;
+
+ &.download::after {
+ content: $fa-download;
+ }
+
+ &.close::after {
+ content: $fa-close;
+ }
+
+ &.minimize::after {
+ content: $fa-minimize;
+ }
+
+ &.plugin::after {
+ content: $fa-plugin;
+ }
+ }
+ }
+}
+
+
+ul.menu.button-group-list {
+ border-top-right-radius: 8px;
+ position: fixed;
+ font-size: 10pt;
+ left: 0;
+ text-align: left;
+ margin: -1 * $border-size;
+ margin-top: 0;
+
+ > li:first-of-type {
+ border-top-right-radius: 5px;
+ }
+}
+
+.button-icon {
+ @include icon-font;
+ line-height: 1.3;
+ > span {
+ @include blind;
+ }
+ &[data-icon]::after {
+ content: attr(data-icon);
+ }
+}
+
+.button-panel .button-icon {
+ line-height: .7;
+}