-
Notifications
You must be signed in to change notification settings - Fork 138
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixed button hover should not work outside the button aria.
- Loading branch information
1 parent
8ba257a
commit 3267639
Showing
3 changed files
with
85 additions
and
15 deletions.
There are no files selected for viewing
29 changes: 16 additions & 13 deletions
29
components/floating-action-button/css/floating-action-button.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,25 @@ | ||
|
|
||
| /*! | ||
| * Propeller v1.0.0 (http://propeller.in) | ||
| * Propeller v1.0.0 (http://propeller.in): floating-action-button.css | ||
| * Copyright 2016-2017 Digicorp, Inc. | ||
| * Licensed under MIT (http://propeller.in/LICENSE) | ||
| */ | ||
|
|
||
| .pmd-floating-action{ bottom: 0; position: fixed; margin:1em; right: 0;} | ||
| .pmd-floating-action-btn { display:block; position: relative; -webkit-transition: all .2s ease-out; transition: all .2s ease-out;} | ||
| .pmd-floating-action-btn:before { bottom: 10%; content: attr(data-title); opacity: 0; position: absolute; right: 100%; -webkit-transition: all .2s ease-out .5s; transition: all .2s ease-out .5s; white-space: nowrap; background-color:#fff; padding:6px 12px; border-radius:2px; color:#333; font-size:12px; margin-right:5px; display:inline-block; box-shadow: 0px 2px 3px -2px rgba(0, 0, 0, 0.18), 0px 2px 2px -7px rgba(0, 0, 0, 0.15);} | ||
| .pmd-floating-action { bottom: 0; position: fixed; margin:1em; right: 0; } | ||
| .pmd-floating-action-btn { display:block; position: relative; transition: all .2s ease-out;} | ||
| .pmd-floating-action-btn:before { bottom: 10%; content: attr(data-title); opacity: 0; position: absolute; right: 100%; transition: all .2s ease-out .5s; white-space: nowrap; background-color:#fff; padding:6px 12px; border-radius:2px; color:#333; font-size:12px; margin-right:5px; display:inline-block; box-shadow: 0px 2px 3px -2px rgba(0, 0, 0, 0.18), 0px 2px 2px -7px rgba(0, 0, 0, 0.15);} | ||
| .pmd-floating-action-btn:last-child:before { font-size: 14px; bottom: 25%;} | ||
| .pmd-floating-action-btn:active, .pmd-floating-action-btn:focus, .pmd-floating-action-btn:hover {box-shadow: 0px 5px 11px -2px rgba(0, 0, 0, 0.18), 0px 4px 12px -7px rgba(0, 0, 0, 0.15);} | ||
| .pmd-floating-action-btn:not(:last-child){ opacity: 0; -webkit-transform: translateY(20px) scale(0.3); -ms-transform: translateY(20px) scale(0.3); transform: translateY(20px) scale(0.3); margin-bottom:15px; margin-left:8px;} | ||
| .pmd-floating-action-btn:not(:last-child):nth-last-child(1) { -webkit-transition-delay: 50ms; transition-delay: 50ms;} | ||
| .pmd-floating-action-btn:not(:last-child):nth-last-child(2) { -webkit-transition-delay: 100ms; transition-delay: 100ms;} | ||
| .pmd-floating-action-btn:not(:last-child):nth-last-child(3) { -webkit-transition-delay: 150ms; transition-delay: 150ms;} | ||
| .pmd-floating-action-btn:not(:last-child):nth-last-child(4) { -webkit-transition-delay: 200ms; transition-delay: 200ms;} | ||
| .pmd-floating-action-btn:not(:last-child):nth-last-child(5) { -webkit-transition-delay: 250ms; transition-delay: 250ms;} | ||
| .pmd-floating-action-btn:not(:last-child):nth-last-child(6) { -webkit-transition-delay: 300ms; transition-delay: 300ms;} | ||
| .pmd-floating-action:hover .pmd-floating-action-btn, .menu--floating--open .pmd-floating-action-btn { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none;} | ||
| .pmd-floating-action-btn:not(:last-child){ opacity: 0; -ms-transform: translateY(20px) scale(0.3); transform: translateY(20px) scale(0.3); margin-bottom:15px; margin-left:8px; position:absolute; bottom:0;} | ||
| .pmd-floating-action-btn:not(:last-child):nth-last-child(1) { transition-delay: 50ms;} | ||
| .pmd-floating-action-btn:not(:last-child):nth-last-child(2) { transition-delay: 100ms;} | ||
| .pmd-floating-action-btn:not(:last-child):nth-last-child(3) { transition-delay: 150ms;} | ||
| .pmd-floating-action-btn:not(:last-child):nth-last-child(4) { transition-delay: 200ms;} | ||
| .pmd-floating-action-btn:not(:last-child):nth-last-child(5) { transition-delay: 250ms;} | ||
| .pmd-floating-action-btn:not(:last-child):nth-last-child(6) { transition-delay: 300ms;} | ||
| .pmd-floating-action:hover .pmd-floating-action-btn, .menu--floating--open .pmd-floating-action-btn { opacity: 1; -ms-transform: none; transform: none; position:relative; bottom:auto;} | ||
| .pmd-floating-action:hover .pmd-floating-action-btn:before, .menu--floating--open .pmd-floating-action-btn:before { opacity: 1;} | ||
| .pmd-floating-hidden{ display:none;} | ||
| .pmd-floating-action-btn.btn:hover{ overflow:visible;} | ||
| .pmd-floating-action-btn.btn:hover{ overflow:visible;} | ||
|
|
||
| .pmd-floating-action-btn .ink{ width:50px; height:50px;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
64 changes: 64 additions & 0 deletions
64
components/floating-action-button/snippets/floating-action-button-iframe.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <!doctype html> | ||
| <html lang=""> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="description" content="Propeller is a front-end responsive framework based on Material design & Bootstrap."> | ||
| <meta content="width=device-width, initial-scale=1, user-scalable=no" name="viewport"> | ||
| <title>Accordion - Style - Propeller</title> | ||
|
|
||
| <!-- favicon --> | ||
| <link rel="icon" href="http://propeller.in/assets/images/favicon.ico" type="image/x-icon"> | ||
|
|
||
| <!-- Bootstrap --> | ||
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet" /> | ||
|
|
||
| <!-- Propeller card (CSS for helping component example file)--> | ||
| <link href="../../card/css/card.css" type="text/css" rel="stylesheet" /> | ||
|
|
||
| <!-- Example docs (CSS for helping component example file)--> | ||
| <link href="../../../docs/css/example-docs.css" type="text/css" rel="stylesheet" /> | ||
|
|
||
| <!-- Propeller typography --> | ||
| <link href="../../typography/css/typography.css" type="text/css" rel="stylesheet" /> | ||
|
|
||
| <!-- Google Icon Font --> | ||
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | ||
| <!--<link href="../components/icons/css/google-icons.css" type="text/css" rel="stylesheet" /> --> | ||
|
|
||
| <!-- Propeller Button --> | ||
| <link href="../../button/css/button.css" type="text/css" rel="stylesheet" /> | ||
|
|
||
| <!-- Propeller Accordion --> | ||
| <link href="../css/floating-action-button.css" type="text/css" rel="stylesheet" /> | ||
|
|
||
| <style> | ||
| body { background:transparent;} | ||
| </style> | ||
|
|
||
| </head> | ||
|
|
||
| <div class="menu pmd-floating-action" role="navigation"> | ||
| <a href="javascript:void(0);" class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-default" data-title="Supervisor Account"> | ||
| <span class="pmd-floating-hidden">Supervisor Account</span> | ||
| <i class="material-icons">supervisor_account</i> | ||
| </a> | ||
| <a href="javascript:void(0);" class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-default" data-title="Cloud Queue"> | ||
| <span class="pmd-floating-hidden">Cloud Queue</span> | ||
| <i class="material-icons">cloud_queue</i> | ||
| </a> | ||
| <a href="javascript:void(0);" class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-default" data-title="Headset"> | ||
| <span class="pmd-floating-hidden">Headset</span> | ||
| <i class="material-icons">headset</i> | ||
| </a> | ||
| <a href="javascript:void(0);" class="pmd-floating-action-btn btn btn-sm pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-default" data-title="Dialpad"> | ||
| <span class="pmd-floating-hidden">Dialpad</span> | ||
| <i class="material-icons">dialpad</i> | ||
| </a> | ||
| <a href="javascript:void(0);" class="pmd-floating-action-btn btn pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-primary" data-title="Add"> | ||
| <span class="pmd-floating-hidden">Primary</span> | ||
| <i class="material-icons pmd-sm">add</i> | ||
| </a> | ||
| </div> | ||
| </body> | ||
| </html> |