Merge pull request #392 from AnatoleLucet/style/links-animations
Adding links animation
This commit is contained in:
commit
6b24432bc9
22 changed files with 104 additions and 82 deletions
|
@ -1,6 +1,6 @@
|
|||
<div class="cover">
|
||||
<h1 class="zone xl margin-bottom-large">
|
||||
<a data-ls-attrs="href=/console" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
|
||||
<a data-ls-attrs="href=/console" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
|
||||
<br />
|
||||
|
||||
<span>Your Account</span>
|
||||
|
@ -26,7 +26,7 @@
|
|||
|
||||
<br />
|
||||
|
||||
<a href="https://en.gravatar.com/gravatars/new/" rel="noopener" class="button margin-bottom-small" target="_blank"><i class="icon-upload"></i> Upload</a>
|
||||
<a href="https://en.gravatar.com/gravatars/new/" rel="noopener" class="button margin-bottom-small link-animation-disabled" target="_blank"><i class="icon-upload"></i> Upload</a>
|
||||
|
||||
<br />
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<header class="clear">
|
||||
<a href="/console" class="logo pull-start">
|
||||
<a href="/console" class="logo pull-start link-animation-disabled">
|
||||
<img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" />
|
||||
<img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" />
|
||||
</a>
|
||||
|
@ -34,10 +34,10 @@
|
|||
data-failure-param-trigger-events="account.deleteSession">
|
||||
|
||||
<div class="console-back">
|
||||
<a href="/console">Back to Console <i class="icon-right-open"></i></a>
|
||||
<a href="/console" class="link-return-animation--end">Back to Console <i class="icon-right-open"></i></a>
|
||||
</div>
|
||||
|
||||
<div class="account link pull-end clear">
|
||||
<div class="account link link-animation-disabled pull-end clear">
|
||||
<img src="" data-ls-attrs="src={{account|gravatar}}" alt="User Avatar" class="avatar margin-start pull-end" />
|
||||
<span class="name pull-end desktops-only" data-ls-bind="{{account.name}}"></span>
|
||||
</div>
|
||||
|
@ -45,10 +45,10 @@
|
|||
<div class="console-index drop-list bottom end" data-ls-ui-open="" data-button-text="" data-button-icon="" data-button-selector="[data-toggler]" data-button-class="account-button" data-blur="1" tabindex="1">
|
||||
<ul class="margin-top-large arrow-end">
|
||||
<li>
|
||||
<a href="/console/account"><i class="icon-user"></i> Your Account</a>
|
||||
<a href="/console/account" class="link-animation-disabled"><i class="icon-user"></i> Your Account</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="link"><i class="icon-sun-inv force-dark pull-start"></i><i class="icon-moon-inv force-light pull-start"></i> Change Theme
|
||||
<span class="link link-animation-disabled"><i class="icon-sun-inv force-dark pull-start"></i><i class="icon-moon-inv force-light pull-start"></i> Change Theme
|
||||
<div class="pull-end switch-theme">
|
||||
<button data-general-theme
|
||||
data-analytics-event="click"
|
||||
|
@ -66,7 +66,7 @@
|
|||
</div>
|
||||
|
||||
<nav class="project-only" data-ls-ui-open="" data-button-class="round icon-btn phones-only tablets-only" data-button-icon="icon-dot-3">
|
||||
<a class="logo" href="/console"
|
||||
<a class="logo link-animation-disabled" href="/console"
|
||||
data-analytics-event="click"
|
||||
data-analytics-category="console/navigation"
|
||||
data-analytics-label="Logo Link">
|
||||
|
@ -83,7 +83,8 @@
|
|||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}"
|
||||
data-analytics-event="click"
|
||||
data-analytics-category="console/navigation"
|
||||
data-analytics-label="Home Link">
|
||||
data-analytics-label="Home Link"
|
||||
class="link-animation-disabled">
|
||||
<i class="icon-home"></i>
|
||||
Home
|
||||
</a>
|
||||
|
@ -97,7 +98,8 @@
|
|||
<a data-ls-attrs="href=/console/database?project={{router.params.project}}"
|
||||
data-analytics-event="click"
|
||||
data-analytics-category="console/navigation"
|
||||
data-analytics-label="Database Link">
|
||||
data-analytics-label="Database Link"
|
||||
class="link-animation-disabled">
|
||||
<i class="icon-database"></i>
|
||||
Database
|
||||
</a>
|
||||
|
@ -106,7 +108,8 @@
|
|||
<a data-ls-attrs="href=/console/storage?project={{router.params.project}}"
|
||||
data-analytics-event="click"
|
||||
data-analytics-category="console/navigation"
|
||||
data-analytics-label="Storage Link">
|
||||
data-analytics-label="Storage Link"
|
||||
class="link-animation-disabled">
|
||||
<i class="icon-folder"></i>
|
||||
Storage
|
||||
</a>
|
||||
|
@ -115,7 +118,8 @@
|
|||
<a data-ls-attrs="href=/console/users?project={{router.params.project}}"
|
||||
data-analytics-event="click"
|
||||
data-analytics-category="console/navigation"
|
||||
data-analytics-label="Users Link">
|
||||
data-analytics-label="Users Link"
|
||||
class="link-animation-disabled">
|
||||
<i class="icon-users"></i>
|
||||
Users
|
||||
</a>
|
||||
|
@ -129,7 +133,8 @@
|
|||
<a data-ls-attrs="href=/console/tasks?project={{router.params.project}}"
|
||||
data-analytics-event="click"
|
||||
data-analytics-category="console/navigation"
|
||||
data-analytics-label="Tasks Link">
|
||||
data-analytics-label="Tasks Link"
|
||||
class="link-animation-disabled">
|
||||
<i class="icon-clock"></i>
|
||||
Tasks
|
||||
</a>
|
||||
|
@ -138,7 +143,8 @@
|
|||
<a data-ls-attrs="href=/console/webhooks?project={{router.params.project}}"
|
||||
data-analytics-event="click"
|
||||
data-analytics-category="console/navigation"
|
||||
data-analytics-label="Webhooks Links">
|
||||
data-analytics-label="Webhooks Links"
|
||||
class="link-animation-disabled">
|
||||
<i class="icon-link"></i>
|
||||
Webhooks
|
||||
</a>
|
||||
|
@ -147,7 +153,8 @@
|
|||
<a data-ls-attrs="href=/console/keys?project={{router.params.project}}"
|
||||
data-analytics-event="click"
|
||||
data-analytics-category="console/navigation"
|
||||
data-analytics-label="API Keys Link">
|
||||
data-analytics-label="API Keys Link"
|
||||
class="link-animation-disabled">
|
||||
<i class="icon-key-inv"></i>
|
||||
API Keys
|
||||
</a>
|
||||
|
@ -160,7 +167,8 @@
|
|||
<a data-ls-attrs="href=/console/settings?project={{router.params.project}}"
|
||||
data-analytics-event="click"
|
||||
data-analytics-category="console/navigation"
|
||||
data-analytics-label="Settings Link">
|
||||
data-analytics-label="Settings Link"
|
||||
class="link-animation-disabled">
|
||||
<i class="icon-cog"></i> Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
@ -12,7 +12,7 @@ $rules = $collection->getAttribute('rules', []);
|
|||
|
||||
<div class="cover">
|
||||
<h1 class="zone xl margin-bottom-large">
|
||||
<a data-ls-attrs="href=/console/database?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Database</a>
|
||||
<a data-ls-attrs="href=/console/database?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Database</a>
|
||||
|
||||
<br />
|
||||
|
||||
|
|
|
@ -163,7 +163,7 @@ $collections = [];
|
|||
|
||||
<div class="cover">
|
||||
<h1 class="zone xl margin-bottom-large">
|
||||
<a data-ls-attrs="href=/console/database/collection?id={{router.params.collection}}&project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> <?php echo $this->escape($name); ?></a>
|
||||
<a data-ls-attrs="href=/console/database/collection?id={{router.params.collection}}&project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> <?php echo $this->escape($name); ?></a>
|
||||
|
||||
<br />
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<div class="cover">
|
||||
<h1 class="zone xl margin-bottom-large">
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
|
||||
<br />
|
||||
|
||||
<span>Database</span>
|
||||
|
@ -65,7 +65,7 @@
|
|||
<div data-ls-if="0 != {{project-collections.sum}}">
|
||||
<ul data-ls-loop="project-collections.collections" data-ls-as="collection" data-ls-append="" class="tiles cell-3 margin-bottom-small" style="visibility: hidden">
|
||||
<li class="margin-bottom">
|
||||
<a data-ls-attrs="href=/console/database/collection?id={{collection.$id}}&project={{router.params.project}}" class="box">
|
||||
<a data-ls-attrs="href=/console/database/collection?id={{collection.$id}}&project={{router.params.project}}" class="box link-animation-disabled">
|
||||
<div data-ls-bind="{{collection.name}}" class="text-one-liner margin-bottom text-bold"> </div>
|
||||
|
||||
<i class="icon-right-open"></i>
|
||||
|
|
|
@ -33,7 +33,7 @@ $home = $this->getParam('home', '');
|
|||
|
||||
<ul data-ls-loop="console-projects" data-ls-as="project" data-ls-append="" class="tiles cell-3" style="visibility: hidden">
|
||||
<li class="margin-bottom">
|
||||
<a data-ls-attrs="href=/console/home?project={{project.$id}}" class="box">
|
||||
<a data-ls-attrs="href=/console/home?project={{project.$id}}" class="box link-animation-disabled">
|
||||
<div data-ls-bind="{{project.name}}" class="text-one-liner margin-bottom-tiny text-bold"> </div>
|
||||
|
||||
<p data-ls-if="({{project.platforms.length}})" class="text-fade text-size-small" data-ls-bind="{{project.platforms.length}} apps"></p>
|
||||
|
|
|
@ -3,7 +3,7 @@ $scopes = $this->getParam('scopes', []);
|
|||
?>
|
||||
<div class="cover margin-bottom-large">
|
||||
<h1 class="zone xl margin-bottom-large">
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
|
||||
<br />
|
||||
|
||||
<span>API Keys</span>
|
||||
|
|
|
@ -6,7 +6,7 @@ $customDomainsTarget = $this->getParam('customDomainsTarget', false);
|
|||
?>
|
||||
<div class="cover">
|
||||
<h1 class="zone xl margin-bottom-large">
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
|
||||
<br />
|
||||
|
||||
<span>Settings</span>
|
||||
|
|
|
@ -5,7 +5,7 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
|
|||
?>
|
||||
<div class="cover">
|
||||
<h1 class="zone xl margin-bottom-large">
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
|
||||
<br />
|
||||
|
||||
<span>Storage</span>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<div class="cover margin-bottom-large">
|
||||
<h1 class="zone xl margin-bottom-large">
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
|
||||
<br />
|
||||
|
||||
<span>Tasks</span>
|
||||
|
|
|
@ -4,7 +4,7 @@ $providers = $this->getParam('providers', []);
|
|||
|
||||
<div class="cover">
|
||||
<h1 class="zone xl margin-bottom-large">
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
|
||||
<br />
|
||||
|
||||
<span>Users</span>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<div class="cover">
|
||||
<h1 class="zone xl margin-bottom-large">
|
||||
<a data-ls-attrs="href=/console/users?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Users</a>
|
||||
<a data-ls-attrs="href=/console/users?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Users</a>
|
||||
<br />
|
||||
|
||||
<span data-ls-bind="{{user.name}}"> </span>
|
||||
|
|
|
@ -5,7 +5,7 @@ $events = array_keys($this->getParam('events', []));
|
|||
?>
|
||||
<div class="cover margin-bottom-large">
|
||||
<h1 class="zone xl margin-bottom-large">
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small"><i class="icon-left-open"></i> Home</a>
|
||||
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" class="back text-size-small link-return-animation--start"><i class="icon-left-open"></i> Home</a>
|
||||
<br />
|
||||
|
||||
<span>Webhooks</span>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<div class="logo text-align-center margin-bottom-xl">
|
||||
<a href="/">
|
||||
<a href="/" class="link-animation-disabled">
|
||||
<img src="/images/appwrite.svg" alt="Appwrite Light Logo" class="force-light" />
|
||||
<img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" />
|
||||
</a>
|
||||
|
|
2
public/dist/styles/default-ltr.css
vendored
2
public/dist/styles/default-ltr.css
vendored
File diff suppressed because one or more lines are too long
2
public/dist/styles/default-rtl.css
vendored
2
public/dist/styles/default-rtl.css
vendored
File diff suppressed because one or more lines are too long
|
@ -334,9 +334,6 @@ a.box {
|
|||
}
|
||||
|
||||
a.box:hover {
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, .2);
|
||||
opacity: .7;
|
||||
}
|
||||
|
|
|
@ -16,10 +16,6 @@ header {
|
|||
margin: 7px 0;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
@ -35,10 +31,6 @@ header {
|
|||
|
||||
.account {
|
||||
.func-margin-start(25px);
|
||||
|
||||
&:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
|
|
@ -36,7 +36,6 @@ button,
|
|||
&:hover,
|
||||
&:focus {
|
||||
background: var(--config-color-focus-hover);
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.fly {
|
||||
|
@ -175,10 +174,6 @@ button,
|
|||
padding: 0;
|
||||
.func-padding-end(0) !important;
|
||||
|
||||
&:hover {
|
||||
border-bottom: dotted 1px var(--config-color-link);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: inherit;
|
||||
}
|
||||
|
|
|
@ -130,10 +130,6 @@
|
|||
.account {
|
||||
.func-margin-start(25px);
|
||||
.text-one-liner;
|
||||
|
||||
&:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-theme {
|
||||
|
@ -189,11 +185,6 @@
|
|||
height: 39px;
|
||||
padding: 15px 20px;
|
||||
display: block;
|
||||
border-bottom: none;
|
||||
|
||||
&:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
|
|
|
@ -7,11 +7,9 @@ html.home {
|
|||
.logo {
|
||||
a {
|
||||
display: block;
|
||||
border-bottom: none;
|
||||
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -17,11 +17,12 @@ a, .link {
|
|||
text-decoration: none;
|
||||
border-left: 2px solid transparent;
|
||||
border-right: 2px solid transparent;
|
||||
border-bottom: solid 1px transparent;
|
||||
transition: 200ms;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-bottom: dotted 1px var(--config-color-link);
|
||||
cursor: pointer;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
|
@ -29,11 +30,11 @@ a, .link {
|
|||
}
|
||||
|
||||
&.disabled:hover {
|
||||
border-bottom: none;
|
||||
.link.link-animation-disabled();
|
||||
}
|
||||
|
||||
&.tag:hover {
|
||||
border-bottom: none;
|
||||
.link.link-animation-disabled();
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
|
@ -42,6 +43,46 @@ a, .link {
|
|||
}
|
||||
}
|
||||
|
||||
a.link-animation-disabled,
|
||||
.link.link-animation-disabled {
|
||||
&:hover {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.func-link-return-animation(@pos) {
|
||||
.link.link-animation-disabled();
|
||||
|
||||
& > i {
|
||||
display: inline-block;
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
&:hover > i {
|
||||
transform: translateX(@pos);
|
||||
}
|
||||
}
|
||||
|
||||
@link-return-animation-offset: 2px;
|
||||
|
||||
.link-return-animation--start {
|
||||
.func-link-return-animation(
|
||||
if((@config-start = right),
|
||||
@link-return-animation-offset,
|
||||
-@link-return-animation-offset
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.link-return-animation--end {
|
||||
.func-link-return-animation(
|
||||
if((@config-start = right),
|
||||
-@link-return-animation-offset,
|
||||
@link-return-animation-offset
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue