From e1a82944d31ac4a8f5f48fa14ba082bf9a379519 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sat, 29 Jul 2017 23:46:27 +0100 Subject: [PATCH] Add JS instructions --- docs/css/bulma-docs.css | 49 +++++---- docs/documentation/form/file.html | 166 +++++++++++++++++++++++------- sass/base/generic.sass | 2 + sass/elements/form.sass | 58 +++++------ 4 files changed, 189 insertions(+), 86 deletions(-) diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 103dcf2d..f65bcb21 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -142,6 +142,10 @@ a { text-decoration: none; } +a strong { + color: currentColor; +} + a:hover { color: #363636; } @@ -2579,6 +2583,11 @@ a.box:active { } .file { + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; align-items: stretch; display: flex; justify-content: flex-start; @@ -2605,12 +2614,12 @@ a.box:active { font-size: 28px; } -.file.has-path .file-cta { +.file.has-name .file-cta { border-bottom-right-radius: 0; border-top-right-radius: 0; } -.file.has-path .file-path { +.file.has-name .file-name { border-bottom-left-radius: 0; border-top-left-radius: 0; } @@ -2629,7 +2638,7 @@ a.box:active { padding: 1em 3em; } -.file.is-centered .file-path { +.file.is-centered .file-name { border-width: 0 1px 1px; } @@ -2654,11 +2663,11 @@ a.box:active { font-size: 35px; } -.file.is-centered.has-path .file-cta { +.file.is-centered.has-name .file-cta { border-radius: 3px 3px 0 0; } -.file.is-centered.has-path .file-path { +.file.is-centered.has-name .file-name { border-radius: 0 0 3px 3px; border-width: 0 1px 1px; } @@ -2673,21 +2682,21 @@ a.box:active { } .file-label:hover .file-cta { - background-color: #ff2b56; + background-color: #eeeeee; color: #363636; } -.file-label:hover .file-path { - border-color: #ff2b56; +.file-label:hover .file-name { + border-color: #eeeeee; } .file-label:active .file-cta { - background-color: #ff1f4b; + background-color: #e8e8e8; color: #363636; } -.file-label:active .file-path { - border-color: #ff1f4b; +.file-label:active .file-name { + border-color: #e8e8e8; } .file-input { @@ -2700,7 +2709,7 @@ a.box:active { } .file-cta, -.file-path { +.file-name { -moz-appearance: none; -webkit-appearance: none; align-items: center; @@ -2727,25 +2736,25 @@ a.box:active { } .file-cta:focus, .file-cta.is-focused, .file-cta:active, .file-cta.is-active, -.file-path:focus, -.file-path.is-focused, -.file-path:active, -.file-path.is-active { +.file-name:focus, +.file-name.is-focused, +.file-name:active, +.file-name.is-active { outline: none; } .file-cta[disabled], -.file-path[disabled] { +.file-name[disabled] { cursor: not-allowed; } .file-cta { - background-color: #ff3860; + background-color: whitesmoke; color: #4a4a4a; } -.file-path { - border-color: #ff3860; +.file-name { + border-color: whitesmoke; border-style: solid; border-width: 1px 1px 1px 0; display: block; diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html index 62646f47..6acb0088 100644 --- a/docs/documentation/form/file.html +++ b/docs/documentation/form/file.html @@ -2,8 +2,29 @@ title: File upload layout: documentation doc-tab: form -doc-subtab: upload +doc-subtab: file file_name: "Screen Shot 2017-07-29 at 15.54.25.png" +variables: +- name: $file-border-color + value: transparent +- name: $file-radius + value: $radius +- name: $file-cta-background-color + value: $white-ter +- name: $file-cta-color + value: $grey-dark +- name: $file-cta-hover-color + value: $grey-darker +- name: $file-cta-active-color + value: $grey-darker +- name: $file-name-border-color + value: $file-cta-background-color +- name: $file-name-border-style + value: solid +- name: $file-name-border-width + value: 1px 1px 1px 0 +- name: $file-name-max-width + value: 16em --- {% capture file %} @@ -22,8 +43,8 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png" {% endcapture %} -{% capture file_path %} -
+{% capture file_name %} +
@@ -57,8 +78,8 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
{% endcapture %} -{% capture file_centered_path %} -
+{% capture file_centered_name %} +
@@ -142,9 +163,9 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
{% endcapture %} -{% capture file_sizes_path %} +{% capture file_sizes_name %}
-
+
@@ -163,7 +184,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
-
+
@@ -182,7 +203,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
-
+
@@ -201,7 +222,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
-
+
@@ -286,9 +307,9 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
{% endcapture %} -{% capture file_sizes_centered_path %} +{% capture file_sizes_centered_name %}
-
+
@@ -307,7 +328,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
-
+
@@ -326,7 +347,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
-
+
@@ -345,7 +366,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
-
+
@@ -385,11 +406,37 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"

- The .file class is a simple wrapper around the <input type="radio"> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience. -

-

- Make sure the linked radio buttons have the same value for their name HTML attribute. + The .file element is a simple interactive label that wraps an <input type="file">. It comprises several sub-elements:

+
    +
  • + .file the main container +
      +
    • + .file-label the actual interactive and clickable part of the element +
        +
      • + .file-input the native file input, hidden for styling purposes +
        • +
      • + .file-cta the upload call-to-action +
          +
        • + .file-icon an optional upload icon +
          • +
        • + .file-label the "Choose a file…" text +
          • +
        +
        • +
      • + .file-name a container for the chosen file name +
        • +
      +
      • +
    +
    • +
@@ -407,17 +454,27 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
+
+

+ With the .has-name modifier combined with the .file-name element, you can add a placeholder for the selected file name. +

+
- {{ file_path }} + {{ file_name }}
- {% highlight html %}{{ file_path }}{% endhighlight %} + {% highlight html %}{{ file_name }}{% endhighlight %}
+
+

+ You can have a centered block with the .is-centered modifier. +

+
{{ file_centered }}
@@ -429,17 +486,39 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
+
+

+ You can combine .has-name and .is-centered. +

+
- {{ file_centered_path }} + {{ file_centered_name }}
- {% highlight html %}{{ file_centered_path }}{% endhighlight %} + {% highlight html %}{{ file_centered_name }}{% endhighlight %}
{% include heading.html name="Sizes" %} +
+

+ You can append one of 3 additional sizes: +

+
    +
  • + .is-small +
    • +
  • + .is-medium +
    • +
  • + .is-large +
    • +
+
+
@@ -454,11 +533,11 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
- {{ file_sizes_path }} + {{ file_sizes_name }}
- {% highlight html %}{{ file_sizes_path }}{% endhighlight %} + {% highlight html %}{{ file_sizes_name }}{% endhighlight %}
@@ -476,12 +555,25 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
- {{ file_sizes_centered_path }} + {{ file_sizes_centered_name }}
- {% highlight html %}{{ file_sizes_centered_path }}{% endhighlight %} + {% highlight html %}{{ file_sizes_centered_name }}{% endhighlight %}
+ + {% include heading.html name="JavaScript" %} + +
+

+ A file upload input requires JavaScript to retrieve the selected file name. +
+ User @chintanbanugaria on GitHub has provided a simple solution on JSFiddle. +

+
+ + {% include variables.html element=true %} +
diff --git a/sass/base/generic.sass b/sass/base/generic.sass index cfeee2a8..1db291d1 100755 --- a/sass/base/generic.sass +++ b/sass/base/generic.sass @@ -62,6 +62,8 @@ a color: $link cursor: pointer text-decoration: none + strong + color: currentColor &:hover color: $link-hover diff --git a/sass/elements/form.sass b/sass/elements/form.sass index aeb419f5..949261fe 100755 --- a/sass/elements/form.sass +++ b/sass/elements/form.sass @@ -20,6 +20,19 @@ $input-icon-active-color: $grey !default $input-radius: $radius !default +$file-border-color: transparent !default +$file-radius: $radius !default + +$file-cta-background-color: $white-ter !default +$file-cta-color: $grey-dark !default +$file-cta-hover-color: $grey-darker !default +$file-cta-active-color: $grey-darker !default + +$file-name-border-color: $file-cta-background-color !default +$file-name-border-style: solid !default +$file-name-border-width: 1px 1px 1px 0 !default +$file-name-max-width: 16em !default + $label-color: $grey-darker !default $label-weight: $weight-bold !default @@ -181,21 +194,8 @@ $help-size: $size-small !default &.is-large:after font-size: $size-large -$file-border-color: transparent !default -$file-radius: $radius !default - -// $file-cta-background-color: $white-ter !default -$file-cta-background-color: $red !default -$file-cta-color: $grey-dark !default -$file-cta-hover-color: $grey-darker !default -$file-cta-active-color: $grey-darker !default - -$file-path-border-color: $file-cta-background-color !default -$file-path-border-style: solid !default -$file-path-border-width: 1px 1px 1px 0 !default -$file-path-max-width: 16em !default - .file + +unselectable align-items: stretch display: flex justify-content: flex-start @@ -212,11 +212,11 @@ $file-path-max-width: 16em !default .file-icon .fa font-size: 28px - &.has-path + &.has-name .file-cta border-bottom-right-radius: 0 border-top-right-radius: 0 - .file-path + .file-name border-bottom-left-radius: 0 border-top-left-radius: 0 &.is-centered @@ -227,7 +227,7 @@ $file-path-max-width: 16em !default flex-direction: column height: auto padding: 1em 3em - .file-path + .file-name border-width: 0 1px 1px .file-icon height: 1.5em @@ -243,10 +243,10 @@ $file-path-max-width: 16em !default &.is-large .file-icon .fa font-size: 35px - &.has-path + &.has-name .file-cta border-radius: $file-radius $file-radius 0 0 - .file-path + .file-name border-radius: 0 0 $file-radius $file-radius border-width: 0 1px 1px @@ -261,14 +261,14 @@ $file-path-max-width: 16em !default .file-cta background-color: darken($file-cta-background-color, 2.5%) color: $file-cta-hover-color - .file-path - border-color: darken($file-path-border-color, 2.5%) + .file-name + border-color: darken($file-name-border-color, 2.5%) &:active .file-cta background-color: darken($file-cta-background-color, 5%) color: $file-cta-active-color - .file-path - border-color: darken($file-path-border-color, 5%) + .file-name + border-color: darken($file-name-border-color, 5%) .file-input height: 0.01em @@ -279,7 +279,7 @@ $file-path-max-width: 16em !default width: 0.01em .file-cta, -.file-path +.file-name +control border-color: $file-border-color border-radius: $file-radius @@ -292,12 +292,12 @@ $file-path-max-width: 16em !default background-color: $file-cta-background-color color: $file-cta-color -.file-path - border-color: $file-path-border-color - border-style: $file-path-border-style - border-width: $file-path-border-width +.file-name + border-color: $file-name-border-color + border-style: $file-name-border-style + border-width: $file-name-border-width display: block - max-width: $file-path-max-width + max-width: $file-name-max-width overflow: hidden text-align: left text-overflow: ellipsis