summaryrefslogtreecommitdiffstats
path: root/components/tooltip/_tooltip.scss
diff options
context:
space:
mode:
Diffstat (limited to 'components/tooltip/_tooltip.scss')
-rw-r--r--components/tooltip/_tooltip.scss124
1 files changed, 124 insertions, 0 deletions
diff --git a/components/tooltip/_tooltip.scss b/components/tooltip/_tooltip.scss
new file mode 100644
index 0000000..3f255ed
--- /dev/null
+++ b/components/tooltip/_tooltip.scss
@@ -0,0 +1,124 @@
+/* Tooltip animation */
+@keyframes animation-fade-in-from-bottom {
+ from {
+ transform: translateY(10px);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0px);
+ opacity: 1;
+ }
+}
+
+/* Tooltop styles */
+.sdc-tooltip {
+ @include base-font-regular;
+ line-height: 14px;
+ font-size: 12px;
+ max-width: 223px;
+ background-color: $black;
+ color: $white;
+ text-align: left;
+ border-radius: 2px;
+ padding: 5px 11px;
+ position: absolute;
+ z-index: 1000;
+ display: block;
+ opacity: 0;
+ transition: opacity 300ms;
+ border: solid 1px $black;
+ animation: animation-fade-in-from-bottom .75s ease-in-out; /* tooltip animation */
+}
+
+.sdc-tooltip-show {
+ opacity: 1;
+}
+
+.sdc-tooltip::after {
+ content: "";
+ position: absolute;
+ border-style: solid;
+}
+
+.sdc-tooltip-top::after {
+ top: 100%;
+ left: 10px;
+ margin-left: -5px;
+ border-width: 5px;
+ border-color: $black transparent transparent transparent;
+}
+.sdc-tooltip-top-right__bottom::after {
+ right: 10px;
+ left:auto;
+}
+.sdc-tooltip-top-center__middle::after {
+ left: 50%;
+}
+
+.sdc-tooltip-bottom::after {
+ bottom: 100%;
+ left: 10px;
+ margin-left: -5px;
+ border-width: 5px;
+ border-color: transparent transparent $black transparent;
+}
+.sdc-tooltip-bottom-right__bottom::after {
+ right: 10px;
+ left:auto;
+}
+.sdc-tooltip-bottom-center__middle::after {
+ left: 50%;
+}
+
+.sdc-tooltip-left::after {
+ top: 10px; /*50%;*/
+ left: 100%;
+ margin-top: -5px;
+ border-width: 5px;
+ border-color: transparent transparent transparent $black;
+}
+.sdc-tooltip-left-right__bottom::after {
+ bottom: 10px;
+ top: auto;
+}
+.sdc-tooltip-left-center__middle::after {
+ top: 50%
+}
+
+.sdc-tooltip-right::after {
+ top: 10px;
+ right: 100%;
+ margin-top: -5px;
+ border-width: 5px;
+ border-color: transparent $black transparent transparent;
+}
+.sdc-tooltip-right-right__bottom::after {
+ bottom: 10px;
+ top: auto;
+}
+.sdc-tooltip-right-center__middle::after {
+ top: 50%
+}
+
+/* Tooltip template */
+.sdc-tooltip-template-title {
+ @include base-font-regular;
+ font-size: 12px;
+ font-weight: normal;
+ background-color: $black;
+ color: $white; /* silver */
+}
+
+.sdc-tooltip-template-big-title {
+ font-size: 20px;
+ line-height: 24px;
+}
+
+.sdc-tooltip-template-content {
+ @include base-font-regular;
+ font-size: 12px;
+ font-weight: normal;
+ background-color: $black;
+ color: $white;
+ line-height: 14px;
+}