blob: b916d5cc3e89510ee421fa238747b5981c518e54 [file] [log] [blame]
Nils Diewalda944fab2015-04-08 21:02:04 +00001@charset "utf-8";
Nils Diewaldab4d3ca2015-04-17 01:48:43 +00002@import "../util";
Nils Diewalda944fab2015-04-08 21:02:04 +00003
Nils Diewald652e5f42015-05-10 18:11:45 +00004/**
5 * Rules for the Kalamar hint helper.
6 */
7
Nils Diewalda944fab2015-04-08 21:02:04 +00008$border-size: 2px;
9
10ul.menu.hint {
Nils Diewald2488d052015-04-09 21:46:02 +000011 display: inline-block;
12 white-space: normal;
Nils Diewalda944fab2015-04-08 21:02:04 +000013 text-align:left;
Nils Diewald2488d052015-04-09 21:46:02 +000014 top: 0;
Nils Diewalda944fab2015-04-08 21:02:04 +000015 max-width: 23em !important;
Nils Diewalda944fab2015-04-08 21:02:04 +000016
17 > li:first-of-type {
18 border-top: {
19 width: 1px;
20 left-radius: 0;
21 right-radius: 0;
22 }
23 }
Nils Diewalda944fab2015-04-08 21:02:04 +000024}
25
Akron308db382016-05-30 22:34:07 +020026div.alert.hint {
Akron00cd4d12016-05-31 21:01:11 +020027 position: absolute;
Akron308db382016-05-30 22:34:07 +020028 background-color: rgba(254,26,0,.9); // from alertify
29 color: $nearly-white;
30 padding: $item-padding;
Akron0e01c0d2016-06-03 19:09:00 +020031 margin-top: 8px;
Akron308db382016-05-30 22:34:07 +020032 box-shadow: $choose-box-shadow;
33 border: {
34 radius: $standard-border-radius;
35 top-left-radius: 0;
36 }
Akron00cd4d12016-05-31 21:01:11 +020037 width: auto;
38 min-width: 10em;
39 max-width: 23em !important;
40 transition: opacity 0.2s ease 0s;
Akron308db382016-05-30 22:34:07 +020041}
42
43div.hint.alert::before {
44 position: absolute;
45 content: "";
46 display: block;
Akron0e01c0d2016-06-03 19:09:00 +020047 top: -12px;
48 left: 0;
Akron308db382016-05-30 22:34:07 +020049 width: 0;
50 white-space: normal;
51 border: {
Akron0e01c0d2016-06-03 19:09:00 +020052 width: 0 8px 12px 0;
Akron308db382016-05-30 22:34:07 +020053 style: solid;
54 color: rgba(254,26,0,.9) transparent; // from alertify
55 }
56}
57
Akron00cd4d12016-05-31 21:01:11 +020058.hint.mirror {
Nils Diewalda944fab2015-04-08 21:02:04 +000059 position: absolute;
60 left: 0;
61 top: 0;
Nils Diewald2488d052015-04-09 21:46:02 +000062 z-index: 900;
Nils Diewalda944fab2015-04-08 21:02:04 +000063 white-space: pre-wrap;
Nils Diewalda944fab2015-04-08 21:02:04 +000064 height: 0;
Nils Diewald2488d052015-04-09 21:46:02 +000065 display: block;
Nils Diewalda944fab2015-04-08 21:02:04 +000066 > span {
Nils Diewalda944fab2015-04-08 21:02:04 +000067 opacity: 0;
68 white-space: pre-wrap;
69 overflow: hidden;
70 }
Akron00cd4d12016-05-31 21:01:11 +020071 // TODO: Only in focus
Nils Diewalda944fab2015-04-08 21:02:04 +000072 > div {
Nils Diewalda944fab2015-04-08 21:02:04 +000073 position: absolute;
Nils Diewald2488d052015-04-09 21:46:02 +000074 display: block;
75 cursor: pointer;
76 transition: left 0.2s ease 0s;
Nils Diewalda944fab2015-04-08 21:02:04 +000077 top: 0;
78 left: 0;
Nils Diewald2488d052015-04-09 21:46:02 +000079 text-align: left;
Nils Diewalda944fab2015-04-08 21:02:04 +000080 padding: 0;
81 border-top: 5px solid $dark-orange;
Nils Diewalda944fab2015-04-08 21:02:04 +000082 height: 10px;
83 width: 1.2em;
Nils Diewald2488d052015-04-09 21:46:02 +000084 &:hover:not(.active) {
Nils Diewalda944fab2015-04-08 21:02:04 +000085 border-top: 10px solid $dark-orange;
86 }
Nils Diewald2488d052015-04-09 21:46:02 +000087 &.active {
88 border-top-width: 0;
89 height: 0;
90 width: 23em;
91 }
Nils Diewalda944fab2015-04-08 21:02:04 +000092 }
93}