mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add JS instructions
This commit is contained in:
Jeremy Thomas
parent
a14b67aa50
commit
e1a82944d3
@ -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;
|
||||
|
||||
@ -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"
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_path %}
|
||||
<div class="file has-path">
|
||||
{% capture file_name %}
|
||||
<div class="file has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
@ -34,7 +55,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
@ -57,8 +78,8 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_centered_path %}
|
||||
<div class="file is-centered has-path">
|
||||
{% capture file_centered_name %}
|
||||
<div class="file has-name is-centered">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
@ -69,7 +90,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
Choose a file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
@ -142,9 +163,9 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_path %}
|
||||
{% capture file_sizes_name %}
|
||||
<div class="field">
|
||||
<div class="file is-small has-path">
|
||||
<div class="file is-small has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
@ -155,7 +176,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
Small file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
@ -163,7 +184,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file has-path">
|
||||
<div class="file has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
@ -174,7 +195,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
Normal file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
@ -182,7 +203,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium has-path">
|
||||
<div class="file is-medium has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
@ -193,7 +214,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
@ -201,7 +222,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large has-path">
|
||||
<div class="file is-large has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
@ -212,7 +233,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
@ -286,9 +307,9 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture file_sizes_centered_path %}
|
||||
{% capture file_sizes_centered_name %}
|
||||
<div class="field">
|
||||
<div class="file is-small is-centered has-path">
|
||||
<div class="file is-small is-centered has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
@ -299,7 +320,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
Small file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
@ -307,7 +328,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-centered has-path">
|
||||
<div class="file is-centered has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
@ -318,7 +339,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
Normal file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
@ -326,7 +347,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-medium is-centered has-path">
|
||||
<div class="file is-medium is-centered has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
@ -337,7 +358,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
Medium file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
@ -345,7 +366,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<div class="file is-large is-centered has-path">
|
||||
<div class="file is-large is-centered has-name">
|
||||
<label class="file-label">
|
||||
<input class="file-input" type="file" name="resume">
|
||||
<span class="file-cta">
|
||||
@ -356,7 +377,7 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
Large file…
|
||||
</span>
|
||||
</span>
|
||||
<span class="file-path">
|
||||
<span class="file-name">
|
||||
{{ page.file_name }}
|
||||
</span>
|
||||
</label>
|
||||
@ -385,11 +406,37 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>.file</code> class is a simple wrapper around the <code><input type="radio"></code> HTML elements. It is intentionally not styled, to preserve cross-browser compatibility and the user experience.
|
||||
</p>
|
||||
<p>
|
||||
Make sure the linked radio buttons have the <strong>same value</strong> for their <code>name</code> HTML attribute.
|
||||
The <code>.file</code> element is a simple <strong>interactive label</strong> that wraps an <code><input type="file"></code>. It comprises several sub-elements:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.file</code> the main <strong>container</strong>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.file-label</code> the actual <strong>interactive</strong> and clickable part of the element
|
||||
<ul>
|
||||
<li>
|
||||
<code>.file-input</code> the <strong>native</strong> file input, hidden for styling purposes
|
||||
</li>
|
||||
<li>
|
||||
<code>.file-cta</code> the upload <strong>call-to-action</strong>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.file-icon</code> an optional <strong>upload</strong> icon
|
||||
</li>
|
||||
<li>
|
||||
<code>.file-label</code> the "Choose a file…" text
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<code>.file-name</code> a container for the <strong>chosen file</strong> name
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
@ -407,17 +454,27 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
With the <code>.has-name</code> modifier combined with the <code>.file-name</code> element, you can add a <strong>placeholder</strong> for the selected file name.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{{ file_path }}
|
||||
{{ file_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ file_path }}{% endhighlight %}
|
||||
{% highlight html %}{{ file_name }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can have a <strong>centered block</strong> with the <code>.is-centered</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{{ file_centered }}
|
||||
</div>
|
||||
@ -429,17 +486,39 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can <strong>combine</strong> <code>.has-name</code> and <code>.is-centered</code>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="example">
|
||||
{{ file_centered_path }}
|
||||
{{ file_centered_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column highlight-full">
|
||||
{% highlight html %}{{ file_centered_path }}{% endhighlight %}
|
||||
{% highlight html %}{{ file_centered_name }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can append one of <strong>3 additional sizes</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.is-small</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-medium</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-large</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
@ -454,11 +533,11 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_sizes_path }}
|
||||
{{ file_sizes_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes_path }}{% endhighlight %}
|
||||
{% highlight html %}{{ file_sizes_name }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -476,12 +555,25 @@ file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="example">
|
||||
{{ file_sizes_centered_path }}
|
||||
{{ file_sizes_centered_name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
{% highlight html %}{{ file_sizes_centered_path }}{% endhighlight %}
|
||||
{% highlight html %}{{ file_sizes_centered_name }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include heading.html name="JavaScript" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
A file upload input requires JavaScript to <strong>retrieve</strong> the <strong>selected file name</strong>.
|
||||
<br>
|
||||
User <a href="https://github.com/chintanbanugaria"><strong>@chintanbanugaria</strong></a> on GitHub <a href="https://github.com/jgthms/bulma/issues/280#issuecomment-294099510">has provided</a> a simple solution <a href="https://jsfiddle.net/chintanbanugaria/uzva5byy/">on JSFiddle</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include variables.html element=true %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -62,6 +62,8 @@ a
|
||||
color: $link
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
strong
|
||||
color: currentColor
|
||||
&:hover
|
||||
color: $link-hover
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user