mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-08-09 15:35:25 +02:00
Update icons and border radius
This commit is contained in:
Tanya Fomina
parent
d5f75fbe9f
commit
1c71f82465
10 changed files with 36 additions and 25 deletions
|
|
@ -8,7 +8,7 @@
|
|||
- size: small, default
|
||||
|
||||
Usage example:
|
||||
{% include 'components/button.twig' with {label: 'Label', icon: 'checklist', style: 'secondary', size: 'default'} %}
|
||||
{% include 'components/button.twig' with {label: 'Label', icon: 'check', style: 'secondary', size: 'default'} %}
|
||||
#}
|
||||
|
||||
{% set mainClass = 'docs-button' %}
|
||||
|
|
|
|||
|
|
@ -58,9 +58,9 @@
|
|||
</div>
|
||||
|
||||
<div class="writing-buttons">
|
||||
{% include 'components/button.twig' with {label: 'Save changes', name: 'js-submit-save', icon: 'checklist'} %}
|
||||
{% include 'components/button.twig' with {label: 'Save changes', name: 'js-submit-save', icon: 'check'} %}
|
||||
{% if page._id is not empty %}
|
||||
{% include 'components/button.twig' with {label: 'Delete doc', name: 'js-submit-remove', icon: 'bin', style: 'warning'} %}
|
||||
{% include 'components/button.twig' with {label: 'Delete doc', name: 'js-submit-remove', icon: 'trash', style: 'warning'} %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
</time>
|
||||
{% if isAuthorized == true %}
|
||||
<a href="/page/edit/{{ page._id }}" class="page__header-button">
|
||||
{% include 'components/button.twig' with {label: 'Edit', icon: 'edit', size: 'small'} %}
|
||||
{% include 'components/button.twig' with {label: 'Edit', icon: 'pencil', size: 'small'} %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.docs-button {
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--height);
|
||||
|
|
@ -12,6 +11,22 @@
|
|||
cursor: pointer;
|
||||
transition-property: background-color;
|
||||
transition-duration: 0.1s;
|
||||
border-radius: 8px;
|
||||
|
||||
@supports(-webkit-mask-box-image: url('')){
|
||||
border-radius: 0;
|
||||
-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin-right: 4px;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&--default {
|
||||
--height: 40px;
|
||||
|
|
@ -19,6 +34,13 @@
|
|||
|
||||
&--small {
|
||||
--height: 32px;
|
||||
|
||||
.docs-button__icon {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--primary {
|
||||
|
|
@ -61,14 +83,4 @@
|
|||
&--with-icon {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
margin-right: 4px;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -16,7 +16,3 @@ body {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.25 7H16.25V6.25C16.25 5.65326 16.0129 5.08097 15.591 4.65901C15.169 4.23705 14.5967 4 14 4H12.5C11.9033 4 11.331 4.23705 10.909 4.65901C10.4871 5.08097 10.25 5.65326 10.25 6.25V7H7.25C7.05109 7 6.86032 7.07902 6.71967 7.21967C6.57902 7.36032 6.5 7.55109 6.5 7.75C6.5 7.94891 6.57902 8.13968 6.71967 8.28033C6.86032 8.42098 7.05109 8.5 7.25 8.5H8L8.75 16.75C8.75 17.3467 8.98705 17.919 9.40901 18.341C9.83097 18.7629 10.4033 19 11 19H15.5C16.0967 19 16.669 18.7629 17.091 18.341C17.5129 17.919 17.75 17.3467 17.75 16.75L18.5 8.5H19.25C19.4489 8.5 19.6397 8.42098 19.7803 8.28033C19.921 8.13968 20 7.94891 20 7.75C20 7.55109 19.921 7.36032 19.7803 7.21967C19.6397 7.07902 19.4489 7 19.25 7ZM11.75 6.25C11.75 6.05109 11.829 5.86032 11.9697 5.71967C12.1103 5.57902 12.3011 5.5 12.5 5.5H14C14.1989 5.5 14.3897 5.57902 14.5303 5.71967C14.671 5.86032 14.75 6.05109 14.75 6.25V7H11.75V6.25ZM16.25 16.75C16.25 16.9489 16.171 17.1397 16.0303 17.2803C15.8897 17.421 15.6989 17.5 15.5 17.5H11C10.8011 17.5 10.6103 17.421 10.4697 17.2803C10.329 17.1397 10.25 16.9489 10.25 16.75L9.5 8.5H17L16.25 16.75Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
3
src/frontend/svg/check.svg
Normal file
3
src/frontend/svg/check.svg
Normal file
|
|
@ -0,0 +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>
|
||||
|
After Width: | Height: | Size: 226 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.676 9.432L11.244 12.872L9.924 11.552C9.85228 11.4683 9.76403 11.4002 9.66478 11.3522C9.56553 11.3042 9.45742 11.2772 9.34724 11.273C9.23707 11.2687 9.1272 11.2873 9.02454 11.3275C8.92188 11.3677 8.82865 11.4287 8.75068 11.5067C8.67272 11.5846 8.61171 11.6779 8.57149 11.7805C8.53127 11.8832 8.51271 11.9931 8.51696 12.1032C8.52122 12.2134 8.5482 12.3215 8.59622 12.4208C8.64424 12.52 8.71226 12.6083 8.796 12.68L10.676 14.568C10.7508 14.6421 10.8394 14.7008 10.9369 14.7406C11.0343 14.7804 11.1387 14.8006 11.244 14.8C11.4539 14.7991 11.655 14.7158 11.804 14.568L15.804 10.568C15.879 10.4936 15.9385 10.4051 15.9791 10.3077C16.0197 10.2102 16.0406 10.1056 16.0406 10C16.0406 9.89439 16.0197 9.78982 15.9791 9.69234C15.9385 9.59485 15.879 9.50637 15.804 9.432C15.6541 9.283 15.4513 9.19936 15.24 9.19936C15.0287 9.19936 14.8259 9.283 14.676 9.432ZM12.5 4C10.9178 4 9.37103 4.46919 8.05544 5.34824C6.73985 6.22729 5.71447 7.47672 5.10897 8.93853C4.50347 10.4003 4.34504 12.0089 4.65372 13.5607C4.9624 15.1126 5.72433 16.538 6.84315 17.6569C7.96197 18.7757 9.38743 19.5376 10.9393 19.8463C12.4911 20.155 14.0997 19.9965 15.5615 19.391C17.0233 18.7855 18.2727 17.7602 19.1518 16.4446C20.0308 15.129 20.5 13.5822 20.5 12C20.5 10.9494 20.2931 9.90914 19.891 8.93853C19.489 7.96793 18.8997 7.08601 18.1569 6.34315C17.414 5.60028 16.5321 5.011 15.5615 4.60896C14.5909 4.20693 13.5506 4 12.5 4ZM12.5 18.4C11.2342 18.4 9.99683 18.0246 8.94435 17.3214C7.89188 16.6182 7.07157 15.6186 6.58717 14.4492C6.10277 13.2797 5.97603 11.9929 6.22298 10.7514C6.46992 9.50994 7.07946 8.36957 7.97452 7.47452C8.86958 6.57946 10.0099 5.96992 11.2514 5.72297C12.4929 5.47603 13.7797 5.60277 14.9492 6.08717C16.1186 6.57157 17.1182 7.39187 17.8214 8.44435C18.5246 9.49682 18.9 10.7342 18.9 12C18.9 13.6974 18.2257 15.3252 17.0255 16.5255C15.8253 17.7257 14.1974 18.4 12.5 18.4Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.9 KiB |
3
src/frontend/svg/pencil.svg
Normal file
3
src/frontend/svg/pencil.svg
Normal file
|
|
@ -0,0 +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>
|
||||
|
After Width: | Height: | Size: 277 B |
3
src/frontend/svg/trash.svg
Normal file
3
src/frontend/svg/trash.svg
Normal file
|
|
@ -0,0 +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>
|
||||
|
After Width: | Height: | Size: 305 B |
Loading…
Add table
Add a link
Reference in a new issue