Skip to content

Commit

Permalink
Add section in lookbook for op-icons
Browse files Browse the repository at this point in the history
  • Loading branch information
oliverguenther committed Feb 8, 2024
1 parent ebb0486 commit bdd5391
Showing 1 changed file with 53 additions and 0 deletions.
53 changes: 53 additions & 0 deletions lookbook/docs/styles/02-op-icons.md.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
---
title: OP Icon Font
---

<%= include_spot_assets %>

# OpenProject icon font

For use outside primer pages, use these icon fonts

<style>
.icons {
display: flex;
flex-wrap: wrap;
margin-right: -1rem;
}

.icons--icon {
border-radius: 2px;
border: 1px solid #eeeeee;
margin-bottom: 1rem;
margin-right: 1rem;
display: flex;
flex-direction: column;
flex-basis: 120px;
flex-grow: 0;
flex-shrink: 0;
min-width: 80px;
max-width: 180px;
text-align: center;
padding: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
}

.icons--name {
font-weight: bold;
margin-top: 0.5rem;
}
</style>

<div class="icons">
<% Dir[Rails.root.join('frontend/src/app/spot/icon-font/icons/*').to_s].each do |path| %>
<% name = File.basename(path, '.*') %>
<div class="icons--icon">
<div class="icons--preview">
<i class="icon icon-<%= name %>"></i>
</div>
<div class="icons--name"><%= name %></div>
</div>
<% end %>
</div>

0 comments on commit bdd5391

Please sign in to comment.