docs: #339 moving navbar to partial page

2022-07-02 20:11:37 +04:30
1 parent 7c7d7acccb
commit 2d3d5724d3
@@ -13,7 +13,6 @@
    </title>

    <link href="/css/p8.css?version=46" rel="stylesheet" type="text/css" />
-    <link href="/css/fab.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
    <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

@@ -99,7 +98,7 @@

            <partial name="_InlineLoginPartial" model="Model" />

-            <partial name="_FooterPartial" model="null" />
+            <partial name="_FooterPartial" model=@(new _FooterPartialModel(){StickyEnabled = true}) />

        </div>

@@ -15,7 +15,6 @@
    </title>

    <link href="/css/p8.css?version=46" rel="stylesheet" type="text/css" />
-    <link href="/css/fab.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
    <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

@@ -187,7 +186,7 @@

            <partial name="_InlineLoginPartial" model="Model" />

-            <partial name="_FooterPartial" model="null" />
+            <partial name="_FooterPartial" model=@(new _FooterPartialModel(){StickyEnabled = true}) />

        </div>

@@ -13,20 +13,16 @@
        @Html.Raw(ViewData["Title"])
    </title>
    <link href="/css/p8.css?version=46" rel="stylesheet" type="text/css" />
-    <link href="/css/fab.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
    <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/js/bk.js?version=30"></script>
    <script>
-
-
        var cookieValue = getCookie("playerScrollLock");
        var playerScrollLock = cookieValue === "true";

        cookieValue = getCookie("stickyEnabled");
        var stickyEnabled = cookieValue === "true";
-
    </script>

    @if (Model.GanjoorPage != null && Model.GanjoorPage.NoIndex)
@@ -256,53 +252,7 @@
        }
    }

-    <script>
-        // When the user scrolls the page, execute stickyFunction
-        window.onscroll = function() { stickyFunction() };

-        // Get the navbar
-        var navbar = document.getElementById("main-navbar");
-
-        // Get the offset position of the navbar
-        var sticky = navbar.offsetTop;
-
-        if(sticky != null){
-            var btnSticky = document.getElementById("pin_button");
-            if (stickyEnabled) {
-                btnSticky.classList.remove("color-gray");
-                btnSticky.classList.add("color-white");
-            }
-            else {
-                btnSticky.classList.remove("color-white");;
-                btnSticky.classList.add("color-gray")
-            }
-        }
-
-
-        // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
-        function stickyFunction() {
-            if (stickyEnabled && window.pageYOffset >= sticky) {
-                navbar.classList.add("sticky");
-            } else {
-                navbar.classList.remove("sticky");
-            }
-        }
-
-        function switchSticky() {
-            stickyEnabled = !stickyEnabled;
-            setCookie("stickyEnabled", stickyEnabled ? "true" : "false", 365);
-            var btnSticky = document.getElementById("pin_button");
-            if (stickyEnabled) {
-                btnSticky.classList.remove("color-gray");
-                btnSticky.classList.add("color-white");
-            }
-            else {
-                btnSticky.classList.remove("color-white");;
-                btnSticky.classList.add("color-gray")
-            }
-            stickyFunction();
-        }
-    </script>

 </body>
 </html>
@@ -12,7 +12,6 @@
        @Html.Raw(ViewData["Title"])
    </title>
    <link href="/css/p8.css?version=46" rel="stylesheet" type="text/css" />
-    <link href="/css/fab.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
    <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
    <script src="/lib/jquery/dist/jquery.min.js"></script>
@@ -441,7 +440,7 @@
                </div>
            </div>

-            <partial name="_FooterPartial" model="null" />
+            <partial name="_FooterPartial" model=@(new _FooterPartialModel(){StickyEnabled = true}) />
        </div>
    }

@@ -184,7 +184,7 @@
                </form>
            }
        </div>
-        <partial name="_FooterPartial" model="null" />
+        <partial name="_FooterPartial" model=@(new _FooterPartialModel(){StickyEnabled = false}) />
    </div>
    @if (!string.IsNullOrEmpty(ViewData["GoogleAnalyticsCode"].ToString()))
    {
@@ -16,7 +16,6 @@
    </title>

    <link href="/css/p8.css?version=46" rel="stylesheet" type="text/css" />
-    <link href="/css/fab.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
    <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

@@ -195,7 +194,7 @@

            <partial name="_InlineLoginPartial" model="Model" />

-            <partial name="_FooterPartial" model="null" />
+            <partial name="_FooterPartial" model=@(new _FooterPartialModel(){StickyEnabled = true}) />

        </div>

@@ -11,7 +11,6 @@
    <link rel="stylesheet" href="~/css/site.css" />
    <link href="/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
    <link href="/css/p8.css?version=46" rel="stylesheet" type="text/css" />
-    <link href="/css/fab.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
    <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
@@ -10,7 +10,6 @@
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link href="/css/p8.css?version=46" rel="stylesheet" type="text/css" />
-    <link href="/css/fab.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
    <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
@@ -205,7 +205,7 @@
            }

        </div>
-        <partial name="_FooterPartial" model="null" />
+        <partial name="_FooterPartial" model=@(new _FooterPartialModel(){StickyEnabled = false}) />
    </div>
    @if (!string.IsNullOrEmpty(ViewData["GoogleAnalyticsCode"].ToString()))
    {
@@ -14,7 +14,6 @@
    </title>

    <link href="/css/p8.css?version=46" rel="stylesheet" type="text/css" />
-    <link href="/css/fab.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="/favicon.ico?version=1" type="image/x-icon" />
    <link rel="search" type="application/opensearchdescription+xml" title="گنجور" href="https://ganjoor.net/search.xml" />

@@ -197,7 +196,7 @@

            <partial name="_InlineLoginPartial" model="Model" />

-            <partial name="_FooterPartial" model="null" />
+            <partial name="_FooterPartial" model=@(new _FooterPartialModel(){StickyEnabled = true}) />

        </div>

@@ -11,7 +11,7 @@
            <li><a href="/simi">مشابه‌یابی</a></li>
            <li><a href="https://blog.ganjoor.net">تازه‌های گنجور</a></li>
        </ul>
-         <ul class="link-list-tools">
+        <ul class="link-list-tools">
            <li><a href="https://c.ganjoor.net">کدهای گنجور</a></li>
            <li><a href="https://dg.ganjoor.net">گنجور رومیزی</a></li>
            <li><a href="http://pozh.org/saaghar">ساغر</a></li>
@@ -32,3 +32,54 @@
        </ul>
    </div>
 </div>
+
+@if (Model.StickyEnabled)
+{
+    <script>
+        // When the user scrolls the page, execute stickyFunction
+        window.onscroll = function() { stickyFunction() };
+
+        // Get the navbar
+        var navbar = document.getElementById("main-navbar");
+
+        // Get the offset position of the navbar
+        var sticky = navbar.offsetTop;
+
+        if (sticky != null) {
+            var btnSticky = document.getElementById("pin_button");
+            if (stickyEnabled) {
+                btnSticky.classList.remove("color-gray");
+                btnSticky.classList.add("color-white");
+            }
+            else {
+                btnSticky.classList.remove("color-white");;
+                btnSticky.classList.add("color-gray")
+            }
+        }
+
+
+        // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
+        function stickyFunction() {
+            if (stickyEnabled && window.pageYOffset >= sticky) {
+                navbar.classList.add("sticky");
+            } else {
+                navbar.classList.remove("sticky");
+            }
+        }
+
+        function switchSticky() {
+            stickyEnabled = !stickyEnabled;
+            setCookie("stickyEnabled", stickyEnabled ? "true" : "false", 365);
+            var btnSticky = document.getElementById("pin_button");
+            if (stickyEnabled) {
+                btnSticky.classList.remove("color-gray");
+                btnSticky.classList.add("color-white");
+            }
+            else {
+                btnSticky.classList.remove("color-white");;
+                btnSticky.classList.add("color-gray")
+            }
+            stickyFunction();
+        }
+    </script>
+}
@@ -4,8 +4,6 @@ namespace GanjooRazor.Pages
 {
    public class _FooterPartialModel : PageModel
    {
-        public void OnGet()
-        {
-        }
+        public bool StickyEnabled { get; set; }
    }
 }
@@ -63,78 +63,8 @@

 <div id="fa">

-   <div id="main-navbar" role="navigation">
-        <div class="clear-both">
-            <div class="float-right display-inline-flex width-76px">
-                <a onclick="switchSticky()" role="button" class="w3tooltip cursor-pointer float-right">
-                    <div class="noborder-btn color-white" id="pin_button">
-                        <i class="noindent-info-button pin-button"></i>
-                    </div>
-                    <span class="w3tooltiptext">چسبانی</span>
-                </a>
-            </div>

-            @if (Model.LoggedIn)
-            {
-                <a href="/User" role="button" class="w3tooltip cursor-pointer">
-                    <div class="circled-number">
-                        <i class="noindent-info-button user-home-icon"></i>
-                    </div>
-                    <span class="w3tooltiptext">پیشخان</span>
-                </a>
-                <a href="/User/MyBookmarks" role="button" class="w3tooltip cursor-pointer">
-                    <div class="circled-number">
-                        <i class="noindent-info-button bookmarking-icon"></i>
-                    </div>
-                    <span class="w3tooltiptext">نشان‌شده‌های من</span>
-                </a>
-                <a href="/User/Notifications" role="button" class="w3tooltip cursor-pointer">
-                    <div class="circled-number">
-                        <i class="noindent-info-button notifications-icon"><span id="notification-badge" class="hidden-recitation"></span></i>
-                    </div>
-                    <span class="w3tooltiptext">اعلان‌های من</span>
-                </a>
-                <a href="/User/History" role="button" class="w3tooltip cursor-pointer">
-                    <div class="circled-number">
-                        <i class="noindent-info-button history-icon"></i>
-                    </div>
-                    <span class="w3tooltiptext">ادامهٔ مطالعه</span>
-                </a>
-                <a href="javascript:document.getElementById('logoutform').submit();" role="button" class="w3tooltip cursor-pointer">
-                    <div class="circled-number">
-                        <i class="noindent-info-button logout-icon"></i>
-                    </div>
-                    <span class="w3tooltiptext">خروج</span>
-                </a>
-            }
-            else
-            {
-                <a onclick="document.getElementById('id01').style.display='block'" role="button" class="w3tooltip cursor-pointer pagebutton" style="display:inline-table;border: 3px solid black">
-                    ورود کاربر / نام‌نویسی <i class="noindent-info-button account-icon"></i>
-                </a>
-            }
-
-            <div class="float-left display-inline-flex width-76px">
-
-                <a href="#footer" role="button" class="w3tooltip cursor-pointer">
-                    <div class="noborder-btn">
-                        <i class="noindent-info-button down-btn"></i>
-                    </div>
-                    <span class="w3tooltiptext">پایین صفحه</span>
-                </a>
-
-                <a href="#" role="button" class="w3tooltip cursor-pointer">
-                    <div class="noborder-btn">
-                        <i class="noindent-info-button up-btn"></i>
-                    </div>
-                    <span class="w3tooltiptext">بالای صفحه</span>
-                </a>
-
-            </div>
-
-        </div>
-
-    </div>
+    <partial name="_InlineLoginPartial" model="Model" />

    <div id="maincnt">

@@ -825,16 +755,11 @@
        }


-
-        <partial name="_InlineLoginPartial" model="Model" />
-
-
-
    </div>



-    <partial name="_FooterPartial" model="null" />
+    <partial name="_FooterPartial" model=@(new _FooterPartialModel(){StickyEnabled = true}) />


 </div>
@@ -22,81 +22,7 @@
        </form>
    </div>

-
-
-    <div id="main-navbar" role="navigation">
-        <div class="clear-both">
-            <div class="float-right display-inline-flex width-76px">
-                <a onclick="switchSticky()" role="button" class="w3tooltip cursor-pointer float-right">
-                    <div class="noborder-btn color-white" id="pin_button">
-                        <i class="noindent-info-button pin-button"></i>
-                    </div>
-                    <span class="w3tooltiptext">چسبانی</span>
-                </a>
-            </div>
-
-            @if (Model.LoggedIn)
-            {
-                <a href="/User" role="button" class="w3tooltip cursor-pointer">
-                    <div class="circled-number">
-                        <i class="noindent-info-button user-home-icon"></i>
-                    </div>
-                    <span class="w3tooltiptext">پیشخان</span>
-                </a>
-                <a href="/User/MyBookmarks" role="button" class="w3tooltip cursor-pointer">
-                    <div class="circled-number">
-                        <i class="noindent-info-button bookmarking-icon"></i>
-                    </div>
-                    <span class="w3tooltiptext">نشان‌شده‌های من</span>
-                </a>
-                <a href="/User/Notifications" role="button" class="w3tooltip cursor-pointer">
-                    <div class="circled-number">
-                        <i class="noindent-info-button notifications-icon"><span id="notification-badge" class="hidden-recitation"></span></i>
-                    </div>
-                    <span class="w3tooltiptext">اعلان‌های من</span>
-                </a>
-                <a href="/User/History" role="button" class="w3tooltip cursor-pointer">
-                    <div class="circled-number">
-                        <i class="noindent-info-button history-icon"></i>
-                    </div>
-                    <span class="w3tooltiptext">ادامهٔ مطالعه</span>
-                </a>
-                <a href="javascript:document.getElementById('logoutform').submit();" role="button" class="w3tooltip cursor-pointer">
-                    <div class="circled-number">
-                        <i class="noindent-info-button logout-icon"></i>
-                    </div>
-                    <span class="w3tooltiptext">خروج</span>
-                </a>
-            }
-            else
-            {
-                <a onclick="document.getElementById('id01').style.display='block'" role="button" class="w3tooltip cursor-pointer pagebutton" style="display:inline-table;border: 3px solid black">
-                    ورود کاربر / نام‌نویسی <i class="noindent-info-button account-icon"></i>
-                </a>
-            }
-
-            <div class="float-left display-inline-flex width-76px">
-
-                <a href="#footer" role="button" class="w3tooltip cursor-pointer">
-                    <div class="noborder-btn">
-                        <i class="noindent-info-button down-btn"></i>
-                    </div>
-                    <span class="w3tooltiptext">پایین صفحه</span>
-                </a>
-
-                <a href="#" role="button" class="w3tooltip cursor-pointer">
-                    <div class="noborder-btn">
-                        <i class="noindent-info-button up-btn"></i>
-                    </div>
-                    <span class="w3tooltiptext">بالای صفحه</span>
-                </a>
-
-            </div>
-
-        </div>
-
-    </div>
-
+    <partial name="_InlineLoginPartial" model="Model" />

    <div id="main">
        <div id="guides">
@@ -214,16 +140,13 @@
                    <a href="/map"><img src="/image/map.gif" alt="نقشهٔ گنجور" /></a>
                </div>
            </div>
-
-
-
-            <partial name="_InlineLoginPartial" model="Model" />
+                       


        </div>

    </div>

-    <partial name="_FooterPartial" model="null" />
+    <partial name="_FooterPartial" model=@(new _FooterPartialModel(){StickyEnabled = true}) />

 </div>
@@ -1,41 +1,84 @@
@model GanjooRazor.Pages.LoginPartialEnabledPageModel

-@if (Model.LoggedIn)
-{
-    <div class="fab">
-        <span class="fab-action-button">
-            <i class="fab-action-button-loggedin__icon"></i>
-        </span>
-        <ul class="fab-buttons">
-            <li class="fab-buttons__item">
-                <a asp-page="Index" asp-area="User" class="fab-buttons__link" data-tooltip="پیشخان">
-                    <i class="icon-material icon-material_panel"></i>
-                </a>
-            </li>
-            <li class="fab-buttons__item">
-                <form method="post" id="logoutform" action="?handler=Logout">
-                </form>
-                <a href="javascript:document.getElementById('logoutform').submit();" class="fab-buttons__link" data-tooltip="خروج">
-                    <i class="icon-material icon-material_exit"></i>
-                </a>
-            </li>
-        </ul>
-    </div>
-}
-else
-{
-    <div class="fab">
-        <span class="fab-action-button">
-            <a role="button" class="actionlink" onclick="document.getElementById('id01').style.display='block'" data-tooltip="ورود کاربر" title="ورود کاربر">
-                <i class="fab-action-button__icon"></i>
+<div id="main-navbar" role="navigation">
+    <div class="clear-both">
+        <div class="float-right display-inline-flex width-76px">
+            <a onclick="switchSticky()" role="button" class="w3tooltip cursor-pointer float-right">
+                <div class="noborder-btn color-white" id="pin_button">
+                    <i class="noindent-info-button pin-button"></i>
+                </div>
+                <span class="w3tooltiptext">چسبانی</span>
            </a>
-        </span>
+        </div>
+
+        @if (Model.LoggedIn)
+        {
+            <a href="/User" role="button" class="w3tooltip cursor-pointer">
+                <div class="circled-number">
+                    <i class="noindent-info-button user-home-icon"></i>
+                </div>
+                <span class="w3tooltiptext">پیشخان</span>
+            </a>
+            <a href="/User/MyBookmarks" role="button" class="w3tooltip cursor-pointer">
+                <div class="circled-number">
+                    <i class="noindent-info-button bookmarking-icon"></i>
+                </div>
+                <span class="w3tooltiptext">نشان‌شده‌های من</span>
+            </a>
+            <a href="/User/Notifications" role="button" class="w3tooltip cursor-pointer">
+                <div class="circled-number">
+                    <i class="noindent-info-button notifications-icon"><span id="notification-badge" class="hidden-recitation"></span></i>
+                </div>
+                <span class="w3tooltiptext">اعلان‌های من</span>
+            </a>
+            <a href="/User/History" role="button" class="w3tooltip cursor-pointer">
+                <div class="circled-number">
+                    <i class="noindent-info-button history-icon"></i>
+                </div>
+                <span class="w3tooltiptext">ادامهٔ مطالعه</span>
+            </a>
+            <a href="javascript:document.getElementById('logoutform').submit();" role="button" class="w3tooltip cursor-pointer">
+                <div class="circled-number">
+                    <i class="noindent-info-button logout-icon"></i>
+                </div>
+                <span class="w3tooltiptext">خروج</span>
+            </a>
+        }
+        else
+        {
+            <a onclick="document.getElementById('id01').style.display='block'" role="button" class="w3tooltip cursor-pointer pagebutton" style="display:inline-table;border: 3px solid black">
+                ورود کاربر / نام‌نویسی <i class="noindent-info-button account-icon"></i>
+            </a>
+        }
+
+        <div class="float-left display-inline-flex width-76px">
+
+            <a href="#footer" role="button" class="w3tooltip cursor-pointer">
+                <div class="noborder-btn">
+                    <i class="noindent-info-button down-btn"></i>
+                </div>
+                <span class="w3tooltiptext">پایین صفحه</span>
+            </a>
+
+            <a href="#" role="button" class="w3tooltip cursor-pointer">
+                <div class="noborder-btn">
+                    <i class="noindent-info-button up-btn"></i>
+                </div>
+                <span class="w3tooltiptext">بالای صفحه</span>
+            </a>
+
+        </div>
+
    </div>

+</div>
+
+@if (!Model.LoggedIn)
+{
    <!-- The Modal -->
    <div id="id01" class="modal">
        <span onclick="document.getElementById('id01').style.display='none'"
-              class="close" title="بستن">&times;</span>
+          class="close" title="بستن">&times;</span>

        <!-- Modal Content -->
        <form class="modal-content animate" method="post" action="?handler=Login">
@@ -99,10 +142,10 @@ else
                </tr>

            </table>
-           
+
        </form>

-      
+

    </div>
 }
@@ -1,132 +0,0 @@
-            .fab {
-              position: fixed;
-              width: 56px;
-              left: 32px;
-              bottom: 15px;
-              margin-left: -28px;
-            }
-            
-            .fab:hover .fab-buttons {
-              opacity: 1;
-              visibility: visible;
-            }
-            
-            .fab:hover .fab-buttons__link {
-              transform: scaleY(1) scaleX(1) translateY(-16px) translateX(0px);
-            }
-            
-            .fab-action-button:hover + .fab-buttons .fab-buttons__link:before {
-              visibility: visible;
-              opacity: 1;
-              transform: scale(1);
-              transform-origin: right center 0;
-              transition-delay: 0.3s;
-            }
-            
-            .fab-action-button {
-              position: absolute;
-              bottom: 0;
-              display: block;
-              width: 56px;
-              height: 56px;
-              background-color: #2c0d0f;
-              border-radius: 50%;
-              box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
-            }
-            
-            .fab-buttons {
-              position: absolute;
-              left: 0;
-              right: 0;
-              bottom: 50px;
-              list-style: none;
-              margin: 0;
-              padding: 0;
-              opacity: 0;
-              visibility: hidden;
-              transition: 0.2s;
-            }
-
-            .fab-action-button__icon{
-                display: inline-block;
-                width: 56px;
-                height: 56px;
-                background: url('/image/login.svg') center no-repeat;
-            }
-
-            .fab-action-button-loggedin__icon {
-                display: inline-block;
-                width: 56px;
-                height: 56px;
-                background: url('/image/loggedin.svg') center no-repeat;
-            }
-            
-            .fab-buttons__item {
-              display: block;
-              text-align: center;
-              margin: 12px 0;
-            }
-            
-            .fab-buttons__link {
-              display: inline-block;
-              width: 40px;
-              height: 40px;
-              text-decoration: none;
-              background-color: #ffffff;
-              border-radius: 50%;
-              box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
-              transform: scaleY(0.5) scaleX(0.5) translateY(0px) translateX(0px);
-              -moz-transition: .3s;
-              -webkit-transition: .3s;
-              -o-transition: .3s;
-              transition: .3s;
-            }
-            
-            [data-tooltip]:before {
-              top: 50%;
-              margin-top: -11px;
-              font-weight: 600;
-              border-radius: 2px;
-              background: #585858;
-              color: #fff;
-              content: attr(data-tooltip);
-              font-size: 12px;
-              text-decoration: none;
-              visibility: hidden;
-              opacity: 0;
-              padding: 4px 7px;
-              margin-right: 12px;
-              position: absolute;
-              transform: scale(0);
-              right: 100%;
-              white-space: nowrap;
-              transform-origin: top right;
-              transition: all .3s cubic-bezier(.25, .8, .25, 1);
-            }
-            
-            [data-tooltip]:hover:before {
-              visibility: visible;
-              opacity: 1;
-              transform: scale(1);
-              transform-origin: right center 0;
-            }
-            
-            .icon-material {
-              display: inline-block;
-              width: 40px;
-              height: 40px;
-            }
-
-            .icon-material_edit {
-                background: url('/image/edit.svg') center no-repeat;
-            }
-
-            .icon-material_exit {
-                background: url('/image/logout.svg') center no-repeat;
-            }
-
-            .icon-material_panel {
-                background: url('/image/settings.svg') center no-repeat;
-            }
-            
-