Fix components code style

CHANGELOG.md

@@ -6,7 +6,7 @@
 
 * `.is-text-*` renamed to `.has-text-*`
 * `.is-gapless` renamed to `.has-no-gap`
-* `.is-marginless` renamed to `.has-no-margin`
+* removed `.is-fullwidth` helper
 
 ### Added
 

bulma/base/helpers.sass

@@ -19,11 +19,6 @@
 .is-overlay
   +overlay
 
-// Size
-
-.is-fullwidth
-  width: 100%
-
 // Text
 
 .has-text-centered
@@ -55,12 +50,11 @@
 
 // Other
 
-.has-no-margin
-  margin: 0 !important
-
 .is-disabled
   pointer-events: none
 
+.is-marginless
+  margin: 0 !important
+
 .is-unselectable
   +unselectable
-

bulma/components/card.sass

@@ -51,7 +51,8 @@
   width: 300px
   .media:not(:last-child)
     margin-bottom: 10px
-  &.is-rounded
+  // Modifiers
-    border-radius: 5px
   &.is-fullwidth
     width: 100%
+  &.is-rounded
+    border-radius: 5px

bulma/components/media.sass

@@ -9,6 +9,7 @@
   padding: 4px 8px
   text-align: center
   vertical-align: top
+  // Responsiveness
   +mobile
     margin-bottom: 10px
   +tablet
@@ -50,10 +51,12 @@
     border-top: 1px solid rgba($border, 0.5)
     margin-top: 10px
     padding-top: 10px
+  // Sizes
   &.is-large
     & + .media
       margin-top: 20px
       padding-top: 20px
+  // Responsiveness
   +tablet
     &.is-large
       .media-number

bulma/components/menu.sass

@@ -12,13 +12,15 @@
     &:hover
       background: $background
       color: $link
+    // Modifiers
     &.is-active
       background: $link
       color: $link-invert
-  li ul
+  li
-    border-left: 1px solid $border
+    ul
-    margin: 10px
+      border-left: 1px solid $border
-    padding-left: 10px
+      margin: 10px
+      padding-left: 10px
 
 .menu-label
   color: $text-light

bulma/components/modal.sass

@@ -8,6 +8,7 @@
   overflow: auto
   position: relative
   width: 100%
+  // Responsiveness
   +tablet
     margin: 0 auto
     max-height: calc(100vh - 40px)
@@ -30,5 +31,6 @@
   overflow: hidden
   position: fixed
   z-index: 1986
+  // Modifiers
   &.is-active
     display: flex

bulma/components/navbar.sass

@@ -2,34 +2,22 @@
   .title,
   .subtitle
     margin-bottom: 0
+  // Responsiveness
   +mobile
     &:not(:last-child)
       margin-bottom: 10px
 
-.navbar
-  @extend .block
-  code
-    border-radius: $radius
-  img
-    display: inline-block
-    vertical-align: top
-  +tablet
-    align-items: center
-    display: flex
-    justify-content: space-between
-    & > .navbar-item
-      &:not(.is-narrow)
-        flex: 1
-
 .navbar-left,
 .navbar-right
   .navbar-item
-    &.is-flexible
-      flex: 1
     &:not(:last-child)
       margin-right: 10px
+    // Modifiers
+    &.is-flexible
+      flex: 1
 
 .navbar-left
+  // Responsiveness
   +mobile
     & + .navbar-right
       margin-top: 20px
@@ -38,7 +26,24 @@
     display: flex
 
 .navbar-right
+  // Responsiveness
   +tablet
     align-items: center
     display: flex
     justify-content: flex-end
+
+.navbar
+  @extend .block
+  code
+    border-radius: $radius
+  img
+    display: inline-block
+    vertical-align: top
+  // Responsiveness
+  +tablet
+    align-items: center
+    display: flex
+    justify-content: space-between
+    & > .navbar-item
+      &:not(.is-narrow)
+        flex: 1

bulma/components/pagination.sass

@@ -8,6 +8,7 @@
     display: block
     min-width: 32px
     padding: 3px 8px
+    // Modifiers
     &.is-active
       background: $link
       border-color: $link
@@ -23,6 +24,7 @@
     display: flex
     flex: 1
     justify-content: center
+  // Responsiveness
   +mobile
     flex-wrap: wrap
     & > a

bulma/components/panel.sass

@@ -27,47 +27,26 @@
   font-size: $size-small
   padding: 5px 10px 0
   justify-content: center
-  &:not(:last-child)
-    border-bottom: 1px solid $border
   a
     border-bottom: 1px solid $border
     margin-bottom: -1px
     padding: 5px
+    // Modifiers
     &.is-active
       border-bottom-color: $link-active-border
       color: $link-active
+  &:not(:last-child)
+    border-bottom: 1px solid $border
 
 .panel-block
   color: $text-strong
   display: block
   line-height: 16px
   padding: 10px
+  &:hover
+    background: $background
   &:not(:last-child)
     border-bottom: 1px solid $border
-  .checkbox
-    border: 1px solid transparent
-    border-radius: $radius
-    display: block
-    padding: 8px
-    padding-left: 32px
-    input
-      left: 9px
-      top: 9px
-    &:hover
-      border-color: $link
-
-a.panel-block:hover
-  background: $background
-
-.panel-checkbox
-  @extend .checkbox
-  display: block
-  padding: 9px 10px 9px 30px
-  &:not(:last-child)
-    border-bottom: 1px solid $border
-  input
-    left: 8px
-    top: 10px
 
 .panel
   border: 1px solid $border

bulma/components/table.sass

@@ -3,23 +3,13 @@
   color: $text-strong
   margin-bottom: 20px
   width: 100%
-  th,
+  td,
-  td
+  th
     border: 1px solid $border
     border-width: 0 0 1px
     padding: 8px 10px
     vertical-align: top
-    &.table-narrow
+    // Modifiers
-      white-space: nowrap
-      width: 1%
-    &.table-link
-      padding: 0
-      & > a
-        display: block
-        padding: 8px 10px
-        &:hover
-          background: $link
-          color: $link-invert
     &.table-icon
       padding: 5px
       text-align: center
@@ -31,49 +21,69 @@
         padding: 0
         & > a
           padding: 5px
+    &.table-link
+      padding: 0
+      & > a
+        display: block
+        padding: 8px 10px
+        &:hover
+          background: $link
+          color: $link-invert
+    &.table-narrow
+      white-space: nowrap
+      width: 1%
   th
     color: $text-strong
     text-align: left
   tr
     &:hover
-      background: rgba($background, 0.5)
+      background: $background
       color: $text-strong
-    &:last-child td
-      border-bottom-width: 0
   thead
-    th,
+    td,
-    td
+    th
       border-width: 0 0 2px
       color: $text-light
+  tbody
+    tr
+      &:last-child
+        td,
+        th
+          border-bottom-width: 0
   tfoot
-    th,
+    td,
-    td
+    th
       border-width: 2px 0 0
       color: $text-light
+  // Modifiers
   &.is-bordered
-    th,
+    td,
-    td
+    th
       border-width: 1px
     tr
-      &:last-child td
+      &:last-child
-        border-bottom-width: 1px
+        td,
+        th
+          border-bottom-width: 1px
   &.is-narrow
-    th,
+    td,
-    td
+    th
       padding: 5px 10px
-      &.table-link
+      // Modifiers
-        padding: 0
-        & > a
-          padding: 5px 10px
       &.table-icon
         padding: 2px
         &.table-link
           padding: 0
           & > a
             padding: 2px
+      &.table-link
+        padding: 0
+        & > a
+          padding: 5px 10px
   &.is-striped
     tbody
-      tr:nth-child(2n)
+      tr
-        background: rgba($background, 0.5)
+        &:nth-child(2n)
-        &:hover
           background: $background
+          &:hover
+            background: $border

bulma/components/tabs.sass

@@ -4,11 +4,6 @@
   overflow: hidden
   overflow-x: auto
   white-space: nowrap
-  .fa
-    font-size: 14px
-    line-height: 20px
-    margin: 2px -2px
-    width: 20px
   a
     border-bottom: 1px solid $border
     color: $text
@@ -24,6 +19,7 @@
     vertical-align: top
     & + li
       margin-left: 20px
+    // Modifiers
     &.is-active
       a
         border-bottom-color: $link
@@ -31,18 +27,12 @@
   ul
     border-bottom: 1px solid $border
     display: flex
-  &.is-centered
+  .fa
-    a
+    font-size: 14px
-      padding: 5px 10px
+    line-height: 20px
-    li
+    margin: 2px -2px
-      & + li
+    width: 20px
-        margin-left: 0
+  // Modifiers
-    ul
-      justify-content: center
-      text-align: center
-  &.is-right
-    ul
-      justify-content: flex-end
   &.is-boxed
     a
       border: 1px solid transparent
@@ -54,16 +44,38 @@
     li
       & + li
         margin-left: 5px
+      // Modifiers
       &.is-active
         a
           background: white
           border-color: $border
           border-bottom-color: transparent
+    // Modifiers
     &.is-centered
       li
         &,
         & + li
           margin: 0 2px
+  &.is-centered
+    a
+      padding: 5px 10px
+    li
+      & + li
+        margin-left: 0
+    ul
+      justify-content: center
+      text-align: center
+  &.is-fullwidth
+    li
+      flex: 1
+      & + li
+        margin-left: 0
+    ul
+      justify-content: center
+      text-align: center
+  &.is-right
+    ul
+      justify-content: flex-end
   &.is-toggle
     a
       border: 1px solid $border
@@ -81,6 +93,7 @@
         border-radius: $radius 0 0 $radius
       &:last-child a
         border-radius: 0 $radius $radius 0
+      // Modifiers
       &.is-active
         a
           background: $primary
@@ -89,11 +102,3 @@
           z-index: 1
     ul
       border-bottom: none
-  &.is-fullwidth
-    li
-      flex: 1
-      & + li
-        margin-left: 0
-    ul
-      justify-content: center
-      text-align: center