Refactoring of style files
Change-Id: I56d3641741f2289bb0f9dbaf641b85a401cf1042
diff --git a/dev/scss/base/menu.scss b/dev/scss/base/menu.scss
new file mode 100644
index 0000000..054dabd
--- /dev/null
+++ b/dev/scss/base/menu.scss
@@ -0,0 +1,248 @@
+@charset "utf-8";
+@import "choose";
+@import "lengths";
+@import "icons";
+
+/**
+ * Definitions for menu design.
+ */
+
+ul.menu {
+ position: absolute;
+ padding: 0;
+ margin: 0;
+ text-indent: 0;
+
+ opacity: 0;
+ &.visible {
+ opacity: 1;
+ }
+
+ list-style: {
+ type: none;
+ position: outside;
+ }
+
+ &,
+ > span.pref:not(:empty) {
+ box-sizing: border-box;
+ text-shadow: none;
+ font-weight: normal;
+ z-index: 120;
+ }
+
+ > li,
+ > span.pref:not(.active) {
+ @include choose-item;
+ }
+
+ > li,
+ > span.pref:not(:empty) {
+ @include choose-item;
+ box-shadow: $choose-box-shadow;
+ cursor: pointer;
+ padding: $item-padding;
+ white-space: normal;
+ border: {
+ width: $border-size;
+ bottom-width: 0px;
+ top-width: 0px;
+ style: solid;
+ }
+ }
+ span.desc {
+ display: block;
+ font-size: 75%;
+ }
+
+ div.lengthField {
+ border: {
+ color: transparent;
+ width: $border-size;
+ }
+ padding: $item-padding;
+ padding-top: 0;
+ padding-bottom: 0;
+ span {
+ display: block !important;
+ line-height: 0;
+ color: transparent;
+ }
+ }
+
+ /**
+ * Ruler
+ */
+ > div.ruler {
+ position: absolute;
+ right: 0px;
+ margin-right: -14px;
+ background-color: transparent;
+ width: 14px;
+ height: 100%;
+ opacity: 0;
+ cursor: pointer;
+ transition: opacity .5s ease 1s;
+
+ > span {
+ @include choose-active;
+ position: absolute;
+ display: block;
+ right: 0;
+ width: 10px;
+ z-index: 115;
+ border: {
+ radius: 4px;
+ width: 2px;
+ style: solid;
+ }
+ }
+
+ &.active > span {
+ @include choose-hover;
+ }
+
+ > div {
+ @include choose-item;
+ box-shadow: $choose-box-shadow;
+ position: absolute;
+ right: 0;
+ width: 10px;
+ height: 100%;
+ border: {
+ radius: 4px;
+ width: 2px;
+ style: solid;
+ }
+ }
+ }
+
+ &:active > div.ruler,
+ &:hover > div.ruler,
+ > div.ruler.active {
+ transition: opacity .1s ease;
+ opacity: 1;
+ }
+
+
+ /**
+ * List items
+ */
+ > li,
+ div.lengthField {
+ padding-right: 1.6em;
+ }
+
+ > li {
+ &:first-of-type {
+ border-top: {
+ width: $border-size;
+ left-radius: $standard-border-radius;
+ right-radius: $standard-border-radius;
+ }
+ }
+
+ &:last-of-type {
+ border-bottom: {
+ width: $border-size;
+ left-radius: $standard-border-radius;
+ right-radius: $standard-border-radius;
+ }
+ }
+ mark {
+ text-decoration: underline;
+ background-color: transparent;
+ color: inherit;
+ font-weight: bold;
+ }
+ }
+
+ > li.active,
+ > span.pref.active {
+ @include choose-active;
+ }
+
+ > li:hover,
+ > span.pref:hover {
+ @include choose-hover;
+ }
+
+ /**
+ * Default prefix view
+ */
+ > span.pref:not(:empty) {
+ position: absolute;
+ min-width: 5px;
+ font-size: 80%;
+ left: 0;
+ bottom: 0;
+ display: block;
+ margin-bottom: -2.1em;
+ padding: 2px 6px;
+ border: {
+ radius: $standard-border-radius;
+ width: $border-size;
+ }
+ }
+}
+
+
+/**
+ * Rolling menu
+ */
+ul.menu.roll {
+ > li:first-of-type {
+ &:not(.no-more):before {
+ position: absolute;
+ font-family: "FontAwesome";
+ content: $fa-up;
+ right: .5em;
+ top: .4em;
+ }
+ }
+ > li:last-of-type {
+ &:not(.no-more):before {
+ position: absolute;
+ font-family: "FontAwesome";
+ content: $fa-down;
+ right: .5em;
+ bottom: .4em;
+ }
+ }
+ &:not(.visible) {
+ height: 0;
+ }
+}
+
+
+/**
+ * Sorting menu
+ */
+ul.menu.sort {
+ position: relative;
+ display: inline-block;
+ > li::before {
+ content: '';
+ }
+ > li.active:hover {
+ @include choose-remove;
+ }
+}
+
+
+/**
+ * select menu
+ */
+span.menu.select {
+ > span {
+ z-index: 105;
+ }
+ > ul.menu.roll {
+ display: none;
+ z-index: -100;
+ &.visible {
+ display: block;
+ z-index: 110;
+ }
+ }
+}