diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 1f99cfe..518681a 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -549,3 +549,5 @@ - Updated `core` documentation page to reflect list changes. - Made some tweaks in the `utility` module to make `breadcrumbs` work as before. - Added `progress` variant section in the `progress` module's doc page. +- Updated `index` to reflect the minor bloating of the files that has occured lately. Shame, really. +- Completed documentation for `progress` module. diff --git a/docs/v2/core.html b/docs/v2/core.html index 7ea4c9e..5560895 100644 --- a/docs/v2/core.html +++ b/docs/v2/core.html @@ -49,7 +49,7 @@ box-sizing: border-box; border-right: 1px solid #bdbdbd; } - @media (max-width: 800px){ + @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; diff --git a/docs/v2/grid.html b/docs/v2/grid.html index 895fba9..c500cf0 100644 --- a/docs/v2/grid.html +++ b/docs/v2/grid.html @@ -49,7 +49,7 @@ box-sizing: border-box; border-right: 1px solid #bdbdbd; } - @media (max-width: 800px){ + @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; diff --git a/docs/v2/index.html b/docs/v2/index.html index 120d802..701440a 100644 --- a/docs/v2/index.html +++ b/docs/v2/index.html @@ -152,8 +152,8 @@ mini.css v2.0 - 38 KB - 31 KB + 43 KB + 34 KB 6 KB diff --git a/docs/v2/navigation.html b/docs/v2/navigation.html index 5248cbd..5c316bf 100644 --- a/docs/v2/navigation.html +++ b/docs/v2/navigation.html @@ -49,7 +49,7 @@ box-sizing: border-box; border-right: 1px solid #bdbdbd; } - @media (max-width: 800px){ + @media (max-width: 767px){ .col-sm-12.col-sm-last.col-lg-4.col-lg-normal { border: 0; border-top: 1px solid #bdbdbd; diff --git a/docs/v2/progress.html b/docs/v2/progress.html index 7ff7117..242d3cb 100644 --- a/docs/v2/progress.html +++ b/docs/v2/progress.html @@ -49,7 +49,7 @@ box-sizing: border-box; border-right: 1px solid #bdbdbd; } - @media (max-width: 800px){ + @media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; @@ -216,29 +216,32 @@
- +
+
+ +
+
-

+

Donut spinners can be used to indicate that something is loading or that a process is running in the background. To create a donut spinner, add the .spinner-donut class to an element of your liking. We would recommend using a <div> element for most cases, but <span> elements should work pretty well, too.

Sample code

- 

+                
<div class="spinner-donut"></div>

               

             

             

             
Notes

               
               

               

-                

-                  

-                  
Do: 

+                

+                  
<p>Loading... <span class="spinner-donut"></span></p>

+                  
Do: You can place a .spinner-donut inside a paragraph or some other textual context and it will display inline.

                 

-                

-                  

-                  
Don't: 

+                

+                  
<div class="spinner-donut">Loading...</div>

+                  
Don't: Avoid inserting text inside the .spinner-donut, as this might cause unexpected bahavior and will probably make the text spin along with it.

                 

               

             

@@ -253,31 +256,27 @@
             

             

               

-              
+                

+                  

+                  

+                  

+                  
+                  

+                

               

               

-                

+                
Apart from the default donut spinner style, there are also two more contextual color classes: .secondary and .tertiary. If your donut spinners are too small, you can also use the .large class to make it pop out a little bit more.

                 
Sample code

-                

+                
<div class="spinner-donut secondary"></div>
+<div class="spinner-donut tertiary"></div>
+<div class="spinner-donut large"></div>

               

             

             

             
Notes

               
-              

-              

-                

-                  

-                  
Do: 

-                

-                

-                  

-                  
Don't: 

-                

-              

             

           

         
diff --git a/src/mini/_utility.scss b/src/mini/_utility.scss
index 4106b90..c9a3d7b 100644
--- a/src/mini/_utility.scss
+++ b/src/mini/_utility.scss
@@ -23,6 +23,7 @@ ul.#{$breadcrumbs-name} {
 	display: -webkit-flex;
 	display: 		 flex;
 	list-style: none;
+	// TODO: ADD MARGIN-TOP WITH A VARIABLE TO MAKE THIS BETTER SPACED, MAYBE ALSO MARGIN-BOTTOM!
 	margin-left: 0;			// Reset margins from list styling
 	margin-right: 0;		// Reset margins from list styling
 	padding: 0;				// Remove unnecessary left and right empty space