feat: better littlefoot style

Former-commit-id: 054a1433ac7a1741b2edf506b22c23126d2f1a3d

2 files changed, 195 insertions, 1 deletions

diff --git a/assets/css/components/_littlefoot.scss b/assets/css/components/_littlefoot.scss
new file mode 100644
index 00000000..fdfb7ed5
--- /dev/null
+++ b/assets/css/components/_littlefoot.scss
@@ -0,0 +1,193 @@
+.littlefoot{
+    --button-background-color:#949494;
+    --button-text-color:#fff;
+    --button-active-background-color:#3f3f3f;
+    --button-active-text-color:#fff;
+    --button-border-radius:0.25rem;
+    --button-height:16px;
+    --button-height:1rem;
+    --button-margin:0 1.6px;
+    --button-margin:0 0.1rem;
+    --button-padding:0 0.3rem;
+    --button-transition:background-color 0.25s ease,color 0.25s ease;
+    --popover-background-color:#f5f5f5;
+    --popover-text-color:#111;
+    --popover-border:1px solid #ddd;
+    --popover-border-radius:8px;
+    --popover-border-radius:0.1rem;
+    --popover-max-height:15em;
+    --popover-max-width:90%;
+    --popover-horizontal-padding:22.4px;
+    --popover-horizontal-padding:1.4rem;
+    --popover-vertical-padding:9.6px;
+    --popover-vertical-padding:0.6rem;
+    --popover-shadow:0 0 0.2rem rgba(0,0,0,.1);
+    --popover-transform-origin:50% 0;
+    --popover-transform:scale(0.1) translateZ(0);
+    --popover-active-transform:scale(1) translateZ(0);
+    --popover-transition:opacity 0.25s ease,transform 0.25s ease;
+    --popover-width:22em;
+    --popover-scroll-indicator-color:#3f3f3f;
+    --popover-tooltip-size:8px;
+    --popover-tooltip-size:0.5rem;
+    position:relative
+}
+.littlefoot__button{
+    background-color:var(--button-background-color);
+    border:0;
+    border:var(--button-border,0);
+    border-radius:var(--button-border-radius);
+    color:var(--button-text-color);
+    cursor:pointer;
+    display:inline-block;
+    font-size:12px;
+    font-size:var(--button-font-size,12px);
+    font-size:.75rem;
+    font-size:var(--button-font-size,.75rem);
+    font-weight:400;
+    font-weight:var(--button-font-weight,initial);
+    height:var(--button-height);
+    margin:var(--button-margin);
+    padding:var(--button-padding);
+    -webkit-text-decoration:none;
+    text-decoration:none;
+    transition:var(--button-transition);
+    vertical-align:middle
+}
+.littlefoot__button.is-active,.littlefoot__button:active,.littlefoot__button:focus,.littlefoot__button:hover{
+    background-color:var(--button-active-background-color);
+    color:var(--button-active-text-color)
+}
+.littlefoot__button svg{
+    float:left;
+    height:4.8px;
+    height:.3rem
+}
+.littlefoot__popover{
+    border:var(--popover-border);
+    border-radius:var(--popover-border-radius);
+    box-shadow:var(--popover-shadow);
+    margin:calc(var(--popover-tooltip-size) + var(--button-height)) 0;
+    max-width:var(--popover-max-width);
+    position:absolute;
+    top:0;
+    transform:var(--popover-transform);
+    transform-origin:var(--popover-transform-origin);
+    transition:var(--popover-transition);
+    width:var(--popover-width);
+    z-index:1
+}
+.littlefoot__popover.is-above{
+    bottom:0;
+    top:auto
+}
+.littlefoot__popover.is-active{
+    transform:var(--popover-active-transform)
+}
+.littlefoot__wrapper{
+    position:relative;
+    z-index:1
+}
+.littlefoot__content,.littlefoot__wrapper{
+    border-radius:var(--popover-border-radius)
+}
+.littlefoot__content{
+    -webkit-overflow-scrolling:touch;
+    background-color:var(--popover-background-color);
+    box-sizing:border-box;
+    color:var(--popover-text-color);
+    font-family:serif;
+    font-family:initial;
+    font-family:var(--popover-font-family,initial);
+    font-size:medium;
+    font-size:var(--popover-font-size,initial);
+    font-style:normal;
+    font-style:var(--popover-font-style,initial);
+    font-weight:400;
+    font-weight:var(--popover-font-weight,initial);
+    line-height:normal;
+    line-height:var(--popover-line-height,normal);
+    max-height:var(--popover-max-height);
+    overflow:auto;
+    padding:var(--popover-vertical-padding) var(--popover-horizontal-padding);
+    width:100%
+}
+.littlefoot__content img{
+    max-width:100%
+}
+.littlefoot__content:focus{
+    outline:none
+}
+.is-scrollable{
+    --arrow-x:calc(var(--popover-horizontal-padding)*-1);
+    --arrow-y:calc(var(--popover-vertical-padding)/2)
+}
+.is-scrollable .littlefoot__content:after{
+    bottom:0;
+    color:var(--popover-scroll-indicator-color);
+    content:"\21E3";
+    display:block;
+    left:0;
+    opacity:1;
+    position:sticky;
+    text-align:center;
+    transform:translateX(var(--arrow-x)) translateY(var(--arrow-y));
+    transition:var(--popover-transition);
+    width:var(--popover-horizontal-padding)
+}
+.is-scrollable.is-fully-scrolled .littlefoot__content:after{
+    opacity:0
+}
+.littlefoot__tooltip{
+    --tooltip-margin:calc(var(--popover-tooltip-size)*-1);
+    background-color:var(--popover-background-color);
+    border:var(--popover-border);
+    box-shadow:var(--popover-shadow);
+    height:calc(var(--popover-tooltip-size)*2);
+    margin-left:var(--tooltip-margin);
+    position:absolute;
+    transform:rotate(45deg);
+    width:calc(var(--popover-tooltip-size)*2)
+}
+.is-below .littlefoot__tooltip{
+    top:var(--tooltip-margin)
+}
+.is-above .littlefoot__tooltip{
+    bottom:var(--tooltip-margin)
+}
+@media (max-width:767.98px){
+    .littlefoot__popover{
+        border-radius:0;
+        border-width:1px 0 0;
+        bottom:0!important;
+        left:0!important;
+        margin:0;
+        max-width:100%!important;
+        position:fixed;
+        right:0!important;
+        top:auto!important;
+        transform:translateY(100%);
+        width:100%
+    }
+    .littlefoot__popover.is-active{
+        transform:translateY(0)
+    }
+    .littlefoot__wrapper{
+        border-radius:0;
+        max-width:100%!important;
+        transform:none
+    }
+    .littlefoot__tooltip{
+        display:none
+    }
+}
+@media not print{
+    .littlefoot--print{
+        display:none
+    }
+}
+@media print{
+    .littlefoot__button,.littlefoot__popover{
+        display:none
+    }
+}
diff --git a/assets/css/index.scss b/assets/css/index.scss
index 6578c70a..35aeb2c7 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -9,4 +9,5 @@
 @import 'components/shortcodes';
 @import 'components/footer';
 @import 'components/animation';
-@import 'components/utility'
+@import 'components/utility';
+@import 'components/littlefoot'