mirror_html/tabler-icons
1
0
Fork 0
mirror of https://github.com/tabler/tabler-icons.git synced 2025-08-31 01:30:04 +02:00
Code Issues Releases Wiki Activity

css fix

Browse Source
This commit is contained in:
codecalm
2020-02-28 12:00:50 +01:00
parent 27bab3ccc8
commit 4fcdf32cff
2 changed files with 35 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
assets/style.scss
View File

@@ -1,11 +1,12 @@
--- ---
--- ---
$breakpoint: (min-width: 50rem); $breakpoint: 50rem;
$primary: #206bc4; $primary: #206bc4;
$border: #eeeeee; $border: #eeeeee;
$muted: #aaaaaa; $muted: #aaaaaa;
$btn-form-height: 2rem; $btn-form-height: 2rem;
$hover: rgba(0, 0, 0, .04);
* { * {
box-sizing: border-box; box-sizing: border-box;
@@ -42,7 +43,7 @@ a {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@media #{$breakpoint} { @media (min-width: #{$breakpoint}) {
flex-direction: row; flex-direction: row;
} }
} }
@@ -55,7 +56,7 @@ a {
width: 15rem; width: 15rem;
margin-top: 2rem; margin-top: 2rem;
@media #{$breakpoint} { @media (min-width: #{$breakpoint}) {
margin-top: 0; margin-top: 0;
margin-left: 2rem; margin-left: 2rem;
flex-direction: row; flex-direction: row;
@@ -69,7 +70,6 @@ a {
} }
.icon-preview-wrap { .icon-preview-wrap {
margin-bottom: 3rem;
position: relative; position: relative;
&:before { &:before {
@@ -100,19 +100,27 @@ a {
.icons-list { .icons-list {
display: flex; display: flex;
margin: -1rem; margin: -.25rem;
}
.icons-list-icon {
margin: .25rem;
width: 2rem;
height: 2rem;
color: inherit;
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
&:hover {
background-color: $hover;
}
.icon { .icon {
display: block; display: block;
margin: .5rem;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
}
svg {
display: block;
width: 100%;
height: 100%;
stroke-width: 2; stroke-width: 2;
} }
} }

22
index.html
View File

@@ -20,7 +20,7 @@
{% include icon.html name=last-icon.slug %} {% include icon.html name=last-icon.slug %}
{% endcapture %} {% endcapture %}
<div class="row"> <div class="row mb">
<div class="col"> <div class="col">
<div class="icon-preview-wrap"> <div class="icon-preview-wrap">
@@ -71,15 +71,23 @@
</div> </div>
<div class="icons-list"> <div>
{% for icon in site.icons %} <div class="icons-list">
<div class="icon" title="{{ icon.slug }}"> {% for icon in site.icons %}
{% assign name = icon.slug %} <a href="#" class="icons-list-icon" title="{{ icon.slug }}">
{% include icon.html name=name %} {% assign name = icon.slug %}
{% include icon.html name=name %}
</a>
{% endfor %}
</div> </div>
{% endfor %}
</div> </div>
</div> </div>
</div> </div>
<script>
(function(){
})();
</script>
</body> </body>
</html> </html>