inline_forms 8.0.3 → 8.1.0

data/lib/generators/assets/stylesheets/inline_forms.scss

@@ -1,491 +0,0 @@
-// inline_forms
-@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic);
-@import 'inline_forms/foundation_icons';
-@import '../jquery_ui/themes/jquery.ui.sunny.css.scss';
-@import '../jquery_ui/jquery.ui.all.css.scss';
-@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-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 {
-  margin: 2px 0 !important;
-}
-
-select {
-  background-color: #fff8e0 !important;
-  border: 0 !important;
-  margin: 2px 0 !important;
-  padding: 0;
-
-}
-select:hover, select:focus {
-  background-color: lighten(#fff8e0, 2%) !important;
-  border: 0 !important;
-}
-
-#inline_forms_application_top_bar {
-  background-color: #A3381E;
-  color: #FFFFFF;
-  &,
-  .menu,
-  .menu li,
-  .menu a {
-    background-color: #A3381E;
-    color: #FFFFFF;
-  }
-}
-
-#inline_forms_model_top_bar {
-  background-color: #E1C150;
-  padding-top: 45px;
-  height: 90px;
-  .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;
-  }
-}
-
-#inline_forms_model_top_bar_container {
-    z-index: 9;
-}
-
-#outer_container {
-  width: 100%;
-  position: absolute;
-  top: 90px;
-}
-
-.top-level a {
-  font-weight: bold;
-  font-size: 110%;
-}
-// Custom elements default to `display: inline`, which collapses the row layout
-// of a top-level `<turbo-frame id="apartments_list">` inside `#outer_container`.
-turbo-frame {
-  display: block;
-}
-#outer_container > turbo-frame.list_container {
-  display: block;
-  width: 100%;
-}
-.list_container {
-  .row {
-    font-size: 1.2rem;
-    font-weight: normal;
-    line-height: 2.2rem;
-    margin: 0 auto !important;
-  }
-  .odd {
-    background-color: #FBE38E;
-  }
-  .even {
-    background-color: #FBEEC1;
-  }
-}
-
-.inline_forms_list, .new_record {
-  .row.odd, .row.even {
-    font-size: 1rem !important;
-    font-weight: normal !important;
-  }
-  .row.form_element_header {
-    border-top: 1px solid #B94C32;
-    background-color: rgb(239, 202, 75);
-    font-weight: normal !important;
-    font-size: 1.3rem !important;
-  }
-}
-
-.new_record {
-  .button {
-    margin: 0;
-    padding: 0.5rem;
-  }
-}
-
-// Field edit cancel: outer <a> carries Turbo/UJS; inner input[type=button] matches ok height.
-.edit_form .row.collapse {
-  input[type="submit"].postfix.button,
-  a.inline_forms-field-cancel input[type="button"].postfix.button {
-    margin: 2px 0 !important;
-  }
-}
-
-.edit_form a.inline_forms-field-cancel {
-  display: inline-block;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  line-height: 0;
-  vertical-align: top;
-  text-decoration: none;
-
-  input[type="button"] {
-    pointer-events: none;
-    cursor: pointer;
-    width: auto;
-  }
-}
-
-.object_presentation {
-  background-color: #B94C32;
-  color: white;
-  .close_button  {
-    background-color: #B94C32;
-    font-size: 1.3rem;
-    padding: 0 1rem 0 1rem;
-    margin: 0;
-  }
-  .close_button:hover, .close_button:focus {
-    background-color: #B94C32;
-    color: #FBEEC1;
-    -webkit-transition-property: color;
-    transition-property: color;
-  }
-}
-
-.list_container {
-  .row.odd, .row.even {
-    font-size: 1rem !important;
-    font-weight: normal !important;
-  }
-  .row.form_element_header {
-    border-top: 1px solid #B94C32;
-    background-color: rgb(239, 202, 75);
-    font-weight: normal !important;
-    font-size: 1.3rem !important;
-  }
-}
-
-
-
-.associated_auto_header {
-  border-top: 1px solid #B94C32;
-  .new_button  {
-    background-color: rgb(239, 202, 75);
-    font-size: 1.5rem;
-    color: #B94C32;
-    padding: 0 0.5rem 0 1rem;
-    margin: 0;
-  }
-  .new_button:hover, .new_button:focus {
-    background-color: rgb(239, 202, 75);
-    color: white;
-    -webkit-transition-property: color;
-    transition-property: color;
-  }
-  .close_button  {
-    background-color: rgb(239, 202, 75);
-    font-size: 1.5rem;
-    color: #B94C32;
-    padding: 0 0.5rem 0 1rem;
-    margin: 0;
-  }
-  .close_button:hover, .new_button:focus {
-    background-color: rgb(239, 202, 75);
-    color: white;
-    -webkit-transition-property: color;
-    transition-property: color;
-  }
-}
-
-.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;
-    -webkit-transition-duration: 0.3s;
-    transition-property: color;
-    transition-duration: 0.3s;
-  }
-  em {
-    color: #B94C32;
-    font-weight: bold;
-    font-style: normal;
-  }
-  span.disabled {
-    color: #AAA;
-  }
-}
-
-.record_footer {
-  background-color: rgb(239, 202, 75);
-  height: 0.2em;
-  border-bottom: 1px solid #B94C32;
-  margin-bottom: 1.5em;
-}
-
-  .custom-combobox {
-    position: relative;
-    display: inline-block;
-  }
-  .custom-combobox-toggle {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    margin-left: -1px;
-    padding: 0;
-    /* support: IE7 */
-    *height: 1.7em;
-    *top: 0.1em;
-  }
-  .custom-combobox-input {
-    margin: 0;
-    padding: 0.3em;
-  }
-
-
-.column {
-    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: 0 !important;
-}
-
-#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;
-}
-
-.first-bar {
-  margin-bottom: 0 !important;
-}
-.second-bar {
-  margin-top: 1px !important;
-  margin-bottom: 0 !important;
-}
-
-.flash {
-  padding: 0.3em;
-  color: #A3381E;
-  font-size: 130%;
-  font-weight: bold;
-  line-height: 120%;
-  background-color: white;
-  border-top: 0.3em solid #fade7a;
-}
-
-.error {
-  color: #ffffff;
-  font-weight: bold;
-  background-color: #a70f0f;
-  padding: 0.3em;
-  margin-bottom: 0.5em;
-}
-.success {
-  color: #ffffff;
-  font-weight: bold;
-  border-bottom: 1px solid #cccccc;
-  background-color: #4f8d0d;
-  padding: 0.3em;
-  margin-bottom: 0.5em;
-}
-
-/* jQuery ui Slider 8 */
-.slider {
-    width: 300px;
-    float: left;
-}
-.slider_value {
-    float: left;
-    min-width: 60px;
-    text-align: right;
-    font-family: monospace;
-}
-
-
-/* LEFT */
-
-#category_id {
-  margin-top: -2px !important;
-}
-
-#input_search {
-  border: none !important;
-}