Fix delete element

CHANGELOG.md

@@ -11,6 +11,7 @@
 * Remove table `.is-icon` and `.is-link`
 * Add `.content` table
 * Fix inputs with icons
+* Input icons require the `.icon` container
 
 ## 0.2.2
 

docs/_includes/subnav-elements.html

@@ -10,6 +10,9 @@
       <a class="nav-item is-tab {% if page.doc-subtab == 'content' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/content/">
         Content
       </a>
+      <a class="nav-item is-tab {% if page.doc-subtab == 'delete' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/delete/">
+        Delete
+      </a>
       <a class="nav-item is-tab {% if page.doc-subtab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/form/">
         Form
       </a>

docs/bulma-docs.sass

@@ -357,6 +357,9 @@ $structure-invert: $danger-invert
   .expand
     border-right-width: 1px
     right: 50px
+  +tablet
+    pre
+      white-space: pre-wrap
 
 +tablet
   .section:not(.is-fullwidth) > .example:not(.is-fullwidth)

docs/css/bulma-docs.css

@@ -2184,7 +2184,7 @@ a.box:active {
 .notification {
   background-color: whitesmoke;
   border-radius: 3px;
-  padding: 1.25rem 1.5rem;
+  padding: 1.25rem 2.5rem 1.25rem 1.5rem;
   position: relative;
 }
 
@@ -2192,17 +2192,10 @@ a.box:active {
   margin-bottom: 1.5rem;
 }
 
-.notification:after {
-  clear: both;
-  content: " ";
-  display: table;
-}
-
 .notification .delete {
-  border-radius: 0 3px;
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 0.5em;
+  top: 0.5em;
 }
 
 .notification .title,
@@ -2659,7 +2652,7 @@ a.box:active {
   user-select: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  background-color: rgba(10, 10, 10, 0.1);
+  background-color: rgba(10, 10, 10, 0.2);
   border: none;
   border-radius: 290486px;
   cursor: pointer;
@@ -2694,8 +2687,12 @@ a.box:active {
   width: 2px;
 }
 
-.delete:hover {
-  background-color: rgba(10, 10, 10, 0.2);
+.delete:hover, .delete:focus {
+  background-color: rgba(10, 10, 10, 0.3);
+}
+
+.delete:active {
+  background-color: rgba(10, 10, 10, 0.4);
 }
 
 .delete.is-small {
@@ -3460,7 +3457,7 @@ a.box:active {
   user-select: none;
   -moz-appearance: none;
   -webkit-appearance: none;
-  background-color: rgba(10, 10, 10, 0.1);
+  background-color: rgba(10, 10, 10, 0.2);
   border: none;
   border-radius: 290486px;
   cursor: pointer;
@@ -3501,8 +3498,12 @@ a.box:active {
   width: 2px;
 }
 
-.modal-close:hover {
-  background-color: rgba(10, 10, 10, 0.2);
+.modal-close:hover, .modal-close:focus {
+  background-color: rgba(10, 10, 10, 0.3);
+}
+
+.modal-close:active {
+  background-color: rgba(10, 10, 10, 0.4);
 }
 
 .modal-close.is-small {
@@ -5954,3 +5955,530 @@ a.panel-block:hover {
 .footer a:not(.icon):hover, .footer a:visited:not(.icon):hover {
   border-bottom-color: #00d1b2;
 }
+
+@media screen and (min-width: 769px) {
+  .button small {
+    color: #4a4a4a;
+    left: 0;
+    margin-top: 10px;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+  }
+}
+
+body.page-grid .column > .notification {
+  padding-left: 0;
+  padding-right: 0;
+  text-align: center;
+}
+
+@media screen and (min-width: 769px) {
+  .header-item .button + .button {
+    margin-left: 0.75rem;
+  }
+}
+
+svg {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+#carbon {
+  max-width: 340px;
+  min-height: 130px;
+  padding: 15px;
+}
+
+@media screen and (min-width: 769px) {
+  #carbon {
+    margin-left: auto;
+    margin-right: auto;
+    width: 340px;
+  }
+}
+
+#carbonads {
+  text-align: left;
+}
+
+#carbonads a:hover {
+  text-decoration: underline;
+}
+
+#carbonads span {
+  display: block;
+}
+
+#carbonads .carbon-img {
+  float: left;
+  height: 100px;
+  width: 130px;
+}
+
+#carbonads .carbon-img img {
+  display: block;
+}
+
+#carbonads .carbon-text {
+  display: block;
+  color: #363636;
+  margin-left: 145px;
+}
+
+#carbonads .carbon-poweredby {
+  font-size: 0.75rem;
+  margin-left: 15px;
+}
+
+#github {
+  color: #333333;
+  border-color: #333333;
+}
+
+#github:hover {
+  background: #333333;
+  border-color: #333333;
+  color: white;
+}
+
+#twitter {
+  color: #55acee;
+  border-color: #55acee;
+}
+
+#twitter:hover {
+  background: #55acee;
+  border-color: #55acee;
+  color: white;
+}
+
+@keyframes floatUp {
+  0% {
+    box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
+    transform: scale(0.86);
+  }
+  67% {
+    box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+    transform: scale(1);
+  }
+  100% {
+    box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+    transform: scale(1);
+  }
+}
+
+@keyframes strokePath {
+  from {
+    stroke-dashoffset: 880;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.86);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+    transform: scale(0.86);
+  }
+  67% {
+    opacity: 1;
+    transform: scale(0.86);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+#b {
+  animation-delay: 1s;
+  animation-duration: 1.5s;
+  animation-fill-mode: both;
+  animation-name: floatUp;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+  border-radius: 24px;
+  display: inline-block;
+  height: 240px;
+  margin-bottom: 40px;
+  position: relative;
+  vertical-align: top;
+  width: 240px;
+}
+
+#b svg {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  display: block;
+  height: 240px;
+  width: 240px;
+}
+
+#b svg:first-child {
+  animation-duration: 1.5s;
+  animation-fill-mode: both;
+  animation-name: fadeOut;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+}
+
+#b svg:first-child g {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation-name: strokePath;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+  fill: none;
+  stroke: #00d1b2;
+  stroke-dasharray: 880;
+  stroke-width: 2px;
+}
+
+#b svg:last-child {
+  animation-delay: 1s;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation-name: fadeIn;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+}
+
+#b svg:last-child g {
+  fill: #00d1b2;
+}
+
+@media screen and (max-width: 768px) {
+  #b {
+    border-radius: 16px;
+    height: 160px;
+    width: 160px;
+  }
+}
+
+#bulma {
+  animation: slideDown 500ms both;
+  animation-delay: 1s;
+}
+
+#modern-framework {
+  animation: slideUp 500ms both;
+  animation-delay: 1.2s;
+}
+
+#npm {
+  animation: fadeIn 500ms both;
+  animation-delay: 1.4s;
+  background: none;
+  margin: -10px 0 20px;
+}
+
+#npm code {
+  border-radius: 3px;
+  color: #00d1b2;
+  display: inline-block;
+  font-size: 16px;
+  padding: 16px 32px;
+}
+
+#ghbtns {
+  animation: slideDown 500ms both;
+  animation-delay: 1.6s;
+}
+
+html.route-index #carbon {
+  animation: slideUp 500ms both;
+  animation-delay: 1.8s;
+}
+
+#download {
+  animation: fadeIn 500ms both;
+  animation-delay: 2s;
+}
+
+#grid .notification {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+#message {
+  display: none;
+}
+
+#tweet {
+  background: white;
+  border-radius: 5px;
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+  padding: 1.5rem;
+}
+
+#mc_embed_signup .control {
+  margin-bottom: 0;
+}
+
+#mc_embed_signup .notification {
+  margin-top: 0.75rem;
+}
+
+#social {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 1em;
+  justify-content: center;
+}
+
+#social a {
+  display: inline-block;
+  font-size: 11px;
+  height: 20px;
+  line-height: 20px;
+  margin: 5px;
+}
+
+#social iframe {
+  margin: 5px;
+}
+
+#images tr td:nth-child(2) {
+  width: 320px;
+}
+
+.color {
+  display: inline-block;
+  float: left;
+  height: 18px;
+  margin-right: 5px;
+  width: 18px;
+}
+
+.example,
+.structure {
+  border: 1px solid #ffdd57;
+  border-top-right-radius: 3px;
+  color: rgba(0, 0, 0, 0.7);
+  padding: 1.25rem 1.5rem;
+  position: relative;
+}
+
+.example:not(:first-child),
+.structure:not(:first-child) {
+  margin-top: 2rem;
+}
+
+.example:not(:last-child),
+.structure:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+.example:before,
+.structure:before {
+  background: #ffdd57;
+  border-radius: 3px 3px 0 0;
+  bottom: 100%;
+  content: "Example";
+  display: inline-block;
+  font-size: 7px;
+  font-weight: bold;
+  left: -1px;
+  letter-spacing: 1px;
+  padding: 3px 5px;
+  position: absolute;
+  text-transform: uppercase;
+  vertical-align: top;
+}
+
+@media screen and (min-width: 769px) {
+  .example.is-fullwidth,
+  .structure.is-fullwidth {
+    border-left: none;
+    border-right: none;
+    padding: 0;
+  }
+}
+
+.example + .highlight {
+  border: 1px solid #ffdd57;
+  border-radius: 0 0 3px 3px;
+  border-top: none;
+  margin-top: -1.5rem;
+}
+
+.example + .highlight pre {
+  max-height: 600px;
+}
+
+.example + .highlight:not(:last-child) {
+  margin-bottom: 3rem;
+}
+
+.structure {
+  border-color: #ff3860;
+  border-radius: 3px;
+  padding: 1.5rem;
+}
+
+.structure:before {
+  background: #ff3860;
+  color: #fff;
+  content: "Structure";
+}
+
+.structure-item {
+  position: relative;
+}
+
+.structure-item:before {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: rgba(10, 10, 10, 0.7);
+  background: whitesmoke;
+  border: 1px solid #dbdbdb;
+  content: "";
+  display: block;
+  z-index: 1;
+}
+
+.structure-item:after {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  align-items: center;
+  content: attr(title);
+  display: flex;
+  font-family: "Inconsolata", "Consolas", "Monaco", monospace;
+  font-size: 11px;
+  justify-content: center;
+  padding: 3px 5px;
+  z-index: 2;
+}
+
+.structure-item.is-structure-container {
+  padding: 1.5rem 0.75rem 0.75rem;
+}
+
+.structure-item.is-structure-container:after {
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 0.5rem 0.75rem;
+}
+
+.highlight {
+  position: relative;
+}
+
+.highlight .copy,
+.highlight .expand {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background: white;
+  border: solid #dbdbdb;
+  border-width: 0 0 1px 1px;
+  color: #7a7a7a;
+  cursor: pointer;
+  outline: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.highlight .copy:hover,
+.highlight .expand:hover {
+  border-color: #ff3860;
+  color: #ff3860;
+}
+
+.highlight .expand {
+  border-right-width: 1px;
+  right: 50px;
+}
+
+@media screen and (min-width: 769px) {
+  .highlight pre {
+    white-space: pre-wrap;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .section:not(.is-fullwidth) > .example:not(.is-fullwidth) {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+  .section:not(.is-fullwidth) > .example:not(.is-fullwidth) + .highlight {
+    margin-left: 1.5rem;
+    margin-right: 1.5rem;
+  }
+}
+
+.section.is-fullwidth {
+  padding: 0 !important;
+}
+
+.section.is-fullwidth .example {
+  border-left: none;
+  border-radius: 0;
+  border-right: none;
+  padding: 0;
+}
+
+.section.is-fullwidth .example + .highlight {
+  border-left: none;
+  border-radius: 0;
+  border-right: none;
+}
+
+#newsletter .input {
+  border-color: white;
+  box-shadow: none;
+}
+
+html ::-moz-selection {
+  background: #00d1b2;
+  color: #fff;
+}
+
+html ::selection {
+  background: #00d1b2;
+  color: #fff;
+}

docs/documentation/elements/delete.html

@@ -0,0 +1,95 @@
+---
+layout: documentation
+doc-tab: elements
+doc-subtab: delete
+---
+
+{% include subnav-elements.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Delete</h1>
+    <h2 class="subtitle">
+      A versatile <strong>delete</strong> cross
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>
+        The <code>.delete</code> element is a stand-alone element that can be used in different contexts.
+      </p>
+    </div>
+
+{% capture cross_example %}
+<a class="delete"></a>
+{% endcapture %}
+<div class="columns">
+<div class="column">
+  <div class="content">
+    <p>
+      On its own, it's a simple circle with a cross:
+    </p>
+  </div>
+  {{cross_example}}
+</div>
+<div class="column">
+{% highlight html %}
+{{cross_example}}
+{% endhighlight %}
+</div>
+</div>
+
+{% capture cross_sizes_example %}
+<a class="delete is-small"></a>
+<a class="delete"></a>
+<a class="delete is-medium"></a>
+<a class="delete is-large"></a>
+{% endcapture %}
+<div class="columns">
+<div class="column">
+  <div class="content">
+    <p>
+      It comes in <strong>4 sizes</strong>:
+    </p>
+  </div>
+  {{cross_sizes_example}}
+</div>
+<div class="column">
+{% highlight html %}
+{{cross_sizes_example}}
+{% endhighlight %}
+</div>
+</div>
+
+{% capture cross_elements_example %}
+<div class="block">
+  <span class="tag is-success">
+    Hello World
+    <button class="delete is-small"></button>
+  </span>
+</div>
+
+<div class="notification is-danger">
+  <button class="delete"></button>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
+</div>
+{% endcapture %}
+<div class="columns">
+<div class="column">
+  <div class="content">
+    <p>
+      Bulma uses it for the <a href="/documentation/elements/tag/">tags</a> and the <a href="/documentation/elements/notification/">notifications</a>:
+    </p>
+  </div>
+  {{cross_elements_example}}
+</div>
+<div class="column">
+{% highlight html %}
+{{cross_elements_example}}
+{% endhighlight %}
+</div>
+</div>
+
+  </div>
+</section>

docs/documentation/elements/form.html

@@ -419,7 +419,7 @@ doc-subtab: form
         <span class="tag is-success">New!</span>
       </p>
       <p>
-        If the control contains an icon, Bulma will make sure the button remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
+        If the control contains an icon, Bulma will make sure the icon remains <strong>centered</strong>, no matter the size of the input <em>or</em> of the icon.
       </p>
     </div>
     {{icons_sizes_example}}
@@ -581,7 +581,11 @@ doc-subtab: form
 
     <h3 class="title">Form group</h3>
     <div class="content">
-      <p>If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
+      <p>
+        If you want to <strong>group</strong> controls together, use the <code>is-grouped</code> modifier on the <code>control</code> container.
+        <br>
+        Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.
+      </p>
     </div>
 {% capture group_example %}
 <div class="control is-grouped">
@@ -601,9 +605,6 @@ doc-subtab: form
 {% highlight html %}
 {{group_example}}
 {% endhighlight %}
-    <div class="content">
-      <p>Add the <code>is-expanded</code> modifier on the control element you want to <strong>fill up the remaining space</strong>.</p>
-    </div>
 
     <hr>
 

docs/documentation/elements/icon.html

@@ -16,7 +16,7 @@ doc-subtab: icon
     <hr>
 
     <div class="content">
-      <p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class:</p>
+      <p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
     </div>
 
     <div class="example">
@@ -32,7 +32,7 @@ doc-subtab: icon
 {% endhighlight %}
 
     <div class="content">
-      <p>The <code>icon</code> container will take up <em>exactly</em> <strong>24 x 24 pixels</strong>. The icon itself is sized at <strong>21px</strong>.</p>
+      <p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
     </div>
 
     <hr>
@@ -57,25 +57,25 @@ doc-subtab: icon
           <td><code>icon is-small</code></td>
           <td><span class="icon is-small"><i class="fa fa-home"></i></span></td>
           <td>14px</td>
-          <td>16x16px</td>
+          <td>1rem x 1rem</td>
         </tr>
         <tr>
           <td><code>icon</code></td>
           <td><span class="icon"><i class="fa fa-home"></i></span></td>
           <td>21px</td>
-          <td>24x24px</td>
+          <td>1.5rem x 1.5rem</td>
         </tr>
         <tr>
           <td><code>icon is-medium</code></td>
           <td><span class="icon is-medium"><i class="fa fa-home"></i></span></td>
           <td>28px</td>
-          <td>32x32px</td>
+          <td>2rem x 2rem</td>
         </tr>
         <tr>
           <td><code>icon is-large</code></td>
           <td><span class="icon is-large"><i class="fa fa-home"></i></span></td>
           <td>42px</td>
-          <td>48x48px</td>
+          <td>3rem x 3rem</td>
         </tr>
       </tbody>
     </table>

sass/elements/notification.sass

@@ -1,15 +1,13 @@
 .notification
   +block
-  +clearfix
   background-color: $background
   border-radius: $radius
-  padding: 1.25rem 1.5rem
+  padding: 1.25rem 2.5rem 1.25rem 1.5rem
   position: relative
   .delete
-    border-radius: 0 $radius
     position: absolute
-    right: 0
-    top: 0
+    right: 0.5em
+    top: 0.5em
   .title,
   .subtitle,
   .content

sass/utilities/mixins.sass

@@ -31,7 +31,7 @@
   +unselectable
   -moz-appearance: none
   -webkit-appearance: none
-  background-color: rgba($black, 0.1)
+  background-color: rgba($black, 0.2)
   border: none
   border-radius: 290486px
   cursor: pointer
@@ -59,8 +59,11 @@
   &:after
     height: 50%
     width: 2px
-  &:hover
-    background-color: rgba($black, 0.2)
+  &:hover,
+  &:focus
+    background-color: rgba($black, 0.3)
+  &:active
+    background-color: rgba($black, 0.4)
   // Sizes
   &.is-small
     font-size: $size-small