compass_radix 2.0.1 → 3.0.0

data/stylesheets/compass_radix/_mixin.scss

@@ -14,8 +14,8 @@
   min-height: 20px;
   padding: 19px;
   margin-bottom: 20px;
-  background-color: $wellBackground;
-  border: 1px solid darken($wellBackground, 7%);
+  background-color: $well-bg;
+  border: 1px solid darken($well-bg, 7%);
   @include border-radius(4px);
   @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
   blockquote {
@@ -26,52 +26,52 @@
 
 @mixin btn() {
   display: inline-block;
-  @include ctb-ie7-inline-block();
-  padding: 4px 12px;
-  margin-bottom: 0; // For input.btn
-  font-size: $baseFontSize;
-  line-height: $baseLineHeight;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  @include ctb-buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75));
-  border: 1px solid $btnBorder;
-  *border: 0; // Remove the border to prevent IE7's black border on input:focus
-  border-bottom-color: darken($btnBorder, 10%);
-  @include ctb-border-radius($baseBorderRadius);
-  @include ctb-ie7-restore-left-whitespace(); // Give IE7 some love
-  @include ctb-box-shadow(#{inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)});
-
-  // Hover state
-  &:hover {
-    color: $grayDark;
-    text-decoration: none;
-    background-position: 0 -15px;
+}
 
-    // transition is only when going to hover, otherwise the background
-    // behind the gradient (there for IE<=9 fallback) gets mismatched
-    @include ctb-transition(background-position .1s linear);
+/**
+ * Responsive mixin. 
+ *
+ * - phone
+ * - tablet-portrait
+ * - tablet-landscape-desktop
+ * - large-desktop
+ *
+ * Additional parameters for tagetting retina and non-retina
+ * devices
+ *
+ * - retina
+ * - non-retina
+ *
+ * Moreover, a specific value in px can be passed which is
+ * used to generate a max-width media query.
+ */
+@mixin respond-to($media) {
+  /* Landscape phones and down */
+  @if $media == phone {
+      @media (max-width: 480px) { @content; }
   }
-
-  // Focus state for keyboard and accessibility
-  &:focus {
-    @include ctb-tab-focus();
+  /* Landscape phone to portrait tablet */
+  @else if $media == tablet-portrait {
+      @media (max-width: 767px) {@content; }
   }
-
-  // Active state
-  &.active,
-  &:active {
-    background-image: none;
-    outline: 0;
-    @include ctb-box-shadow(#{inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)});
+  /* Portrait tablet to landscape and desktop */
+  @else if $media == tablet-landscape-desktop {
+      @media (min-width: 768px) and (max-width: 979px) { @content; }
   }
-
-  // Disabled state
-  &.disabled,
-  &[disabled] {
-    cursor: default;
-    background-image: none;
-    @include ctb-opacity(65);
-    @include ctb-box-shadow(none);
+  /* Large desktop */
+  @else if $media == large-desktop {
+      @media (min-width: 1200px) { @content; }
+  }
+  // Non-Retina
+  @else if $media == non-retina {
+      @media screen and (-webkit-max-device-pixel-ratio: 1) { @content; }
+  }
+  // Retina Only
+  @else if $media == retina {
+      @media screen and (-webkit-min-device-pixel-ratio: 2) { @content; }
   }
+  // Specific max width
+  @else {
+      @media only screen and (max-width: #{$media}px) { @content; }
+    }
 }

data/stylesheets/compass_radix/_node.scss

@@ -5,42 +5,6 @@
 // Miscellaneous
 // --------------------------------------------------
 .field {
-  &.field-type-image {
-    .field-item {
-      border: 1px solid #DDD;
-      padding: 5px;
-      background: #FFFFFF;
-      display: table;
-      @include border-radius(4px 4px 4px 4px);
-      @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.055));
-      @include clearfix();
-      margin-bottom: 10px;
-      img {
-        // width: 100%;
-        // max-width: 100%;
-        margin: 0;
-        padding: 0;
-      }
-    }
-  }
-  &.field-type-long-text {
-    img {
-      border: 1px solid #DDD;
-      padding: 5px;
-      margin: 0;
-      float: none !important;
-      width: 100%;
-      background: #FFFFFF;
-      @include border-radius(4px 4px 4px 4px);
-      @include box-shadow(0 1px 3px rgba(0, 0, 0, 0.055));
-      &[style*="float:left"], &[style*="float: left"] {
-        margin: 5px 15px 15px 0px;
-      }
-      &[style*="float:right"], &[style*="float: right"] {
-        margin: 5px 0px 15px 15px;
-      }
-    }
-  }
   img.panopoly-image-full,
   img.panopoly-image-half,
   img.panopoly-image-quarter {
@@ -61,11 +25,45 @@
   }
 }
 
-.field {
-  ul, ol {
-    list-style: inherit;
+// Panopoly News
+// --------------------------------------------------
+.node-panopoly-page {
+  // Teaser
+  &.node-teaser {
+    .panel-pane {
+      margin: 0 0 10px 260px;
+    }
+    .pane-node-field-featured-image {
+      float: left;
+      margin-left: 0;
+    }
   }
-  ol {
-    list-style: decimal;
+  @media (max-width: $screen-xs-max) {
+    .panel-pane {
+      float: none !important;
+      margin: 0 0 10px !important;
+    }
+  }
+}
+
+
+// Panopoly News
+// --------------------------------------------------
+.node-panopoly-news-article {
+  // Teaser
+  &.node-teaser {
+    .panel-pane {
+      margin: 0 0 10px 260px;
+    }
+    .pane-node-field-featured-image {
+      float: left;
+      margin-left: 0;
+    }
+  }
+  @media (max-width: $screen-xs-max) {
+    .panel-pane {
+      float: none !important;
+      margin: 0 0 10px !important;
+    }
   }
 }

data/stylesheets/compass_radix/_panel.scss

@@ -9,10 +9,17 @@
     margin-bottom: 20px;
   }
 }
+.panel-flexible .panel-separator {
+  display: none;
+}
 
 // IPE
 // --------------------------------------------------
-#panels-ipe-control-container {
+div#panels-ipe-control-container {
+  width: auto;
+  left: 0;
+  right: 0;
+  @include box-shadow(none);
   .panels-ipe-button-container {
     text-align: center;
     .panels-ipe-pseudobutton-container {
@@ -41,9 +48,13 @@
   }
 }
 
-// General
-// --------------------------------------------------
-.modal-content .form-actions {
-  padding-right: 0;
-  padding-left: 0;
+ul.panels-ipe-linkbar {
+  list-style: none outside none;
+  > li {
+    display: inline-block;
+    margin: 0 0 0 5px;
+    a {
+      margin: 0 !important;
+    }
+  }
 }

data/stylesheets/compass_radix/_structure.scss

@@ -27,6 +27,25 @@
   }
 }
 
+// Tabs
+// --------------------------------------------------
+.tabs, .nav-tabs {
+  margin: 0 0 18px;
+}
+
+// Action Links
+// --------------------------------------------------
+.action-links {
+  list-style: none outside none;
+  margin: 0 0 18px;
+  padding: 0;
+  @include clearfix();
+  > li {
+    float: left;
+    margin: 0 10px 0 0;
+  }
+}
+
 // Vertical Tabs
 // --------------------------------------------------
 div.vertical-tabs {
@@ -53,12 +72,12 @@ div.vertical-tabs {
         outline: none !important;
         @include border-radius(4px 0 0 4px);
         &:hover {
-          color: $white;
-          background: $linkColor;
+          color: #fff;
+          background: $link-color;
           text-decoration: none;
           strong {
             text-decoration: none;
-            color: $white;
+            color: #fff;
           }
         }
       }
@@ -69,37 +88,7 @@ div.vertical-tabs {
   }
   .form-type-textfield input {
     width: 90%;
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box;
-    box-sizing: content-box;
-  }
-}
-
-// Messages
-// --------------------------------------------------
-div.messages {
-  padding: 8px 35px 8px 14px;
-  margin: 0 0 18px;
-  color: #c09853;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  background-color: #fcf8e3;
-  background-image: none;
-  border: 1px solid #fbeed5;
-  @include border-radius(4px);
-  &.status {
-    color: #468847;
-    background-color: #dff0d8;
-    border-color: #d6e9c6;
-  }
-  &.error {
-    color: #b94a48;
-    background-color: #f2dede;
-    border-color: #eed3d7;
-  }
-  &.info {
-    color: #3a87ad;
-    background-color: #d9edf7;
-    border-color: #bce8f1;
+    @include box-sizing(content-box);
   }
 }
 
@@ -107,15 +96,15 @@ div.messages {
 // --------------------------------------------------
 table {
   width: 100%;
-  margin-bottom: $baseLineHeight;
+  margin-bottom: $line-height-base;
   // Cells
   th,
   td {
     padding: 8px;
-    line-height: $baseLineHeight;
+    line-height: $line-height-base;
     text-align: left;
     vertical-align: top;
-    border-top: 1px solid $tableBorder;
+    border-top: 1px solid $table-border-color;
     &.checkbox {
       text-align: center;
       input {
@@ -142,13 +131,15 @@ table {
   }
   // Account for multiple tbody instances
   tbody + tbody {
-    border-top: 2px solid $tableBorder;
+    border-top: 2px solid $table-border-color;
   }
 }
 
 // Links
 // --------------------------------------------------
 ul.links {
+  padding: 0;
+  list-style: none outside none;
   &.inline {
     margin: 0;
     li {
@@ -181,7 +172,7 @@ ul.links {
         bottom: 0;
         left: 0;
         width: 100%;
-        color: $white;
+        color: #fff;
         .field-slideshow-caption-text {
           display: block;
           padding: 20px;
@@ -204,7 +195,7 @@ ul.links {
       font-size: 60px;
       font-weight: 100;
       line-height: 30px;
-      color: $white;
+      color: #fff;
       text-align: center;
       background: #222222;
       border: 3px solid #ffffff;
@@ -216,7 +207,7 @@ ul.links {
         left: auto;
       }
       &:hover {
-        color: $white;
+        color: #fff;
         text-decoration: none;
         @include opacity(0.9);
       }
@@ -237,17 +228,17 @@ ul.links {
       width: 25px;
       height: 25px;
       line-height: 25px;
-      color: $white;
+      color: #fff;
       text-decoration: none;
       @include border-radius(25px);
       @include opacity(0.5);
       &:hover {
-        color: $white;
+        color: #fff;
         text-decoration: none;
         @include opacity(0.9);
       }
       &.activeSlide {
-        background: $linkColor;
+        background: $link-color;
         @include opacity(0.9);
       }
     }
@@ -271,16 +262,24 @@ ul.links {
     .filled {
       height: 40px;
       @include border-radius(4px);
-      @include ctb-gradient-striped($linkColor);
+      @include gradient-striped($link-color);
       @include background-size(40px 40px);
       @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
       @include box-sizing(border-box);
       @include transition(width .6s ease);
-      -webkit-animation: progress-bar-stripes 2s linear infinite;
-         -moz-animation: progress-bar-stripes 2s linear infinite;
-          -ms-animation: progress-bar-stripes 2s linear infinite;
-           -o-animation: progress-bar-stripes 2s linear infinite;
-              animation: progress-bar-stripes 2s linear infinite;
+      @include animation(progress-bar-stripes 2s linear infinite);
+    }
+  }
+}
+
+// Pager
+// --------------------------------------------------
+.item-list {
+  ul.pagination {
+    margin: 20px 0;
+    > li {
+      margin: 0;
+      display: inline-block;
     }
   }
 }
@@ -299,3 +298,152 @@ ul.dropdown-menu,
 ul.dropdown-menu li {
   list-style: none outside none !important;
 }
+
+// Drupal Navbar
+// --------------------------------------------------
+.drupal-navbar .navbar-bar,
+.drupal-navbar .navbar-tray-vertical > .navbar-lining:before,
+.drupal-navbar .navbar-tray-horizontal {
+  @include box-shadow(none);
+}
+.drupal-navbar .navbar-tray-vertical,
+.drupal-navbar .navbar-tray-vertical > .navbar-lining:before {
+  bottom: 0;
+  width: 240px !important;
+}
+@media only screen and (min-width: 38.125em) {
+  body.navbar-tray-open.navbar-vertical {
+    margin-left: 240px !important;
+  }
+}
+
+// Navbar Styling for Panopoly.
+// --------------------------------------------------
+a#navbar-link-admin-panopoly {
+  &:before {
+    background-image: url("../images/icon/icon-panopoly.png");
+  }
+  &.active:before {
+    background-image: url("../images/icon/icon-panopoly-active.png");
+  }
+}
+a#navbar-link-admin-apps {
+  &:before {
+    background-image: url("../images/icon/icon-apps.png");
+  }
+  &.active:before {
+    background-image: url("../images/icon/icon-apps-active.png");
+  }
+}
+
+// Ctools Modal
+// --------------------------------------------------
+body.ctools-modal-open {
+  overflow: hidden;
+}
+#modalContent {
+  .modal-content {
+    width: 100%;
+    overflow: hidden;
+    @include box-shadow(none !important);
+  }
+  #modal-content {
+    overflow: auto;
+    width: 100% !important;
+    background: white;
+  }
+  .panels-add-content-modal {
+    background: none;
+    padding: 0;
+    height: 100%;
+    margin: -20px -20px 0;
+    width: 100%;
+    position: absolute;
+  }
+}
+#modalContent {
+  .panels-section-columns, 
+  .panels-categories-description {
+    border: none;
+  }
+  .panels-section-column-categories {
+    margin-left: 0;
+    border-right: 1px solid #ccc;
+    height: 100%;
+    background: white;
+    overflow: auto;
+    padding-bottom: 20px;
+    .btn {
+      border: 1px solid $gray-light !important;
+      line-height: inherit;
+      margin: 0;
+      text-align: left;
+    }
+  }
+  .panels-categories-box {
+    border: 0;
+    a.btn {
+      padding: 5px 10px;
+    }
+    a.active {
+      background: $gray-lighter;
+      @include box-shadow(none);
+    }
+  }
+  .panels-root-content-box {
+    a.btn {
+      padding: 5px 10px;
+    }
+  }
+  .panels-categories-description {
+    padding: 20px;
+  }
+  .panels-section-columns {
+    padding-bottom: 20px;
+  }
+}
+#modal-content fieldset.widget-preview {
+  margin-top: 18px;
+  margin-bottom: 0;
+  position: static;
+  border: 1px solid #ddd;
+  .panel-heading {
+    position: relative;
+    .btn {
+      position: absolute;
+      right: 10px;
+      top: 5px;
+    }
+  }
+}
+#modal-content .ctools-auto-submit-full-form {
+  fieldset {
+    width: 48%;
+    display: block !important;
+    fieldset {
+      width: 100%;
+    }
+    &.widget-preview-single {
+      float: right;
+      margin-left: 1em;
+      margin-top: 0;
+      width: 48%;
+      max-width: 48% !important;
+    }
+  }
+  .form-actions {
+    float: right;
+    clear: right;
+    width: 48%;
+    max-width: 48%;
+    text-align: right;
+  }
+}
+
+// Custom modal form overrides.
+#modal-content .form-item-view-settings {
+  display: block;
+}
+#modal-content .form-item-exposed-use-pager {
+  display: block;
+}