Merge pull request #96 from ConciseCSS/keenan-fix-bugs

Keenan fix bugs
ConciseCSS · Jan 13, 2016 · 691642c · 691642c
2 parents 2ebc0d5 + 60c6948
commit 691642c
Show file tree

Hide file tree

Showing 15 changed files with 445 additions and 38 deletions.
diff --git a/dist/concise.css b/dist/concise.css
@@ -58,6 +58,8 @@ template,
   @media (min-width: 30em) {
     :root {
       font-size: 16px; } }
+  :root .nonresponsive {
+    font-size: 16px; }
 
 *,
 ::after,
@@ -258,6 +260,10 @@ button, input[type="submit"],
   form [row] {
     margin-bottom: 24px; } }
 
+.nonresponsive form, .nonresponsive
+form [row] {
+  margin-bottom: 24px; }
+
 input:not([type="submit"]),
 select,
 textarea {
@@ -421,6 +427,22 @@ input[type="range"] {
   .form--inline input + label {
     margin-left: 1em; } }
 
+.nonresponsive .form--inline input,
+.nonresponsive .form--inline select,
+.nonresponsive .form--inline textarea {
+  display: inline-block;
+  margin-bottom: 0;
+  vertical-align: middle;
+  width: auto; }
+
+.nonresponsive .form--inline label {
+  display: inline;
+  margin-right: .5em;
+  vertical-align: middle; }
+
+.nonresponsive .form--inline input + label {
+  margin-left: 1em; }
+
 .input--small {
   font-size: 0.75em;
   height: 24px; }
@@ -567,6 +589,27 @@ h6,
     .kilo {
       font-size: 3.25em; } }
 
+.nonresponsive h1,
+.nonresponsive .h1 {
+  font-size: 3em; }
+
+.nonresponsive h2,
+.nonresponsive .h2 {
+  font-size: 2.25em; }
+
+.nonresponsive h3,
+.nonresponsive .h3 {
+  font-size: 1.75em; }
+
+.nonresponsive .giga {
+  font-size: 5em; }
+
+.nonresponsive .mega {
+  font-size: 4em; }
+
+.nonresponsive .kilo {
+  font-size: 3.25em; }
+
 ul,
 ol {
   padding-left: 1.5em;
@@ -631,6 +674,23 @@ dd {
     .dl--horizontal dd:after {
       clear: both; } }
 
+.nonresponsive .dl--horizontal dt {
+  clear: left;
+  float: left;
+  overflow: hidden;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 150px; }
+
+.nonresponsive .dl--horizontal dd {
+  margin-left: 165px; }
+  .nonresponsive .dl--horizontal dd:before, .nonresponsive .dl--horizontal dd:after {
+    content: "";
+    display: table; }
+  .nonresponsive .dl--horizontal dd:after {
+    clear: both; }
+
 @media print {
   @page {
     margin: .5cm; }
@@ -791,6 +851,16 @@ table {
       table td {
         padding: 0 2.5em; } }
 
+.nonresponsive {
+  width: auto; }
+  .nonresponsive th,
+  .nonresponsive td {
+    padding: 0 2.5em; }
+
+.nonresponsive th,
+.nonresponsive td {
+  line-height: 48px; }
+
 .table--responsive {
   overflow: auto;
   width: 100%; }
@@ -879,7 +949,7 @@ sub {
 s {
   text-decoration: line-through; }
 
-p {
+p:not(:last-child) {
   margin-bottom: 20px; }
 
 a {
@@ -1033,6 +1103,75 @@ address {
   [column~="+11"] {
     margin-left: 91.66667%; } }
 
+.nonresponsive [column~="1"] {
+  width: 8.33333%; }
+
+.nonresponsive [column~="2"] {
+  width: 16.66667%; }
+
+.nonresponsive [column~="3"] {
+  width: 25%; }
+
+.nonresponsive [column~="4"] {
+  width: 33.33333%; }
+
+.nonresponsive [column~="5"] {
+  width: 41.66667%; }
+
+.nonresponsive [column~="6"] {
+  width: 50%; }
+
+.nonresponsive [column~="7"] {
+  width: 58.33333%; }
+
+.nonresponsive [column~="8"] {
+  width: 66.66667%; }
+
+.nonresponsive [column~="9"] {
+  width: 75%; }
+
+.nonresponsive [column~="10"] {
+  width: 83.33333%; }
+
+.nonresponsive [column~="11"] {
+  width: 91.66667%; }
+
+.nonresponsive [column~="12"] {
+  width: 100%; }
+
+.nonresponsive [column~="+1"] {
+  margin-left: 8.33333%; }
+
+.nonresponsive [column~="+2"] {
+  margin-left: 16.66667%; }
+
+.nonresponsive [column~="+3"] {
+  margin-left: 25%; }
+
+.nonresponsive [column~="+4"] {
+  margin-left: 33.33333%; }
+
+.nonresponsive [column~="+5"] {
+  margin-left: 41.66667%; }
+
+.nonresponsive [column~="+6"] {
+  margin-left: 50%; }
+
+.nonresponsive [column~="+7"] {
+  margin-left: 58.33333%; }
+
+.nonresponsive [column~="+8"] {
+  margin-left: 66.66667%; }
+
+.nonresponsive [column~="+9"] {
+  margin-left: 75%; }
+
+.nonresponsive [column~="+10"] {
+  margin-left: 83.33333%; }
+
+.nonresponsive [column~="+11"] {
+  margin-left: 91.66667%; }
+
 .text--muted {
   color: #aaa !important; }
 
@@ -1229,8 +1368,6 @@ address {
   margin: 20px 0;
   padding: 8px 1em;
   position: relative; }
-  .alert p {
-    margin: 0; }
   .alert a {
     color: #222222; }
     .alert a:hover {
@@ -1412,12 +1549,6 @@ a.alert-close:hover {
   display: block;
   margin-top: 10px; }
 
-.card-content p {
-  margin-bottom: 0; }
-
-.card-content p + p {
-  margin-bottom: 20px; }
-
 .card-footer {
   border-top: 1px solid #e0e0e0;
   font-size: 0.875em;
@@ -1605,6 +1736,7 @@ ol.dropdown-content {
   left: 0;
   margin: 0;
   opacity: 0;
+  overflow: scroll;
   pointer-events: none;
   position: fixed;
   right: 0;
@@ -1617,12 +1749,18 @@ ol.dropdown-content {
 
 .modal-container {
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
-  margin: 15% auto;
+  margin: 16px auto;
   position: relative;
   width: 90%; }
   @media (min-width: 48em) {
     .modal-container {
       width: 526px; } }
+  @media (min-height: 30em) {
+    .modal-container {
+      margin: 10% auto; } }
+  @media (min-height: 48em) {
+    .modal-container {
+      margin: 15% auto; } }
 
 .modal-header {
   background-color: #4591aa;
@@ -1640,17 +1778,13 @@ ol.dropdown-content {
   margin-top: 0; }
 
 .modal-body {
-  padding: 32px 2.5em 8px; }
-  .modal-body p {
-    margin-bottom: 24px; }
+  padding: 32px 2.5em; }
 
 .modal-footer {
   border-top: 1px solid #e0e0e0;
   font-size: 0.875em;
   margin: 0;
   padding: 24px 2.5em; }
-  .modal-footer p {
-    margin-bottom: 0; }
 
 .modal-close {
   color: white;

diff --git a/dist/concise.min.css b/dist/concise.min.css
diff --git a/src/addons/concise-ui/components/_alerts.scss b/src/addons/concise-ui/components/_alerts.scss
@@ -12,8 +12,6 @@
   padding: unitSize(1) 1em;
   position: relative;
 
-  p { margin: 0; }
-
   a {
     color: darken(getColor(text, primary), 20%);
 

diff --git a/src/addons/concise-ui/components/_cards.scss b/src/addons/concise-ui/components/_cards.scss
@@ -17,12 +17,6 @@
   margin-top: unitSize(1, 2);
 }
 
-.card-content {
-  p { margin-bottom: 0; }
-
-  p + p { margin-bottom: unitSize(3, -4); }
-}
-
 .card-footer {
   border-top: 1px solid getColor(base, lines);
   font-size: pxToEm(14);

diff --git a/src/addons/concise-ui/components/_modals.scss b/src/addons/concise-ui/components/_modals.scss
@@ -8,6 +8,7 @@
   left: 0;
   margin: 0;
   opacity: 0;
+  overflow: scroll;
   pointer-events: none;
   position: fixed;
   right: 0;
@@ -23,11 +24,19 @@
 
 .modal-container {
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .1);
-  margin: 15% auto;
+  margin: unitSize(2) auto;
   position: relative;
   width: 90%;
 
   @media (min-width: $bp-small) { width: 526px; }
+
+  @media (min-height: $bp-extra-small) {
+    margin: 10% auto;
+  }
+
+  @media (min-height: $bp-small) {
+    margin: 15% auto;
+  }
 }
 
 .modal-header {
@@ -49,19 +58,13 @@
   margin-top: 0;
 }
 
-.modal-body {
-  padding: unitSize(4) 2.5em unitSize(1);
-
-  p { margin-bottom: unitSize(3); }
-}
+.modal-body { padding: unitSize(4) 2.5em; }
 
 .modal-footer {
   border-top: 1px solid getColor(base, lines);
   font-size: pxToEm(14);
   margin: 0;
   padding: unitSize(3) 2.5em;
-
-  p { margin-bottom: 0; }
 }
 
 .modal-close {

diff --git a/src/core/globals/_globals.scss b/src/core/globals/_globals.scss
@@ -6,6 +6,9 @@
 // Base
 // ----
 
+// Non-responsive website
+$non-responsive: true !default;
+
 // Transition duration
 $transition-duration: 150ms !default;
 

diff --git a/src/core/layout/_base.scss b/src/core/layout/_base.scss
@@ -72,6 +72,10 @@ template,
   @media (min-width: $bp-extra-small) {
     font-size: $font-base-size + px;
   }
+
+  @if $non-responsive == true {
+    .nonresponsive { font-size: $font-base-size + px; }
+  }
 }
 
 *,