Skip to content
This repository has been archived by the owner on Mar 11, 2020. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
tylim88 committed May 10, 2019
1 parent 4b48dae commit 37aa692
Showing 1 changed file with 28 additions and 22 deletions.
50 changes: 28 additions & 22 deletions src/assets/scss/blk-design-system-react/custom/_icons.scss
Original file line number Diff line number Diff line change
@@ -1,57 +1,62 @@
// issues: https://github.com/creativetimofficial/blk-design-system-react/issues/2

.icon {
width: $icon-size;
height: $icon-size;

i, svg {
font-size: $icon-size - .75;
i,
svg {
font-size: $icon-size - 0.75;
}
}

.icon + .icon-text {
padding-left: 1rem;
width: calc(100% - #{$icon-size} - 1);
// width: calc(100% - #{$icon-size} - 1);
}

.icon-xl {
width: $icon-size-xl;
height: $icon-size-xl;

i, svg {
font-size: $icon-size-xl - .75;
i,
svg {
font-size: $icon-size-xl - 0.75;
}
}

.icon-xl + .icon-text {
width: calc(100% - $icon-size-xl - 1);
// width: calc(100% - $icon-size-xl - 1);
}

.icon-lg {
width: $icon-size-lg;
height: $icon-size-lg;

i, svg {
font-size: $icon-size-lg - .75;
i,
svg {
font-size: $icon-size-lg - 0.75;
}
}

.icon-lg + .icon-text {
width: calc(100% - $icon-size-lg - 1);
// width: calc(100% - $icon-size-lg - 1);
}

.icon-sm {
width: $icon-size-sm;
height: $icon-size-sm;

i, svg {
font-size: $icon-size-sm - .75;
i,
svg {
font-size: $icon-size-sm - 0.75;
}
}

.icon-sm + .icon-text {
width: calc(100% - $icon-size-sm - 1);
// width: calc(100% - $icon-size-sm - 1);
}


// Icons included in shapes
.icon-shape {
padding: 12px;
Expand All @@ -60,33 +65,34 @@
align-items: center;
justify-content: center;
border-radius: 50%;


i, svg {
i,
svg {
font-size: 1.25rem;
}

&.icon-lg {
i, svg {
i,
svg {
font-size: 1.625rem;
}
}
}

&.icon-sm {
i, svg {
font-size: .875rem;
}
i,
svg {
font-size: 0.875rem;
}
}

svg {
width: 30px;
height: 30px;
}

}

@each $color, $value in $theme-colors {
.icon-shape-#{$color} {
@include icon-shape-variant(theme-color($color));
}
}
}

0 comments on commit 37aa692

Please sign in to comment.