Dev cursors badges colors (#410)

Dev cursors badges colors

pages/_data/docs.yml

@@ -7,6 +7,7 @@
 - page: buttons
 - page: cards
 - page: carousel
+- page: colors
 - page: cursors
 - page: charts
 - page: divider

pages/_docs/badges.md

@@ -10,21 +10,25 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 {% example %}
 {% for color in site.colors %}
-<span class="badge text-white bg-{{ color[0] }}">{{ color[0] }}</span>
+<span class="badge bg-{{ color[0] }}">{{ color[0] }}</span>
 {% endfor %}
 {% endexample %}
 
 ### Pill badges
 
+To make a pill bagde (with rounded corners) add `.bagde-pill` class.
+
 {% example %}
 {% for color in site.colors %}
-<span class="badge badge-pill text-white bg-{{ color[0] }}">{{ forloop.index }}</span>
+<span class="badge badge-pill bg-{{ color[0] }}">{{ forloop.index }}</span>
 {% endfor %}
 {% endexample %}
 
 
 ### Soft badges
 
+Creates a soft variant of a corresponding contextual badge variation. You can click [here]({% docs_url colors %}) to see the list of available colors.
+
 {% example %}
 {% for color in site.colors %}
 <span class="badge bg-{{ color[0] }}-lt">{{ color[0] }}</span>
@@ -34,6 +38,8 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 ### Links
 
+Make a badge work as a link by putting it into an `<a>` element.
+
 {% example %}
 {% for color in site.colors %}
 <a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
@@ -43,6 +49,8 @@ A small count and labeling component. Please read the [official Bootstrap docume
 
 ### Empty badges
 
+If you don't want your badge to contain any text you can do it by leaving the html element empty.
+
 {% example %}
 {% for color in site.colors %}
 <a href="#" class="badge bg-{{ color[0] }}"></a>

pages/_docs/colors.md

@@ -3,3 +3,10 @@ title: Colors
 menu: docs.colors
 ---
 
+## Base colors
+
+{% include example/colors-table.html %}
+
+## Light colors 
+ 
+{% include example/colors-table.html light=true %}

pages/_docs/cursors.md

@@ -5,6 +5,13 @@ menu: docs.cursors
 
 ### Cursor utilities 
 
+- `.cursor-auto`- cursor style depends on what's inside element
+- `.cursor-pointer` - pointing cursor
+- `.cursor-move` - cursor showing that user can move something
+- `.cursor-not-allowed` - cursor showing that user is not allowed to do something
+- `.cursor-zoom-in` - cursor showing that user can zoom in
+- `.cursor-zoom-out` - cursor showing that user can zoom out
+
 {% example html %}
 <div class="row text-center">
   <div class="col-4 mb-3">

pages/_includes/example/colors-table.html

+{% assign colors = include.colors | default: site.colors %}
+{% assign light = include.light %}
+
+<div class="example">
+   <div class="mb-n3">
+      {% for color in colors %}
+      <div class="row row-sm mb-3 align-items-center">
+         <div class="col-auto">
+            <div class="stamp bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
+         </div>
+         <div class="col">
+            <span class="font-weight-semibold">{{ color[1].title }}</span><br/>
+            <code>bg-{{ color[0] }}{% if light %}-lt{% endif %}</code>
+         </div>
+      </div>
+      {% endfor %}
+   </div>
+</div>
+
+

pages/_plugins/jekyll-filters.rb

@@ -84,6 +84,11 @@ module Jekyll
 
       input.gsub re, repl_str
     end
+
+    def hex_to_rgb(color)
+      r, g, b = color.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/).captures
+      "rgb(#{r.hex}, #{g.hex}, #{b.hex})"
+    end
   end
 end
 

pages/colors.html

----
-title: Colors
-done: true
----
-
-<div class="row">
-	<div class="col-md-6">
-		<div class="card">
-			<div class="card-header">
-				<h3 class="card-title">
-					Default colors
-				</h3>
-			</div>
-			<div class="card-body">
-				<ul class="list-unstyled">
-					{% for color in site.colors %}
-					<li class="d-flex align-items-center mb-3">
-						<div class="stamp bg-{{ color[0] }} text-white mr-3">{{ color[1].name | first_letters | upcase }}</div>
-						<div>
-							<strong>{{ color[1].name }}</strong><br/>
-							<code>.bg-{{ color[0] }}</code>
-						</div>
-					</li>
-					{% endfor %}
-				</ul>
-			</div>
-		</div>
-	</div>
-	<div class="col-md-6">
-		<div class="card">
-			<div class="card-header">
-				<h3 class="card-title">
-					Light colors
-				</h3>
-			</div>
-			<div class="card-body">
-				<ul class="list-unstyled">
-					{% for color in site.colors %}
-					<li class="d-flex align-items-center mb-3">
-						<div class="stamp bg-{{ color[0] }}-lt mr-3">{{ color[1].name | first_letters | upcase }}</div>
-						<div>
-							<strong>{{ color[1].name }} lite</strong><br/>
-							<code>.bg-{{ color[0] }}-lt</code>
-						</div>
-					</li>
-					{% endfor %}
-				</ul>
-			</div>
-		</div>
-	</div>
-</div>