inline_forms 7.0.4 → 7.2.10

data/app/assets/stylesheets/inline_forms/foundation_and_overrides.scss

@@ -1,7 +1,65 @@
-@import 'foundation/functions';
+@charset 'utf-8';
 
-$include-html-classes: true;
-$include-html-global-classes: $include-html-classes;
-$font-family-sans-serif: "Open Sans", sans-serif;
+@import 'settings/settings';
+
+// Match F5 visual proportions: F5 `$row-width` was 62.5rem (1000px); F6
+// defaults to 75rem (1200px), which makes every `.row` 200px wider than
+// the inline_forms admin chrome was designed for. Override AFTER importing
+// settings (settings/_settings.scss assigns these without !default, so
+// pre-import overrides would lose).
+$global-width: 62.5rem;
+$grid-row-width: $global-width;
+
+$body-font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 
 @import 'foundation';
+
+@include foundation-global-styles;
+@include foundation-flex-grid;
+@include foundation-flex-classes;
+@include foundation-typography;
+@include foundation-forms;
+@include foundation-button;
+@include foundation-accordion;
+@include foundation-accordion-menu;
+@include foundation-badge;
+@include foundation-breadcrumbs;
+@include foundation-button-group;
+@include foundation-callout;
+@include foundation-card;
+@include foundation-close-button;
+@include foundation-menu;
+@include foundation-menu-icon;
+@include foundation-drilldown-menu;
+@include foundation-dropdown;
+@include foundation-dropdown-menu;
+@include foundation-responsive-embed;
+@include foundation-label;
+@include foundation-media-object;
+@include foundation-off-canvas;
+@include foundation-orbit;
+@include foundation-pagination;
+@include foundation-progress-bar;
+@include foundation-slider;
+@include foundation-sticky;
+@include foundation-reveal;
+@include foundation-switch;
+@include foundation-table;
+@include foundation-tabs;
+@include foundation-thumbnail;
+@include foundation-title-bar;
+@include foundation-tooltip;
+@include foundation-top-bar;
+@include foundation-visibility-classes;
+@include foundation-float-classes;
+
+// Foundation 5 compatibility (flex grid does not emit these class helpers)
+.button.expand {
+  @include button-expand(true);
+}
+
+.row .column.centered,
+.row .columns.centered {
+  margin-left: auto;
+  margin-right: auto;
+}

data/app/assets/stylesheets/inline_forms/inline_forms.scss

@@ -1,12 +1,133 @@
 // inline_forms
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic);
-@import 'foundation-icons';
+@import 'inline_forms/foundation_icons';
 @import 'themes/jquery.ui.sunny';
 @import 'jquery.ui.all';
 @import 'foundation_and_overrides';
 
+// Foundation 6 makes `.row` a flex container (`display: flex`); a nested
+// `.row` is therefore a flex item and shrinks to its content's intrinsic
+// width unless we tell it otherwise. Foundation 5's float-based `.row`
+// was a block element that filled its parent's width by default. The
+// inline-edit UJS swap (`show.js.erb`) inserts `_show.html.erb`'s outer
+// `<div class="row">` directly inside the list's `<div class="row top-level">`,
+// so without this override the inline-edit panel collapses to ~340px wide
+// and right-aligns inside the gold band instead of filling the row.
+.row .row {
+  flex: 1 1 100%;
+  width: 100%;
+  max-width: 100%;
+}
+
 .contain-to-grid {
-  background-color: $body-bg !important;
+  background-color: $body-background !important;
+}
+
+// Foundation 5 used to position .contain-to-grid.fixed at the top of the
+// viewport. Foundation 6 doesn't style that legacy class, so we reproduce
+// the stacking explicitly: the application top bar floats on top (z-index
+// 99, 45px tall) and the model top bar sits beneath it starting at top:0
+// with a 45px top-padding so its visible band runs 45..90px. Body content
+// is then positioned absolute at top:90px (see #outer_container).
+.contain-to-grid.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 62.5rem; // F5 $row-width (1000px); F6 $global-width is 1200px
+  width: 100%;
+  z-index: 99;
+}
+
+#inline_forms_model_top_bar_container.contain-to-grid.fixed {
+  z-index: 9;
+}
+
+// Compact the Foundation 6 `.top-bar` (default uses flex + 0.5rem padding +
+// natural line-height on the inner <h1>, which produces an ~80px tall bar)
+// so the application top bar matches the original 45px row.
+#inline_forms_application_top_bar.top-bar {
+  padding: 0;
+  min-height: 0;
+  height: 45px;
+  .menu-text {
+    padding: 0 1rem;
+  }
+  .menu-text h1 {
+    margin: 0 !important;
+    padding: 0;
+    font-size: 1rem;
+    line-height: 45px;
+    font-weight: normal;
+  }
+  .menu > li > a {
+    line-height: 45px;
+    padding: 0 1rem;
+    color: #FFFFFF;
+  }
+  // F6 dropdown-menu paints the `::after` triangle indicator with
+  // `border-color: $primary-color transparent ...` (default blue). The
+  // app top bar is dark red, so the blue arrow next to "More" / "Admin"
+  // looks broken; force the triangle to white to match the link text.
+  .is-dropdown-submenu-parent > a::after {
+    border-top-color: #FFFFFF;
+    border-color: #FFFFFF transparent transparent;
+  }
+  // F6 ships `.is-dropdown-submenu-parent > a { padding-right: 1.5rem }`
+  // to reserve space for the `::after` triangle, but our `.menu > li > a`
+  // override above clamps padding to `0 1rem` for ALL links and wins on
+  // specificity (id + 4 classes/elements). That leaves the triangle
+  // overlapping the text. Restore the extra right-padding for dropdown
+  // parents so there is a clear gap (>= 3px) between "More"/"Admin"
+  // and the triangle indicator.
+  .menu > li.is-dropdown-submenu-parent > a {
+    padding-right: 1.5rem;
+  }
+}
+
+// Match: model top bar is the wider gold band (height 90px, padded so its
+// usable area is in the lower 45px). Override Foundation 6's default
+// `.top-bar { padding: 0.5rem }` so our 45/90px math holds.
+#inline_forms_model_top_bar.top-bar {
+  padding: 45px 0 0 0;
+  min-height: 0;
+  .menu-text {
+    padding: 0 1rem;
+  }
+  .menu-text,
+  .menu-text h1,
+  .menu-text h1 a {
+    color: #FFFFFF;
+  }
+  .menu-text h1 {
+    margin: 0 !important;
+    padding: 0;
+    font-size: 1rem;
+    line-height: 45px;
+    font-weight: normal;
+  }
+  .menu > li > a {
+    line-height: 45px;
+    padding: 0 1rem;
+  }
+  // F6's `.menu` is `display: flex` with default `align-items: stretch`,
+  // which makes every <li> fill the bar's 45px content band. The search
+  // form's <li> contains a `.row.collapse` whose columns/buttons/input
+  // then sit at the top of the band, so the [x] / [zoek op naam...] /
+  // [zoek] trio looks 5..7px higher than "Apartments" (line-height 45px,
+  // centered) and the "+" new-record button (visually centered via its
+  // own padding). Center every <li> vertically and let the search row
+  // also center its column children, so the form chrome aligns with the
+  // rest of the bar without resorting to per-element `top: Npx` shims.
+  .top-bar-right > .menu {
+    align-items: center;
+  }
+  .top-bar-right > .menu > li > .row,
+  .top-bar-right > .menu > li form > .row {
+    align-items: center;
+  }
 }
 
 input {
@@ -26,42 +147,65 @@ select:hover, select:focus {
 }
 
 #inline_forms_application_top_bar {
+  background-color: #A3381E;
+  color: #FFFFFF;
+  &,
+  .menu,
+  .menu li,
+  .menu a {
     background-color: #A3381E;
     color: #FFFFFF;
-    .top-bar-section li a {
-      background-color: #A3381E;
-    }
+  }
 }
 
 #inline_forms_model_top_bar {
   background-color: #E1C150;
   padding-top: 45px;
   height: 90px;
-  .top-bar-section {
-    .right, li, .has-form {
-      background-color: #E1C150;
-    }
-    .inline_forms_model_top_bar_buttons {
-      top: 4px !important;
-      padding: 7px 0 7px 0 !important;
-      margin: 0 !important;
-    }
-    .new_button  {
-      background-color: #E1C150;
-      color: #B94C32;
-      font-size: 1.3rem;
-      padding: 0 2rem 0 1rem;
-    }
-    .new_button:hover, .new_button:focus {
-      color: white;
-      -webkit-transition-property: color;
-      transition-property: color;
-    }
-    input[type=text]:hover, input[type=text]:focus {
-      background-color: lighten(#fff8e0, 5%);
-      -webkit-transition-property: background-color;
-      transition-property: background-color;
-    }
+  .top-bar-right,
+  .menu,
+  .menu li,
+  .menu > li > a {
+    background-color: #E1C150;
+  }
+  // F6 buttons (`.button`) and inputs (`input[type=text]`) ship with
+  // different default heights -- buttons size to padding+line-height
+  // (~30px), inputs to F6's `$input-height` (default 2.4375rem ≈ 39px).
+  // In the search row that puts `[x]` and `[zoek]` shorter than the
+  // `zoek op naam...` input. Pin all three to the same 32px box so they
+  // line up like the F5 chrome did when `$topbar-height` was 45px.
+  // The vertical centering is handled by `align-items: center` above, so
+  // explicitly clear the legacy `top: 4px / 6px` shims that used to
+  // approximate centering on the F5 float-based bar.
+  .inline_forms_model_top_bar_buttons {
+    top: 0 !important;
+    height: 32px;
+    line-height: 32px;
+    padding: 0 0.5rem !important;
+    margin: 0 !important;
+  }
+  #input_search {
+    top: 0 !important;
+    height: 32px;
+    line-height: 32px;
+    padding: 0 0.5rem;
+    margin: 0 !important;
+  }
+  .new_button {
+    background-color: #E1C150;
+    color: #B94C32;
+    font-size: 1.3rem;
+    padding: 0 2rem 0 1rem;
+  }
+  .new_button:hover, .new_button:focus {
+    color: white;
+    -webkit-transition-property: color;
+    transition-property: color;
+  }
+  input[type=text]:hover, input[type=text]:focus {
+    background-color: lighten(#fff8e0, 5%);
+    -webkit-transition-property: background-color;
+    transition-property: background-color;
   }
 }
 
@@ -179,6 +323,19 @@ select:hover, select:focus {
 .pagination {
   font-weight: normal;
   font-size: 0.9em;
+  // Foundation 6's `_pagination.scss` (line 120) sets `.pagination a,
+  // .pagination button { display: block }` because it expects the
+  // canonical `<ul class="pagination"><li><a>...</a></li>...</ul>`
+  // markup, where the `<li>` is `display: inline-block` and the inner
+  // `<a>` fills it. will_paginate (used by `_list.html.erb` for nested
+  // has_many lists) emits flat `<a>`/`<span>`/`<em>` directly under
+  // `<div class="pagination">`, with no surrounding `<li>` to control
+  // layout, so F6's `display: block` makes every page link stack
+  // vertically -- in F5 (where the equivalent rule did not exist) they
+  // sat horizontally. Force inline-block here to match the F5 visuals.
+  a, span, em, button {
+    display: inline-block;
+  }
   a:hover {
     color: #B94C32;
     -webkit-transition-property: color;
@@ -227,11 +384,18 @@ select:hover, select:focus {
     padding-right: 0 !important;
 }
 
+// Legacy F5 vertical-centering hack: `.top-bar` was 45px tall and floats
+// pushed inputs/buttons against the top, so this `top: 4px` shim nudged
+// them down. The F6 model top bar centers its menu items via flex
+// (`align-items: center` on `.top-bar-right > .menu`), so this rule is
+// no longer needed; we keep `top: 0` to defuse any other site CSS that
+// might still reach in with a `top` shift.
 .top-bar input, .top-bar .button {
-  top: 4px !important;
+  top: 0 !important;
 }
 
-.top-bar-section {
+#inline_forms_model_top_bar .top-bar-right,
+#inline_forms_application_top_bar .top-bar-right {
   padding-left: rem-calc(12) !important;
   padding-right: rem-calc(12) !important;
 }
@@ -244,13 +408,6 @@ select:hover, select:focus {
   margin-bottom: 0 !important;
 }
 
-#switch_user_identifier {
-  font-size: smaller;
-  select {
-    width: 5em;
-  }
-}
-
 .flash {
   padding: 0.3em;
   color: #A3381E;
@@ -314,9 +471,4 @@ select:hover, select:focus {
 
 #input_search {
   border: none !important;
-  margin-top: -2px;
-}
-
-#inline_forms_model_top_bar .top-bar-section .inline_forms_model_top_bar_buttons {
-  top: 6px !important;
 }

data/app/assets/stylesheets/jquery_ui/jquery.ui.accordion.css.scss

@@ -0,0 +1,39 @@
+/*!
+ * jQuery UI Accordion 1.10.3
+ * http://jqueryui.com
+ *
+ * Copyright 2013 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Accordion#theming
+ */
+
+.ui-accordion .ui-accordion-header {
+	display: block;
+	cursor: pointer;
+	position: relative;
+	margin-top: 2px;
+	padding: .5em .5em .5em .7em;
+	min-height: 0; /* support: IE7 */
+}
+.ui-accordion .ui-accordion-icons {
+	padding-left: 2.2em;
+}
+.ui-accordion .ui-accordion-noicons {
+	padding-left: .7em;
+}
+.ui-accordion .ui-accordion-icons .ui-accordion-icons {
+	padding-left: 2.2em;
+}
+.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
+	position: absolute;
+	left: .5em;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-accordion .ui-accordion-content {
+	padding: 1em 2.2em;
+	border-top: 0;
+	overflow: auto;
+}

data/app/assets/stylesheets/jquery_ui/jquery.ui.all.css.scss

@@ -0,0 +1,14 @@
+/*!
+ * jQuery UI CSS Framework 1.10.3
+ * http://jqueryui.com
+ *
+ * Copyright 2013 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming
+ */
+
+@import 'jquery.ui.base';
+@import 'jquery.ui.theme';
+

data/app/assets/stylesheets/jquery_ui/jquery.ui.autocomplete.css.scss

@@ -0,0 +1,17 @@
+/*!
+ * jQuery UI Autocomplete 1.10.3
+ * http://jqueryui.com
+ *
+ * Copyright 2013 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Autocomplete#theming
+ */
+
+.ui-autocomplete {
+	position: absolute;
+	top: 0;
+	left: 0;
+	cursor: default;
+}

data/app/assets/stylesheets/jquery_ui/jquery.ui.base.css.scss

@@ -0,0 +1,27 @@
+/*!
+ * jQuery UI CSS Framework 1.10.3
+ * http://jqueryui.com
+ *
+ * Copyright 2013 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming
+ */
+
+@import 'jquery.ui.core';
+
+@import 'jquery.ui.accordion';
+@import 'jquery.ui.autocomplete';
+@import 'jquery.ui.button';
+@import 'jquery.ui.datepicker';
+@import 'jquery.ui.dialog';
+@import 'jquery.ui.menu';
+@import 'jquery.ui.progressbar';
+@import 'jquery.ui.resizable';
+@import 'jquery.ui.selectable';
+@import 'jquery.ui.slider';
+@import 'jquery.ui.spinner';
+@import 'jquery.ui.tabs';
+@import 'jquery.ui.tooltip';
+

data/app/assets/stylesheets/jquery_ui/jquery.ui.button.css.scss

@@ -0,0 +1,115 @@
+/*!
+ * jQuery UI Button 1.10.3
+ * http://jqueryui.com
+ *
+ * Copyright 2013 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Button#theming
+ */
+
+.ui-button {
+	display: inline-block;
+	position: relative;
+	padding: 0;
+	line-height: normal;
+	margin-right: .1em;
+	cursor: pointer;
+	vertical-align: middle;
+	text-align: center;
+	overflow: visible; /* removes extra width in IE */
+}
+.ui-button,
+.ui-button:link,
+.ui-button:visited,
+.ui-button:hover,
+.ui-button:active {
+	text-decoration: none;
+}
+/* to make room for the icon, a width needs to be set here */
+.ui-button-icon-only {
+	width: 2.2em;
+}
+/* button elements seem to need a little more width */
+button.ui-button-icon-only {
+	width: 2.4em;
+}
+.ui-button-icons-only {
+	width: 3.4em;
+}
+button.ui-button-icons-only {
+	width: 3.7em;
+}
+
+/* button text element */
+.ui-button .ui-button-text {
+	display: block;
+	line-height: normal;
+}
+.ui-button-text-only .ui-button-text {
+	padding: .4em 1em;
+}
+.ui-button-icon-only .ui-button-text,
+.ui-button-icons-only .ui-button-text {
+	padding: .4em;
+	text-indent: -9999999px;
+}
+.ui-button-text-icon-primary .ui-button-text,
+.ui-button-text-icons .ui-button-text {
+	padding: .4em 1em .4em 2.1em;
+}
+.ui-button-text-icon-secondary .ui-button-text,
+.ui-button-text-icons .ui-button-text {
+	padding: .4em 2.1em .4em 1em;
+}
+.ui-button-text-icons .ui-button-text {
+	padding-left: 2.1em;
+	padding-right: 2.1em;
+}
+/* no icon support for input elements, provide padding by default */
+input.ui-button {
+	padding: .4em 1em;
+}
+
+/* button icon element(s) */
+.ui-button-icon-only .ui-icon,
+.ui-button-text-icon-primary .ui-icon,
+.ui-button-text-icon-secondary .ui-icon,
+.ui-button-text-icons .ui-icon,
+.ui-button-icons-only .ui-icon {
+	position: absolute;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-button-icon-only .ui-icon {
+	left: 50%;
+	margin-left: -8px;
+}
+.ui-button-text-icon-primary .ui-button-icon-primary,
+.ui-button-text-icons .ui-button-icon-primary,
+.ui-button-icons-only .ui-button-icon-primary {
+	left: .5em;
+}
+.ui-button-text-icon-secondary .ui-button-icon-secondary,
+.ui-button-text-icons .ui-button-icon-secondary,
+.ui-button-icons-only .ui-button-icon-secondary {
+	right: .5em;
+}
+
+/* button sets */
+.ui-buttonset {
+	margin-right: 7px;
+}
+.ui-buttonset .ui-button {
+	margin-left: 0;
+	margin-right: -.3em;
+}
+
+/* workarounds */
+/* reset extra padding in Firefox, see h5bp.com/l */
+input.ui-button::-moz-focus-inner,
+button.ui-button::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}

data/app/assets/stylesheets/jquery_ui/jquery.ui.core.css.scss

@@ -0,0 +1,92 @@
+/*!
+ * jQuery UI CSS Framework 1.10.0
+ * http://jqueryui.com
+ *
+ * Copyright 2013 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-hidden-accessible {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+}
+.ui-helper-clearfix:after {
+	clear: both;
+}
+.ui-helper-clearfix {
+	min-height: 0; /* support: IE7 */
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	filter:Alpha(Opacity=0);
+}
+
+.ui-front {
+	z-index: 100;
+}
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+}
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	display: block;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+}
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}