1
0
Fork 0
mirror of synced 2024-06-28 11:10:46 +12:00

Adding links animation

This commit is contained in:
AnatoleLucet 2020-06-09 16:43:24 +02:00
parent 48a3e063c6
commit 960136a823
22 changed files with 104 additions and 82 deletions

View file

@ -1,6 +1,6 @@
<div class="cover"> <div class="cover">
<h1 class="zone xl margin-bottom-large"> <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 /> <br />
<span>Your Account</span> <span>Your Account</span>
@ -26,7 +26,7 @@
<br /> <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 /> <br />
@ -317,4 +317,4 @@
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>

View file

@ -1,5 +1,5 @@
<header class="clear"> <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.svg" alt="Appwrite Light Logo" class="force-light" />
<img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" /> <img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" />
</a> </a>
@ -34,10 +34,10 @@
data-failure-param-trigger-events="account.deleteSession"> data-failure-param-trigger-events="account.deleteSession">
<div class="console-back"> <div class="console-back">
<a href="/console">Back to Console &nbsp;<i class="icon-right-open"></i></a> <a href="/console" class="link-return-animation--end">Back to Console &nbsp;<i class="icon-right-open"></i></a>
</div> </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" /> <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> <span class="name pull-end desktops-only" data-ls-bind="{{account.name}}"></span>
</div> </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"> <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"> <ul class="margin-top-large arrow-end">
<li> <li>
<a href="/console/account"><i class="icon-user"></i> &nbsp; Your Account</a> <a href="/console/account" class="link-animation-disabled"><i class="icon-user"></i> &nbsp; Your Account</a>
</li> </li>
<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> &nbsp; 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> &nbsp; Change Theme
<div class="pull-end switch-theme"> <div class="pull-end switch-theme">
<button data-general-theme <button data-general-theme
data-analytics-event="click" data-analytics-event="click"
@ -66,7 +66,7 @@
</div> </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"> <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-event="click"
data-analytics-category="console/navigation" data-analytics-category="console/navigation"
data-analytics-label="Logo Link"> data-analytics-label="Logo Link">
@ -83,7 +83,8 @@
<a data-ls-attrs="href=/console/home?project={{router.params.project}}" <a data-ls-attrs="href=/console/home?project={{router.params.project}}"
data-analytics-event="click" data-analytics-event="click"
data-analytics-category="console/navigation" data-analytics-category="console/navigation"
data-analytics-label="Home Link"> data-analytics-label="Home Link"
class="link-animation-disabled">
<i class="icon-home"></i> <i class="icon-home"></i>
Home Home
</a> </a>
@ -97,7 +98,8 @@
<a data-ls-attrs="href=/console/database?project={{router.params.project}}" <a data-ls-attrs="href=/console/database?project={{router.params.project}}"
data-analytics-event="click" data-analytics-event="click"
data-analytics-category="console/navigation" data-analytics-category="console/navigation"
data-analytics-label="Database Link"> data-analytics-label="Database Link"
class="link-animation-disabled">
<i class="icon-database"></i> <i class="icon-database"></i>
Database Database
</a> </a>
@ -106,7 +108,8 @@
<a data-ls-attrs="href=/console/storage?project={{router.params.project}}" <a data-ls-attrs="href=/console/storage?project={{router.params.project}}"
data-analytics-event="click" data-analytics-event="click"
data-analytics-category="console/navigation" data-analytics-category="console/navigation"
data-analytics-label="Storage Link"> data-analytics-label="Storage Link"
class="link-animation-disabled">
<i class="icon-folder"></i> <i class="icon-folder"></i>
Storage Storage
</a> </a>
@ -115,7 +118,8 @@
<a data-ls-attrs="href=/console/users?project={{router.params.project}}" <a data-ls-attrs="href=/console/users?project={{router.params.project}}"
data-analytics-event="click" data-analytics-event="click"
data-analytics-category="console/navigation" data-analytics-category="console/navigation"
data-analytics-label="Users Link"> data-analytics-label="Users Link"
class="link-animation-disabled">
<i class="icon-users"></i> <i class="icon-users"></i>
Users Users
</a> </a>
@ -129,7 +133,8 @@
<a data-ls-attrs="href=/console/tasks?project={{router.params.project}}" <a data-ls-attrs="href=/console/tasks?project={{router.params.project}}"
data-analytics-event="click" data-analytics-event="click"
data-analytics-category="console/navigation" data-analytics-category="console/navigation"
data-analytics-label="Tasks Link"> data-analytics-label="Tasks Link"
class="link-animation-disabled">
<i class="icon-clock"></i> <i class="icon-clock"></i>
Tasks Tasks
</a> </a>
@ -138,7 +143,8 @@
<a data-ls-attrs="href=/console/webhooks?project={{router.params.project}}" <a data-ls-attrs="href=/console/webhooks?project={{router.params.project}}"
data-analytics-event="click" data-analytics-event="click"
data-analytics-category="console/navigation" data-analytics-category="console/navigation"
data-analytics-label="Webhooks Links"> data-analytics-label="Webhooks Links"
class="link-animation-disabled">
<i class="icon-link"></i> <i class="icon-link"></i>
Webhooks Webhooks
</a> </a>
@ -147,7 +153,8 @@
<a data-ls-attrs="href=/console/keys?project={{router.params.project}}" <a data-ls-attrs="href=/console/keys?project={{router.params.project}}"
data-analytics-event="click" data-analytics-event="click"
data-analytics-category="console/navigation" 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> <i class="icon-key-inv"></i>
API Keys API Keys
</a> </a>
@ -160,7 +167,8 @@
<a data-ls-attrs="href=/console/settings?project={{router.params.project}}" <a data-ls-attrs="href=/console/settings?project={{router.params.project}}"
data-analytics-event="click" data-analytics-event="click"
data-analytics-category="console/navigation" 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> <i class="icon-cog"></i> Settings</a>
</li> </li>
</ul> </ul>
@ -214,4 +222,4 @@
<button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button> <button type="submit">Create</button> &nbsp; <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
</footer> </footer>
</form> </form>
</div> </div>

View file

@ -12,7 +12,7 @@ $rules = $collection->getAttribute('rules', []);
<div class="cover"> <div class="cover">
<h1 class="zone xl margin-bottom-large"> <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 /> <br />
@ -516,4 +516,4 @@ $rules = $collection->getAttribute('rules', []);
data-event="load,database.createCollection,database.updateCollection,database.deleteCollection" data-event="load,database.createCollection,database.updateCollection,database.deleteCollection"
data-scope="sdk" data-scope="sdk"
data-name="project-collections"> data-name="project-collections">
</div> </div>

View file

@ -163,7 +163,7 @@ $collections = [];
<div class="cover"> <div class="cover">
<h1 class="zone xl margin-bottom-large"> <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 /> <br />
@ -315,4 +315,4 @@ $collections = [];
</li> --> </li> -->
</ul> </ul>
</div> </div>
</div> </div>

View file

@ -1,6 +1,6 @@
<div class="cover"> <div class="cover">
<h1 class="zone xl 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 /> <br />
<span>Database</span> <span>Database</span>
@ -65,7 +65,7 @@
<div data-ls-if="0 != {{project-collections.sum}}"> <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"> <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"> <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">&nbsp;</div> <div data-ls-bind="{{collection.name}}" class="text-one-liner margin-bottom text-bold">&nbsp;</div>
<i class="icon-right-open"></i> <i class="icon-right-open"></i>
@ -109,4 +109,4 @@
</li> --> </li> -->
</ul> </ul>
</div> </div>
</div> </div>

View file

@ -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"> <ul data-ls-loop="console-projects" data-ls-as="project" data-ls-append="" class="tiles cell-3" style="visibility: hidden">
<li class="margin-bottom"> <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">&nbsp;</div> <div data-ls-bind="{{project.name}}" class="text-one-liner margin-bottom-tiny text-bold">&nbsp;</div>
<p data-ls-if="({{project.platforms.length}})" class="text-fade text-size-small" data-ls-bind="{{project.platforms.length}} apps"></p> <p data-ls-if="({{project.platforms.length}})" class="text-fade text-size-small" data-ls-bind="{{project.platforms.length}} apps"></p>
@ -102,4 +102,4 @@ $home = $this->getParam('home', '');
</div> </div>
</div> </div>
</div> </div>
</section> </section>

View file

@ -3,7 +3,7 @@ $scopes = $this->getParam('scopes', []);
?> ?>
<div class="cover margin-bottom-large"> <div class="cover margin-bottom-large">
<h1 class="zone xl 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 /> <br />
<span>API Keys</span> <span>API Keys</span>
@ -167,4 +167,4 @@ $scopes = $this->getParam('scopes', []);
</form> </form>
</div> </div>
</div> </div>
</div> </div>

View file

@ -6,7 +6,7 @@ $customDomainsTarget = $this->getParam('customDomainsTarget', false);
?> ?>
<div class="cover"> <div class="cover">
<h1 class="zone xl 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 /> <br />
<span>Settings</span> <span>Settings</span>
@ -500,4 +500,4 @@ $customDomainsTarget = $this->getParam('customDomainsTarget', false);
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>

View file

@ -5,7 +5,7 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
?> ?>
<div class="cover"> <div class="cover">
<h1 class="zone xl 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 /> <br />
<span>Storage</span> <span>Storage</span>
@ -240,4 +240,4 @@ $fileLimitHuman = $this->getParam('fileLimitHuman', 0);
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>

View file

@ -1,6 +1,6 @@
<div class="cover margin-bottom-large"> <div class="cover margin-bottom-large">
<h1 class="zone xl 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 /> <br />
<span>Tasks</span> <span>Tasks</span>
@ -346,4 +346,4 @@
</form> </form>
</div> </div>
</div> </div>
</div> </div>

View file

@ -4,7 +4,7 @@ $providers = $this->getParam('providers', []);
<div class="cover"> <div class="cover">
<h1 class="zone xl 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 /> <br />
<span>Users</span> <span>Users</span>
@ -416,4 +416,4 @@ $providers = $this->getParam('providers', []);
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>

View file

@ -8,7 +8,7 @@
<div class="cover"> <div class="cover">
<h1 class="zone xl margin-bottom-large"> <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 /> <br />
<span data-ls-bind="{{user.name}}">&nbsp;</span> <span data-ls-bind="{{user.name}}">&nbsp;</span>
@ -255,4 +255,4 @@
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>

View file

@ -5,7 +5,7 @@ $events = array_keys($this->getParam('events', []));
?> ?>
<div class="cover margin-bottom-large"> <div class="cover margin-bottom-large">
<h1 class="zone xl 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 /> <br />
<span>Webhooks</span> <span>Webhooks</span>
@ -227,4 +227,4 @@ $events = array_keys($this->getParam('events', []));
</form> </form>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,6 +1,6 @@
<div class="logo text-align-center margin-bottom-xl"> <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.svg" alt="Appwrite Light Logo" class="force-light" />
<img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" /> <img src="/images/appwrite-footer-dark.svg" alt="Appwrite Dark Logo" class="force-dark" />
</a> </a>
</div> </div>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -334,9 +334,6 @@ a.box {
} }
a.box:hover { a.box:hover {
border-bottom: none;
border-right: none;
border-left: none;
box-shadow: 0 0 1px rgba(0, 0, 0, .2); box-shadow: 0 0 1px rgba(0, 0, 0, .2);
opacity: .7; opacity: .7;
} }
@ -362,4 +359,4 @@ a.box:hover {
bottom: 0; bottom: 0;
.func-start(-6px); .func-start(-6px);
} }
} }

View file

@ -16,10 +16,6 @@ header {
margin: 7px 0; margin: 7px 0;
display: block; display: block;
&:hover {
border-bottom: none;
}
img { img {
display: block; display: block;
} }
@ -35,10 +31,6 @@ header {
.account { .account {
.func-margin-start(25px); .func-margin-start(25px);
&:hover {
border-bottom: none;
}
} }
.avatar { .avatar {
@ -113,4 +105,4 @@ header {
} }
} }
} }
} }

View file

@ -36,7 +36,6 @@ button,
&:hover, &:hover,
&:focus { &:focus {
background: var(--config-color-focus-hover); background: var(--config-color-focus-hover);
border-bottom: none;
} }
&.fly { &.fly {
@ -175,10 +174,6 @@ button,
padding: 0; padding: 0;
.func-padding-end(0) !important; .func-padding-end(0) !important;
&:hover {
border-bottom: dotted 1px var(--config-color-link);
}
&:focus { &:focus {
box-shadow: inherit; box-shadow: inherit;
} }
@ -1300,4 +1295,4 @@ ol {
.pull-start; .pull-start;
} }
} }
} }

View file

@ -130,10 +130,6 @@
.account { .account {
.func-margin-start(25px); .func-margin-start(25px);
.text-one-liner; .text-one-liner;
&:hover {
border-bottom: none;
}
} }
.switch-theme { .switch-theme {
@ -189,11 +185,6 @@
height: 39px; height: 39px;
padding: 15px 20px; padding: 15px 20px;
display: block; display: block;
border-bottom: none;
&:hover {
border-bottom: none;
}
img { img {
display: inline-block; display: inline-block;

View file

@ -7,11 +7,9 @@ html.home {
.logo { .logo {
a { a {
display: block; display: block;
border-bottom: none;
&:hover { &:hover {
opacity: .8; opacity: .8;
border-bottom: none;
} }
} }
@ -30,4 +28,4 @@ html.home {
main { main {
min-height: 400px; min-height: 400px;
} }
} }

View file

@ -17,11 +17,12 @@ a, .link {
text-decoration: none; text-decoration: none;
border-left: 2px solid transparent; border-left: 2px solid transparent;
border-right: 2px solid transparent; border-right: 2px solid transparent;
border-bottom: solid 1px transparent; transition: 200ms;
display: inline-block;
cursor: pointer;
&:hover { &:hover {
border-bottom: dotted 1px var(--config-color-link); transform: translateY(-2px);
cursor: pointer;
} }
&.disabled { &.disabled {
@ -29,11 +30,11 @@ a, .link {
} }
&.disabled:hover { &.disabled:hover {
border-bottom: none; .link.link-animation-disabled();
} }
&.tag:hover { &.tag:hover {
border-bottom: none; .link.link-animation-disabled();
opacity: .9; 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 { b, strong {
font-weight: 500; font-weight: 500;
} }
@ -196,4 +237,4 @@ small {
.icon-dot-3:before { .icon-dot-3:before {
.func-rotate(90deg); .func-rotate(90deg);
} }