Merge pull request #214 from phuocng/box-selector

Box selector

README.md

@@ -26,7 +26,7 @@ By composing them, you can have any possible layout that exists in the real life
 - Clone the project:
 
 ```shell
-$ git clone https://github.com/1milligram/csslayout
+$ git clone https://github.com/phuocng/csslayout
 ```
 
 - Install the dependencies:
@@ -39,10 +39,10 @@ $ npm install
 - Run it on the local:
 
 ```shell
-$ npm run dev
+$ npm run start
 ```
 
-Visit http://localhost:3000 to see it in action.
+Visit http://localhost:8081 to see it in action.
 
 ## Contributing
 

contents/_includes/covers/box-selector.njk

@@ -0,0 +1,6 @@
+<div class="box-selector-container">
+    <div class="box-selector box-selector--selected">{% lines "hor", 5 %}</div>
+    {% for i in range(0, 3) -%}
+    <div class="box-selector">{% lines "hor", 5 %}</div>
+    {%- endfor %}
+</div>

contents/box-selector.md

@@ -0,0 +1,58 @@
+---
+layout: layouts/post.njk
+title: Box selector
+description: Create a box selector with CSS
+keywords: css box selector
+---
+
+## HTML
+
+```html
+<div class="box-selector">...</div>
+
+<!-- The selected variant -->
+<div class="box-selector box-selector--selected">...</div>
+```
+
+## CSS
+
+```css
+.box-selector {
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    padding: .5rem;
+}
+
+.box-selector--selected {
+    /* Change the border color */
+    border: 2px solid #3b82f6;
+
+    /* Used to position the tick */
+    position: relative;
+}
+
+/* The tick */
+.box-selector--selected:before {
+    /* Absolute position */
+    content: '';
+    left: 0.25rem;
+    position: absolute;
+    top: 0.25rem;
+
+    /* Size */
+    height: 1rem;
+    width: 1rem;
+
+    /* Background */
+    background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+```
+
+{% demo %}{% include "covers/box-selector.njk" %}{% enddemo %}
+
+## See also
+
+- [Custom checkbox button](/custom-checkbox-button/)
+- [Custom radio button](/custom-radio-button/)

contents/custom-checkbox-button.md

@@ -63,3 +63,8 @@ keywords: css checkbox, css flexbox
 ```
 
 {% demo %}{% include "covers/custom-checkbox-button.njk" %}{% enddemo %}
+
+## See also
+
+- [Box selector](/box-selector/)
+- [Custom radio button](/custom-radio-button/)

contents/custom-radio-button.md

@@ -67,3 +67,8 @@ keywords: css flexbox, css radio
 ```
 
 {% demo %}{% include "covers/custom-radio-button.njk" %}{% enddemo %}
+
+## See also
+
+- [Box selector](/box-selector/)
+- [Custom checkbox button](/custom-checkbox-button/)

contents/index.njk

@@ -91,6 +91,7 @@ eleventyExcludeFromCollections: true
     <div class="category">
         <h2 class="category__name">Input</h2>
         <div class="category__posts">
+            {% pattern "Box selector" %}{% include "covers/box-selector.njk" %}{% endpattern %}
             {% pattern "Button with icon" %}{% include "covers/button-with-icon.njk" %}{% endpattern %}
             {% pattern "Chip" %}{% include "covers/chip.njk" %}{% endpattern %}
             {% pattern "Custom checkbox button" %}{% include "covers/custom-checkbox-button.njk" %}{% endpattern %}

styles/index.scss

@@ -20,6 +20,7 @@
 @import './patterns/avatar';
 @import './patterns/avatar-list';
 @import './patterns/badge';
+@import './patterns/box-selector';
 @import './patterns/breadcrumb';
 @import './patterns/button-with-icon';
 @import './patterns/card-layout';

styles/patterns/_box-selector.scss

@@ -0,0 +1,35 @@
+/* Demo */
+.box-selector-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 0.5rem;
+    row-gap: 0.5rem;
+    
+    height: 8rem;
+    width: 8rem;
+}
+
+.box-selector {
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    padding: .5rem;
+}
+
+.box-selector--selected {
+    border: 2px solid #3b82f6;
+    position: relative;
+
+    &:before {
+        content: '';
+        left: 0.25rem;
+        position: absolute;
+        top: 0.25rem;
+
+        height: 1rem;
+        width: 1rem;
+
+        background-image: url("data:image/svg+xml,%3Csvg fill='%233b82f6' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'%3E%3C/path%3E%3C/svg%3E");
+        background-position: center center;
+        background-repeat: no-repeat;
+    }
+}