Przeglądaj źródła

Fix imports, Add images, Add fluid container

Jeremy Thomas 9 lat temu
rodzic
commit
04f8c285b1

+ 4 - 4
bulma/base/base.sass

@@ -1,6 +1,6 @@
 @charset "utf-8"
 @charset "utf-8"
 
 
-@import generic
-@import content
-@import highlight
-@import helpers
+@import "generic"
+@import "content"
+@import "highlight"
+@import "helpers"

+ 7 - 2
bulma/base/generic.sass

@@ -91,9 +91,14 @@ table
     color: $text-strong
     color: $text-strong
 
 
 .container
 .container
-  margin: 0 auto
-  max-width: 960px
+  margin: 0 20px
   position: relative
   position: relative
+  +desktop
+    margin: 0 auto
+    max-width: 960px
+    &.is-fluid
+      margin: 0 20px
+      max-width: none
 
 
 .fa
 .fa
   font-size: 21px
   font-size: 21px

+ 7 - 7
bulma/components/components.sass

@@ -1,12 +1,12 @@
 @charset "utf-8"
 @charset "utf-8"
 
 
-@import grid
-@import navbar
-@import card
-@import table
-@import tabs
-@import media
-@import menu
+@import "grid"
+@import "navbar"
+@import "card"
+@import "table"
+@import "tabs"
+@import "media"
+@import "menu"
 
 
 .block:not(:last-child)
 .block:not(:last-child)
   margin-bottom: 20px
   margin-bottom: 20px

+ 3 - 0
bulma/components/table.sass

@@ -9,6 +9,9 @@
     border-width: 0 0 1px
     border-width: 0 0 1px
     padding: 8px 10px
     padding: 8px 10px
     vertical-align: top
     vertical-align: top
+    &.table-narrow
+      white-space: nowrap
+      width: 1%
     &.table-link
     &.table-link
       padding: 0
       padding: 0
       & > a
       & > a

+ 0 - 1
bulma/config/variables.sass

@@ -4,7 +4,6 @@ $grey-darker: #222324
 $grey-dark: #69707a
 $grey-dark: #69707a
 $grey: #aeb1b5
 $grey: #aeb1b5
 $grey-light: #d3d6db
 $grey-light: #d3d6db
-$grey-lighter: #ebeff5
 $grey-lighter: #f5f7fa
 $grey-lighter: #f5f7fa
 
 
 $blue: #42afe3
 $blue: #42afe3

+ 6 - 5
bulma/elements/elements.sass

@@ -1,10 +1,11 @@
 @charset "utf-8"
 @charset "utf-8"
 
 
-@import controls
-@import buttons
-@import titles
-@import messages
-@import notifications
+@import "controls"
+@import "buttons"
+@import "titles"
+@import "images"
+@import "messages"
+@import "notifications"
 
 
 .delete
 .delete
   +unselectable
   +unselectable

+ 32 - 0
bulma/elements/images.sass

@@ -0,0 +1,32 @@
+$dimensions: 16 24 32 48 64 96 128
+
+.image
+  display: block
+  position: relative
+  img
+    display: block
+  &.is-square,
+  &.is-1by1,
+  &.is-4by3,
+  &.is-3by2,
+  &.is-16by9,
+  &.is-2by1
+    img
+      +overlay
+      height: 100%
+      width: 100%
+  &.is-square,
+  &.is-1by1
+    padding-top: 100%
+  &.is-4by3
+    padding-top: 75%
+  &.is-3by2
+    padding-top: 66.6666%
+  &.is-16by9
+    padding-top: 56.25%
+  &.is-2by1
+    padding-top: 50%
+  @each $dimension in $dimensions
+    &.is-#{$dimension}x#{$dimension}
+      height: $dimension * 1px
+      width: $dimension * 1px

+ 4 - 0
bulma/elements/titles.sass

@@ -3,6 +3,10 @@
   font-weight: 300
   font-weight: 300
   &:not(:last-child)
   &:not(:last-child)
     margin-bottom: 20px
     margin-bottom: 20px
+  a
+    &:hover
+      border-bottom: 1px solid
+      // text-decoration: underline
 
 
 .title
 .title
   color: $text-strong
   color: $text-strong

+ 3 - 0
bulma/layout/hero.sass

@@ -42,6 +42,9 @@
       border: none
       border: none
     ul
     ul
       border-bottom: none
       border-bottom: none
+    &.is-boxed
+      a
+        padding: 8px 15px
   &.is-alt
   &.is-alt
     background: $background
     background: $background
     color: $text-light
     color: $text-light

+ 4 - 4
bulma/layout/layout.sass

@@ -1,6 +1,6 @@
 @charset "utf-8"
 @charset "utf-8"
 
 
-@import header
-@import hero
-@import section
-@import footer
+@import "header"
+@import "hero"
+@import "section"
+@import "footer"

+ 1 - 2
bulma/layout/section.sass

@@ -1,10 +1,9 @@
 .section
 .section
   background: white
   background: white
-  padding: 40px 20px
+  padding: 40px 0
   & + .section
   & + .section
     border-top: 1px solid rgba($border, 0.5)
     border-top: 1px solid rgba($border, 0.5)
   +desktop
   +desktop
-    padding: 40px 0
     &.is-medium
     &.is-medium
       padding: 120px 0
       padding: 120px 0
     &.is-large
     &.is-large

+ 5 - 0
bulma/utilities/mixins.sass

@@ -64,6 +64,7 @@
 
 
 $tablet: 769px
 $tablet: 769px
 $desktop: 980px
 $desktop: 980px
+$widescreen: 1180px
 
 
 =from($device)
 =from($device)
   @media screen and (min-width: $device)
   @media screen and (min-width: $device)
@@ -88,3 +89,7 @@ $desktop: 980px
 =desktop
 =desktop
   @media screen and (min-width: $desktop)
   @media screen and (min-width: $desktop)
     @content
     @content
+
+=widescreen
+  @media screen and (min-width: $widescreen)
+    @content

+ 4 - 4
bulma/utilities/utilities.sass

@@ -1,6 +1,6 @@
 @charset "utf-8"
 @charset "utf-8"
 
 
-@import reset
-@import functions
-@import mixins
-@import animations
+@import "reset"
+@import "functions"
+@import "mixins"
+@import "animations"