We use cookies to ensure you get the best experience on our website
Home Esplora Aiuto
Registrati Accedi
0ct0pu5
/
bulma
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

Explain mixins

Jeremy Thomas 8 anni fa
parent
e66684c514
commit
aaaa9d7902
8 ha cambiato i file con 92 aggiunte e 17 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. 3 1
      docs/_includes/footer.html
  2. 6 3
      docs/_includes/subnav-overview.html
  3. 1 0
      docs/_layouts/default.html
  4. 5 0
      docs/bulma-docs.sass
  5. 5 0
      docs/css/bulma-docs.css
  6. 71 0
      docs/documentation/overview/mixins.html
  7. 1 1
      docs/index.html
  8. 0 12
      sass/utilities/mixins.sass

+ 3 - 1
docs/_includes/footer.html
Vedi File 

@@ -14,7 +14,9 @@
 
               <div class="control is-grouped">
 
               <div class="control is-grouped">
 
                 <div class="control has-icon is-expanded">
 
                 <div class="control has-icon is-expanded">
 
                   <input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
 
                   <input type="email" value="" name="EMAIL" class="input is-flat required email" id="mce-EMAIL" placeholder="email address" required>
 
-                  <i class="fa fa-envelope"></i>
 
+                  <span class="icon is-small">
 
+                    <i class="fa fa-envelope"></i>
 
+                  </span>
 
                 </div>
 
                 </div>
 
                 <div class="control">
 
                 <div class="control">
 
                   <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button is-white is-outlined">
 
                   <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button is-white is-outlined">

+ 6 - 3
docs/_includes/subnav-overview.html
Vedi File 

@@ -10,15 +10,18 @@
 
       <a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/">
 
       <a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/">
 
         Modular
 
         Modular
 
       </a>
 
       </a>
 
-      <a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
 
-        Variables
 
-      </a>
 
       <a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
 
       <a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
 
         Responsiveness
 
         Responsiveness
 
       </a>
 
       </a>
 
       <a class="nav-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
 
       <a class="nav-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
 
         Functions
 
         Functions
 
       </a>
 
       </a>
 
+      <a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
 
+        Variables
 
+      </a>
 
+      <a class="nav-item is-tab {% if page.doc-subtab == 'mixins' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/mixins/">
 
+        Mixins
 
+      </a>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
 </nav>
 
 </nav>

+ 1 - 0
docs/_layouts/default.html
Vedi File 

@@ -3,5 +3,6 @@
 
   {% include head.html %}
 
   {% include head.html %}
 
   <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
 
   <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
 
     {{ content }}
 
     {{ content }}
 
+    {% include footer.html %}
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 5 - 0
docs/bulma-docs.sass
Vedi File 

@@ -187,10 +187,15 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
 
   animation-delay: 1.2s
 
   animation-delay: 1.2s
 
 
 
 #npm
 
 #npm
 
+  align-items: center
 
   animation: fadeIn 500ms both
 
   animation: fadeIn 500ms both
 
   animation-delay: 1.4s
 
   animation-delay: 1.4s
 
+  background: none
 
+  display: flex
 
+  justify-content: center
 
   margin: -10px 0 20px
 
   margin: -10px 0 20px
 
   code
 
   code
 
+    background: $background
 
     border-radius: $radius
 
     border-radius: $radius
 
     color: $primary
 
     color: $primary
 
     display: inline-block
 
     display: inline-block

+ 5 - 0
docs/css/bulma-docs.css
Vedi File 

@@ -6525,12 +6525,17 @@ svg {
 
 }
 
 }
 
 
 
 #npm {
 
 #npm {
 
+  align-items: center;
 
   animation: fadeIn 500ms both;
 
   animation: fadeIn 500ms both;
 
   animation-delay: 1.4s;
 
   animation-delay: 1.4s;
 
+  background: none;
 
+  display: flex;
 
+  justify-content: center;
 
   margin: -10px 0 20px;
 
   margin: -10px 0 20px;
 
 }
 
 }
 
 
 
 #npm code {
 
 #npm code {
 
+  background: whitesmoke;
 
   border-radius: 3px;
 
   border-radius: 3px;
 
   color: #00d1b2;
 
   color: #00d1b2;
 
   display: inline-block;
 
   display: inline-block;

+ 71 - 0
docs/documentation/overview/mixins.html
Vedi File 

@@ -0,0 +1,71 @@
 
+---
 
+layout: documentation
 
+doc-tab: overview
 
+doc-subtab: mixins
 
+---
 
+
 
+{% include subnav-overview.html %}
 
+
 
+<section class="section">
 
+  <div class="container">
 
+    <h1 class="title">Mixins</h1>
 
+    <h2 class="subtitle">Utility mixins for custom elements and responsive helpers</h2>
 
+
 
+    <hr>
 
+
 
+<table class="table is-bordered">
 
+<tr>
 
+  <td><code>=arrow($color)</code></td>
 
+  <td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
 
+</tr>
 
+<tr>
 
+  <td><code>=block</code></td>
 
+  <td>Defines a margin-bottom of 1.5rem, expect when the element is the last child. Used for almost all block elements.</td>
 
+</tr>
 
+<tr>
 
+  <td><code>=clearfix</code></td>
 
+  <td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
 
+</tr>
 
+<tr>
 
+  <td><code>=center($size)</code></td>
 
+  <td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
 
+</tr>
 
+<tr>
 
+  <td><code>=delete</code></td>
 
+  <td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
 
+</tr>
 
+<tr>
 
+  <td><code>=fa($size, $dimensions)</code></td>
 
+  <td>Sets the style of a Font Awesome icon container.</td>
 
+</tr>
 
+<tr>
 
+  <td><code>=hamburger($dimensions)</code></td>
 
+  <td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
 
+</tr>
 
+<tr>
 
+  <td><code>=loader</code></td>
 
+  <td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
 
+</tr>
 
+<tr>
 
+  <td><code>=overflow-touch</code></td>
 
+  <td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
 
+</tr>
 
+<tr>
 
+  <td><code>=overlay($offset: 0)</code></td>
 
+  <td>Makes the element overlay its parent container, like the transparent modal background.</td>
 
+</tr>
 
+<tr>
 
+  <td><code>=placeholder</code></td>
 
+  <td>Sets the styles of an input placeholder.</td>
 
+</tr>
 
+<tr>
 
+  <td><code>=unselectable</code></td>
 
+  <td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
 
+</tr>
 
+</table>
 
+
 
+    <div class="content">
 
+      <p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
 
+    </div>
 
+  </div>
 
+</section>

+ 1 - 1
docs/index.html
Vedi File 

@@ -24,7 +24,7 @@ route: index
 
       </h2>
 
       </h2>
 
       <pre id="npm"><code>npm install bulma</code></pre>
 
       <pre id="npm"><code>npm install bulma</code></pre>
 
       <div id="ghbtns" class="block">
 
       <div id="ghbtns" class="block">
 
-        <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="150px" height="30px"></iframe>
 
+        <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
 
         <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
 
         <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
 
       </div>
 
       </div>
 
       {% include carbon.html %}
 
       {% include carbon.html %}

+ 0 - 12
sass/utilities/mixins.sass
Vedi File 

@@ -163,18 +163,6 @@
 
     &:#{$placeholder}-placeholder
 
     &:#{$placeholder}-placeholder
 
       @content
 
       @content
 
 
 
-=replace($background, $width, $height)
 
-  background-color: $background
 
-  background-position: center center
 
-  background-repeat: no-repeat
 
-  background-size: $width $height
 
-  display: block
 
-  height: $height
 
-  outline: none
 
-  overflow: hidden
 
-  text-indent: -290486px
 
-  width: $width
 
-
 
 =unselectable
 
 =unselectable
 
   -webkit-touch-callout: none
 
   -webkit-touch-callout: none
 
   -webkit-user-select: none
 
   -webkit-user-select: none

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5