✨ feat(button.css): Better styling for button groups in smaller screens

Spiderpig86 · Mar 12, 2020 · 43e8499 · 43e8499
1 parent 062a109
commit 43e8499
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 61 deletions.
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
@@ -1,6 +1,6 @@
 /*
-* Cirrus 0.5.5
-* Stanley Lim, Copyright 2019
+* Cirrus 0.5.6
+* Stanley Lim, Copyright 2020
 * https://spiderpig86.github.io/Cirrus
 */
 /* BUTTONS */
@@ -332,21 +332,6 @@ button span:last-child,
 [type="submit"] span:last-child {
     margin-left: 0.2rem;
 }
-/* Deprecated 0.5.5
-/* Button with accent 
-.btn-accent {
-    background-color: var(--cirrus-primary);
-    color: #fff;
-    border-color: var(--cirrus-accent-border);
-}
-
-.btn-accent:hover {
-    background-color: var(--cirrus-accent-hover);
-}
-
-.btn-accent:active {
-    background-color: var(--cirrus-accent-border);
-} */
 
 /* BUTTON GROUPS */
 /* Will group buttons with components in a single component */
@@ -408,6 +393,38 @@ button span:last-child,
     border-radius: 0; /* Remove roundness from center buttons */
     margin-left: -0.1rem;
 }
+
+@media screen and (max-width: 768px) {
+    .btn-group {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .btn-group .btn,
+    .btn-group button,
+    .btn-group [type="submit"] {
+        margin-bottom: -1px;
+    }
+
+    .btn-group .btn:first-child:not(:last-child),
+    .btn-group button:first-child:not(:last-child),
+    .btn-group [type="submit"]:first-child:not(:last-child) {
+        border-radius: .25rem .25rem 0 0;
+    }
+
+    .btn-group .btn:last-child:not(:first-child),
+    .btn-group button:last-child:not(:first-child),
+    .btn-group [type="submit"]:last-child:not(:first-child) {
+        margin: 0;
+    }
+
+    .btn-group .btn:not(:first-child):not(:last-child),
+    .btn-group button:not(:first-child):not(:last-child),
+    .btn-group [type="submit"]:not(:first-child):not(:last-child) {
+        border-radius: 0 0 .25rem .25rem ;
+        margin: 0;
+    }
+}
 /* CODE */
 
 code {

diff --git a/dist/cirrus-core.min.css b/dist/cirrus-core.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -1,6 +1,6 @@
 /*
-* Cirrus 0.5.5
-* Stanley Lim, Copyright 2019
+* Cirrus 0.5.6
+* Stanley Lim, Copyright 2020
 * https://spiderpig86.github.io/Cirrus
 */
 /* BUTTONS */
@@ -332,21 +332,6 @@ button span:last-child,
 [type="submit"] span:last-child {
     margin-left: 0.2rem;
 }
-/* Deprecated 0.5.5
-/* Button with accent 
-.btn-accent {
-    background-color: var(--cirrus-primary);
-    color: #fff;
-    border-color: var(--cirrus-accent-border);
-}
-
-.btn-accent:hover {
-    background-color: var(--cirrus-accent-hover);
-}
-
-.btn-accent:active {
-    background-color: var(--cirrus-accent-border);
-} */
 
 /* BUTTON GROUPS */
 /* Will group buttons with components in a single component */
@@ -407,6 +392,38 @@ button span:last-child,
     /* Style button in middle of group */
     border-radius: 0; /* Remove roundness from center buttons */
     margin-left: -0.1rem;
+}
+
+@media screen and (max-width: 768px) {
+    .btn-group {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .btn-group .btn,
+    .btn-group button,
+    .btn-group [type="submit"] {
+        margin-bottom: -1px;
+    }
+
+    .btn-group .btn:first-child:not(:last-child),
+    .btn-group button:first-child:not(:last-child),
+    .btn-group [type="submit"]:first-child:not(:last-child) {
+        border-radius: .25rem .25rem 0 0;
+    }
+
+    .btn-group .btn:last-child:not(:first-child),
+    .btn-group button:last-child:not(:first-child),
+    .btn-group [type="submit"]:last-child:not(:first-child) {
+        margin: 0;
+    }
+
+    .btn-group .btn:not(:first-child):not(:last-child),
+    .btn-group button:not(:first-child):not(:last-child),
+    .btn-group [type="submit"]:not(:first-child):not(:last-child) {
+        border-radius: 0 0 .25rem .25rem ;
+        margin: 0;
+    }
 }
 /* CODE */
 

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,8 +1,8 @@
-var gulp = require('gulp');
-var prop = require('./package.json');
-var minify = require('gulp-clean-css');
-var $ = require('gulp-load-plugins')();
-var head = '\/*\r\n* Cirrus ' + prop.version + `\r\n* Stanley Lim, Copyright ${(new Date()).getFullYear()}\r\n* https://spiderpig86.github.io/Cirrus\r\n*/\r\n`;
+const gulp = require('gulp');
+const prop = require('./package.json');
+const minify = require('gulp-clean-css');
+const $ = require('gulp-load-plugins')();
+const head = '\/*\r\n* Cirrus ' + prop.version + `\r\n* Stanley Lim, Copyright ${(new Date()).getFullYear()}\r\n* https://spiderpig86.github.io/Cirrus\r\n*/\r\n`;
 
 gulp.task('compile', () => {
     return gulp.src('./src/**/*.css')

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cirrus-ui",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "A lightweight UI framework written in CSS",
   "main": "./dist/cirrus.min.css",
   "filename": "cirrus.min.css",

diff --git a/src/core/button.css b/src/core/button.css
@@ -327,21 +327,6 @@ button span:last-child,
 [type="submit"] span:last-child {
     margin-left: 0.2rem;
 }
-/* Deprecated 0.5.5
-/* Button with accent 
-.btn-accent {
-    background-color: var(--cirrus-primary);
-    color: #fff;
-    border-color: var(--cirrus-accent-border);
-}
-
-.btn-accent:hover {
-    background-color: var(--cirrus-accent-hover);
-}
-
-.btn-accent:active {
-    background-color: var(--cirrus-accent-border);
-} */
 
 /* BUTTON GROUPS */
 /* Will group buttons with components in a single component */
@@ -402,4 +387,36 @@ button span:last-child,
     /* Style button in middle of group */
     border-radius: 0; /* Remove roundness from center buttons */
     margin-left: -0.1rem;
+}
+
+@media screen and (max-width: 768px) {
+    .btn-group {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .btn-group .btn,
+    .btn-group button,
+    .btn-group [type="submit"] {
+        margin-bottom: -1px;
+    }
+
+    .btn-group .btn:first-child:not(:last-child),
+    .btn-group button:first-child:not(:last-child),
+    .btn-group [type="submit"]:first-child:not(:last-child) {
+        border-radius: .25rem .25rem 0 0;
+    }
+
+    .btn-group .btn:last-child:not(:first-child),
+    .btn-group button:last-child:not(:first-child),
+    .btn-group [type="submit"]:last-child:not(:first-child) {
+        margin: 0;
+    }
+
+    .btn-group .btn:not(:first-child):not(:last-child),
+    .btn-group button:not(:first-child):not(:last-child),
+    .btn-group [type="submit"]:not(:first-child):not(:last-child) {
+        border-radius: 0 0 .25rem .25rem ;
+        margin: 0;
+    }
 }