Fix % selectors; add new dimensions

lib/css/background.css

@@ -1,5 +1,6 @@
-.backgroundColor-#fff { background-color: #fff; }
+.backgroundColor-black { background-color: black; }
 .backgroundColor-transparent { background-color: currentcolor; }
+.backgroundColor-white { background-color: white; }
 
 .backgroundImage { background-image: none; }
 

lib/css/height.css

@@ -1,3 +1,49 @@
-.maxHeight-100\% { max-height: 100%; }
-.minHeight-100\% { min-height: 100%; }
-.height-100\% { height: 100%; }
+.height-0 { height: 0; }
+
+.maxHeight-10% { max-height: 10%; }
+.minHeight-10% { min-height: 10%; }
+.height-10% { height: 10%; }
+
+.maxHeight-20% { max-height: 20%; }
+.minHeight-20% { min-height: 20%; }
+.height-20% { height: 20%; }
+
+.maxHeight-25% { max-height: 25%; }
+.minHeight-25% { min-height: 25%; }
+.height-25% { height: 25%; }
+
+.maxHeight-30% { max-height: 30%; }
+.minHeight-30% { min-height: 30%; }
+.height-30% { height: 30%; }
+
+.maxHeight-40% { max-height: 40%; }
+.minHeight-40% { min-height: 40%; }
+.height-40% { height: 40%; }
+
+.maxHeight-50% { max-height: 50%; }
+.minHeight-50% { min-height: 50%; }
+.height-50% { height: 50%; }
+
+.maxHeight-60% { max-height: 60%; }
+.minHeight-60% { min-height: 60%; }
+.height-60% { height: 60%; }
+
+.maxHeight-70% { max-height: 70%; }
+.minHeight-70% { min-height: 70%; }
+.height-70% { height: 70%; }
+
+.maxHeight-75% { max-height: 75%; }
+.minHeight-75% { min-height: 75%; }
+.height-75% { height: 75%; }
+
+.maxHeight-80% { max-height: 80%; }
+.minHeight-80% { min-height: 80%; }
+.height-80% { height: 80%; }
+
+.maxHeight-90% { max-height: 90%; }
+.minHeight-90% { min-height: 90%; }
+.height-90% { height: 90%; }
+
+.maxHeight-100% { max-height: 100%; }
+.minHeight-100% { min-height: 100%; }
+.height-100% { height: 100%; }

lib/css/position.css

@@ -2,12 +2,17 @@
 .position-fixed { position: fixed; }
 .position-relative { position: relative; }
 
-.top-0 { top: 0; }
-.right-0 { right: 0; }
-.left-0 { left: 0; }
 .bottom-0 { bottom: 0; }
+.left-0 { left: 0; }
+.right-0 { right: 0; }
+.top-0 { top: 0; }
 
-.top-100\% { top: 100%; }
-.right-100\% { right: 100%; }
-.left-100\% { left: 100%; }
-.bottom-100\% { bottom: 100%; }
+.bottom-50% { bottom: 50%; }
+.left-50% { left: 50%; }
+.right-50% { right: 50%; }
+.top-50% { top: 50%; }
+
+.bottom-100% { bottom: 100%; }
+.left-100% { left: 100%; }
+.right-100% { right: 100%; }
+.top-100% { top: 100%; }

lib/css/width.css

@@ -1,3 +1,49 @@
-.maxWidth-100\% { max-width: 100%; }
-.minWidth-100\% { min-width: 100%; }
-.width-100\% { width: 100%; }
+.width-0 { width: 0; }
+
+.maxWidth-10% { max-width: 10%; }
+.minWidth-10% { min-width: 10%; }
+.width-10% { width: 10%; }
+
+.maxWidth-20% { max-width: 20%; }
+.minWidth-20% { min-width: 20%; }
+.width-20% { width: 20%; }
+
+.maxWidth-25% { max-width: 25%; }
+.minWidth-25% { min-width: 25%; }
+.width-25% { width: 25%; }
+
+.maxWidth-30% { max-width: 30%; }
+.minWidth-30% { min-width: 30%; }
+.width-30% { width: 30%; }
+
+.maxWidth-40% { max-width: 40%; }
+.minWidth-40% { min-width: 40%; }
+.width-40% { width: 40%; }
+
+.maxWidth-50% { max-width: 50%; }
+.minWidth-50% { min-width: 50%; }
+.width-50% { width: 50%; }
+
+.maxWidth-60% { max-width: 60%; }
+.minWidth-60% { min-width: 60%; }
+.width-60% { width: 60%; }
+
+.maxWidth-70% { max-width: 70%; }
+.minWidth-70% { min-width: 70%; }
+.width-70% { width: 70%; }
+
+.maxWidth-75% { max-width: 75%; }
+.minWidth-75% { min-width: 75%; }
+.width-75% { width: 75%; }
+
+.maxWidth-80% { max-width: 80%; }
+.minWidth-80% { min-width: 80%; }
+.width-80% { width: 80%; }
+
+.maxWidth-90% { max-width: 90%; }
+.minWidth-90% { min-width: 90%; }
+.width-90% { width: 90%; }
+
+.maxWidth-100% { max-width: 100%; }
+.minWidth-100% { min-width: 100%; }
+.width-100% { width: 100%; }