Merge pull request #105 from dancespiele/development

Release v0.10.0
dancespiele · Aug 2, 2021 · cb506eb · cb506eb
2 parents b105ddd + 007f0af
commit cb506eb
Show file tree

Hide file tree

Showing 28 changed files with 1,730 additions and 178 deletions.
diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ Possible candidates are [CssinRust](https://github.com/lukidoescode/css-in-rust)
 1. Install the sass module: `npm install yew-styles`
 2. Add the yew_style crate with the features needed for your project in Cargo.toml file:
 ```toml
-yew_styles = { version="0.9", features=["button", "text", "navbar"] }
+yew_styles = { version="0.10", features=["button", "text", "navbar"] }
 ```
 3. Import the main.css file in you main javascript/typescript file project:
 ```typescript
@@ -117,7 +117,7 @@ Please check our [code of conduct](CODE_OF_CONDUCT.md)
 - [x] Modal
 - [ ] Sidebar
 - [ ] Tab
-- [ ] Tooltips
+- [x] Tooltips
 - [ ] Collapse
 - [x] Carousel
 - [ ] Calendar

diff --git a/app/page-styles/_tooltip.sass b/app/page-styles/_tooltip.sass
@@ -0,0 +1,16 @@
+.tooltip-page
+  &.above, &.below
+    left: 30%
+
+    &.small
+      left: 33%
+
+    &.big
+      left: 22%
+
+  &.left, &.right
+    &.big
+      top: -6px
+
+.tooltip-content
+  padding: 2px
diff --git a/app/page-styles/main.sass b/app/page-styles/main.sass
@@ -6,4 +6,5 @@
 @import '_navbar.sass'
 @import '_dropdown.sass'
 @import '_spinner.sass'
-@import '_carousel.sass'
+@import '_carousel.sass'
+@import '_tooltip.sass'
diff --git a/app/yew-styles/_mixins.sass b/app/yew-styles/_mixins.sass
@@ -1,3 +1,5 @@
+@use "sass:math"
+
 @mixin pallete-style($style, $interaction)
     @each $name, $background, $color, $border-color in $style
         &.#{$name}
@@ -17,7 +19,7 @@
     @each $name, $background, $color, $border-color in $style
         &.#{$name}
             background-color: transparentize($background, 0.4)
-    
+
 @mixin spinner-style($style)
     @each $name, $background, $color, $border-color in $style
         &.#{$name}
@@ -31,7 +33,26 @@
             .sk-bounce-dot,
             .sk-flow-dot
                 background: $background
-
+
+@mixin arrow-style($style, $interaction, $element-position)
+  @each $name, $background, $color, $border-color in $style
+    &.#{$name}
+      &.#{$element-position}::after
+        content: " "
+        position: absolute
+        border-width: 5px
+        @if $element-position == "left"
+          border-color: transparent transparent transparent $background
+
+        @if $element-position == "right"
+          border-color: transparent $background transparent transparent
+
+        @if $element-position == "below"
+          border-color: transparent transparent $background transparent
+
+        @if $element-position == "above"
+          border-color: $background transparent transparent transparent
+
 @mixin spinner-plane-style($style)
     @each $name, $background, $color, $border-color in $style
         &.#{$name}
@@ -53,11 +74,11 @@
                 @include get-layout($screen, $size)
         @else
             @include get-layout($screen, $size)
-            
+
 
 @mixin get-layout($screen, $size)
     &.it-#{$screen}-#{$size}
-        flex-basis: 100% / (12/$size)
+        flex-basis: math.div(100%, math.div(12, $size))
 
 @mixin dropdown-style($style)
     @each $name, $background, $color, $border-color in $style
@@ -73,7 +94,7 @@
                     background-color: darken($background, 10%)
                 &:active, &.active
                     background-color: darken($background, 15%)
-            
+
 @mixin carousel-dot-style($style)
     @each $name, $background, $color, $border-color in $style
         &.#{$name}
@@ -116,19 +137,19 @@
                         background-color: darken($background, 10%)
                     &:active, &.active
                         background-color: darken($background, 15%)
-        
+
 @mixin get-branch($size)
     .branch
         align-self: center
         margin-left: 5px
         img
-            width: $size    
+            width: $size
 
 @function get-border($border-color)
     $border: none
     @if $border-color != none
         $border: 1px solid $border-color
-    
+
     @return $border
 
 @mixin form-style($style, $underline)
@@ -142,7 +163,7 @@
                 border-bottom: 2px solid $border-color
             @else
                 border: 1px solid $border-color
-            
+
             @include placeholder
                 color: $color
 

diff --git a/app/yew-styles/_tooltip.sass b/app/yew-styles/_tooltip.sass
@@ -0,0 +1,100 @@
+@import "_global-variables.sass"
+@import "_mixins.sass"
+
+.tooltip-container
+  position: relative
+  width: fit-content
+  width: -moz-fit-content
+
+  .tooltip
+    position: absolute
+    padding: 3px 5px
+    border-radius: 5px
+    text-align: center
+    z-index: 1
+
+    @each $name, $size in $sizes
+      &.#{$name}
+        font-size: $size
+
+        @if $name == "big"
+          &.left
+            left: -70px
+
+          &.right
+            right: -75px
+
+          &.above
+            top: -45px
+
+          &.below
+            bottom: -45px
+
+        @if $name == "small"
+          &.left
+            left: -40px
+
+          &.right
+            right: -50px
+
+          &.above
+            top: -25px
+
+          &.below
+            bottom: -25px
+
+    &.left
+      left: -55px
+      &::after
+        top: 50%
+        left: 100%
+        margin-top: -5px
+        border-style: solid
+
+    &.right
+      right: -55px
+      &::after
+        top: 50%
+        right: 100%
+        margin-top: -5px
+        border-style: solid
+
+    &.above
+      top: -35px
+      &::after
+        top: 100%
+        margin-left: -5px
+        left: 50%
+        border-style: solid
+
+    &.below
+      bottom: -35px
+      &::after
+        bottom: 100%
+        left: 50%
+        margin-left: -5px
+        border-style: solid
+
+    @each $name, $size in $sizes
+        &.#{$name}
+            font-size: $size
+
+    &.regular
+      @include pallete-style($regular-style, true)
+      @include arrow-style($regular-style, true, "left")
+      @include arrow-style($regular-style, true, "right")
+      @include arrow-style($regular-style, true, "above")
+      @include arrow-style($regular-style, true, "below")
+
+    &.outline
+      @include pallete-style($outline-style, true)
+      @include arrow-style($regular-style, true, "left")
+      @include arrow-style($regular-style, true, "right")
+      @include arrow-style($regular-style, true, "above")
+      @include arrow-style($regular-style, true, "below")
+    &.light
+      @include pallete-style($light-style, true)
+      @include arrow-style($regular-style, true, "left")
+      @include arrow-style($regular-style, true, "right")
+      @include arrow-style($regular-style, true, "above")
+      @include arrow-style($regular-style, true, "below")