mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-08-09 15:35:25 +02:00
icons and button component updated
This commit is contained in:
Peter Savchenko
parent
83e62e3aa8
commit
ccd352fbd2
10 changed files with 59 additions and 46 deletions
|
|
@ -13,13 +13,23 @@
|
|||
|
||||
{% set mainClass = 'docs-button' %}
|
||||
|
||||
<button name="{{ name }}" class="{{mainClass}} {{mainClass}}--{{style|default('primary')}} {{mainClass}}--{{size|default('default')}} {{icon ? mainClass ~ '--with-icon' : ''}}">
|
||||
|
||||
{% set tag = 'button' %}
|
||||
|
||||
{% if url is not empty %}
|
||||
{% set tag = 'a' %}
|
||||
{% endif %}
|
||||
|
||||
<{{tag}}
|
||||
{{ name is not empty ? 'name="' ~ name ~ '"': '' }}
|
||||
class="{{mainClass}} {{mainClass}}--{{style|default('primary')}} {{mainClass}}--{{size|default('default')}} {{icon ? mainClass ~ '--with-icon' : ''}}"
|
||||
{{ url is not empty ? 'href="' ~ url ~ '"' : '' }}
|
||||
>
|
||||
{% if icon %}
|
||||
<div class="{{mainClass}}__icon">
|
||||
{{ svg(icon) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<span>
|
||||
{{ label }}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{{ label }}
|
||||
</{{tag}}>
|
||||
|
|
|
|||
|
|
@ -5,14 +5,12 @@
|
|||
<ul class="docs-header__menu">
|
||||
{% if isAuthorized == true %}
|
||||
<li class="docs-header__menu-add">
|
||||
<a href="/page/new">
|
||||
{% include 'components/button.twig' with {label: 'Add page', icon: 'plus', size: 'small'} %}
|
||||
</a>
|
||||
{% include 'components/button.twig' with {label: 'Add page', icon: 'plus', size: 'small', url: '/page/new'} %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% for option in config.menu %}
|
||||
<li>
|
||||
<a
|
||||
<a class="docs-header__menu-link"
|
||||
{% if option.uri %}
|
||||
href="{{ option.uri }}"
|
||||
{% else %}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
{% block body %}
|
||||
<style>
|
||||
.docs-header__button {
|
||||
.docs-header__menu-add {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.docs-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--height);
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
|
|
@ -19,11 +20,14 @@
|
|||
}
|
||||
|
||||
&__icon {
|
||||
margin-right: 6px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 4px;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -34,13 +38,7 @@
|
|||
|
||||
&--small {
|
||||
--height: 32px;
|
||||
|
||||
.docs-button__icon {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
|
|
@ -81,6 +79,6 @@
|
|||
}
|
||||
|
||||
&--with-icon {
|
||||
padding-left: 10px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
line-height: 40px;
|
||||
}
|
||||
|
||||
a {
|
||||
&__menu-link,
|
||||
&__logo {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
|
|
@ -55,24 +55,22 @@
|
|||
a {
|
||||
@media (--mobile) {
|
||||
font-size: 0;
|
||||
padding: 8px;
|
||||
padding: 0 4px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-button__icon {
|
||||
@media (--mobile) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a:not(.docs-header__button) {
|
||||
color: inherit;
|
||||
|
||||
&-link {
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
@apply --button;
|
||||
@apply --button-primary;
|
||||
margin: auto 30px auto auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,3 +16,12 @@ body {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.374 7.293a1 1 0 0 1 0 1.414L11.04 16.04a1 1 0 0 1-1.414 0l-3.333-3.333a1 1 0 1 1 1.414-1.414l2.626 2.626 6.627-6.626a1 1 0 0 1 1.414 0Z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 226 B After Width: | Height: | Size: 274 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.917 6.75a.9.9 0 0 0-.637.264l-7.734 7.734-.477 1.75 1.75-.478 7.734-7.734a.899.899 0 0 0-.636-1.536Zm-.919-1.317a2.4 2.4 0 0 1 2.616 3.914l-7.875 7.875a.75.75 0 0 1-.333.193l-3.209.875a.75.75 0 0 1-.92-.92l.874-3.21a.75.75 0 0 1 .194-.332l7.875-7.875a2.4 2.4 0 0 1 .778-.52Z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 277 B After Width: | Height: | Size: 413 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5a1 1 0 0 0-1 1v5H6a1 1 0 1 0 0 2h5v5a1 1 0 1 0 2 0v-5h5a1 1 0 1 0 0-2h-5V6a1 1 0 0 0-1-1Z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 195 B After Width: | Height: | Size: 217 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||
</svg>
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.75 8h-3v-.75A2.25 2.25 0 0 0 12.5 5H11a2.25 2.25 0 0 0-2.25 2.25V8h-3a.75.75 0 0 0 0 1.5h.75l.75 8.25A2.25 2.25 0 0 0 9.5 20H14a2.25 2.25 0 0 0 2.25-2.25L17 9.5h.75a.75.75 0 1 0 0-1.5Zm-7.5-.75A.75.75 0 0 1 11 6.5h1.5a.75.75 0 0 1 .75.75V8h-3v-.75Zm4.5 10.5a.75.75 0 0 1-.75.75H9.5a.75.75 0 0 1-.75-.75L8 9.5h7.5l-.75 8.25Z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 305 B After Width: | Height: | Size: 422 B |
Loading…
Add table
Add a link
Reference in a new issue