decidim-admin 0.0.1.alpha3

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: bea8dfa41c3c824cebe6c6211ea6de9f9eeb6257
+  data.tar.gz: e815b2da931c6f68006b0bb6b262b28c8ea4bc1b
+SHA512:
+  metadata.gz: 597c1fd106c0337257326e79eef44a2386d0f933948be372ae2512cdf426cee5e6bb8acdd7a7fa2dbcef4fe8a31aea08c2d380ded169ece3ed107e721a013564
+  data.tar.gz: 83fc96e9172b5f6b1b6789e391028a3311992d66661cefa5e3e9b3c3528ad57b831a835957a691aeb55b288790b6d2486e4597ae152f2e8e9d2df874ad520b11

data/README.md

@@ -0,0 +1,28 @@
+# Decidim::Admin
+Short description and motivation.
+
+## Usage
+How to use my plugin.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'decidim-admin'
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install decidim-admin
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+begin
+  require "bundler/setup"
+rescue LoadError
+  puts "You must `gem install bundler` and `bundle install` to run rake tasks"
+end
+
+require "decidim/common_rake"
+require "rdoc/task"
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = "rdoc"
+  rdoc.title    = "Decidim::Admin"
+  rdoc.options << "--line-numbers"
+  rdoc.rdoc_files.include("README.md")
+  rdoc.rdoc_files.include("lib/**/*.rb")
+end
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+
+begin
+  require "rspec/core/rake_task"
+  RSpec::Core::RakeTask.new(:spec)
+  ENV["ENGINE_PATH"] = File.dirname(__FILE__)
+
+  task default: :spec
+
+  Rake::Task["spec"].enhance ["common:test_app"]
+rescue LoadError
+end

data/app/assets/config/decidim_admin_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/decidim/admin.js
+//= link_directory ../stylesheets/decidim/admin.css

data/app/assets/javascripts/decidim/admin.js

@@ -0,0 +1,21 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require jquery
+//= require jquery.turbolinks
+//= require jquery_ujs
+//= require foundation
+//= require_self
+
+$(function(){ $(document).foundation(); });
+
+//= require turbolinks

data/app/assets/stylesheets/decidim/admin.scss

@@ -0,0 +1,8 @@
+@import 'https://fonts.googleapis.com/css?family=Montserrat:400,700';
+
+@import "admin/foundation_and_overrides";
+@import "admin/layout";
+@import "admin/login";
+@import "admin/sidebar";
+@import "admin/tables";
+@import "admin/actions";

data/app/assets/stylesheets/decidim/admin/_actions.scss

@@ -0,0 +1,8 @@
+.actions{
+  text-align: right;
+
+  &.title{
+    margin-bottom: $global-margin;
+    font-size: 1.2em;
+  }
+}

data/app/assets/stylesheets/decidim/admin/_foundation_and_overrides.scss

@@ -0,0 +1,52 @@
+@charset "utf-8";
+
+@import "settings";
+@import "foundation";
+
+// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
+//
+// @import 'motion-ui/motion-ui';
+
+// We include everything by default.  To slim your CSS, remove components you don't use.
+
+@include foundation-global-styles;
+@include foundation-flex-grid;
+@include foundation-typography;
+@include foundation-button;
+@include foundation-forms;
+@include foundation-visibility-classes;
+@include foundation-flex-classes;
+@include foundation-accordion;
+@include foundation-accordion-menu;
+@include foundation-badge;
+@include foundation-breadcrumbs;
+@include foundation-button-group;
+@include foundation-callout;
+@include foundation-close-button;
+@include foundation-drilldown-menu;
+@include foundation-dropdown;
+@include foundation-dropdown-menu;
+@include foundation-flex-video;
+@include foundation-label;
+@include foundation-media-object;
+@include foundation-menu;
+@include foundation-menu-icon;
+@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;
+
+// If you'd like to include motion-ui the foundation-rails gem comes prepackaged with it, uncomment the 3 @imports, if you are not using the gem you need to install the motion-ui sass package.
+//
+// @include motion-ui-transitions;
+// @include motion-ui-animations;

data/app/assets/stylesheets/decidim/admin/_layout.scss

@@ -0,0 +1,16 @@
+.off-canvas, .sidebar, .off-canvas-wrapper{
+  min-height: 100vh;
+}
+
+.off-canvas{
+  color: #fff;
+}
+
+.main-content{
+  padding: $global-padding 0;
+  min-height: 100vh;
+}
+
+.page-title{
+  margin-bottom: $global-margin;
+}

data/app/assets/stylesheets/decidim/admin/_login.scss

@@ -0,0 +1,36 @@
+body.login{
+  background: $light-gray;
+  position: relative;
+
+  .login-form-wrapper{
+    @include grid-row;
+    @include flex;
+
+    height: 100vh;
+
+    .login-form{
+      @include grid-column(12);
+      @include grid-column-position(center);
+
+      @include breakpoint(medium){
+        @include grid-column(8);
+        @include grid-column-position(center);
+      }
+
+      @include breakpoint(large){
+        @include grid-column(6);
+        @include grid-column-position(center);
+      }
+    }
+
+    @include breakpoint(medium){
+      @include flex-align(center, middle);
+      transform: translateY(-8%);
+    }
+
+    .login-form-inner{
+      background-color: $white;
+      padding: $global-padding;
+    }
+  }
+}

data/app/assets/stylesheets/decidim/admin/_settings.scss

@@ -0,0 +1,566 @@
+//  Foundation for Sites Settings
+//  -----------------------------
+//
+//  Table of Contents:
+//
+//   1. Global
+//   2. Breakpoints
+//   3. The Grid
+//   4. Base Typography
+//   5. Typography Helpers
+//   6. Abide
+//   7. Accordion
+//   8. Accordion Menu
+//   9. Badge
+//  10. Breadcrumbs
+//  11. Button
+//  12. Button Group
+//  13. Callout
+//  14. Close Button
+//  15. Drilldown
+//  16. Dropdown
+//  17. Dropdown Menu
+//  18. Flex Video
+//  19. Forms
+//  20. Label
+//  21. Media Object
+//  22. Menu
+//  23. Meter
+//  24. Off-canvas
+//  25. Orbit
+//  26. Pagination
+//  27. Progress Bar
+//  28. Reveal
+//  29. Slider
+//  30. Switch
+//  31. Table
+//  32. Tabs
+//  33. Thumbnail
+//  34. Title Bar
+//  35. Tooltip
+//  36. Top Bar
+
+@import "util/util";
+
+// 1. Global
+// ---------
+
+// $global-font-size: 100%;
+// $global-width: rem-calc(1200);
+// $global-lineheight: 1.5;
+$foundation-palette: (
+  primary: #2199e8,
+  secondary: #777,
+  success: #3adb76,
+  warning: #ffae00,
+  alert: #ec5840,
+);
+$light-gray: #e6e6e6;
+// $medium-gray: #cacaca;
+// $dark-gray: #8a8a8a;
+$black: #232323;
+// $white: #fefefe;
+// $body-background: $white;
+// $body-font-color: $black;
+$body-font-family: 'Montserrat', sans-serif;
+// $body-antialiased: true;
+// $global-margin: 1rem;
+// $global-padding: 1rem;
+// $global-weight-normal: normal;
+// $global-weight-bold: bold;
+// $global-radius: 0;
+// $global-text-direction: ltr;
+$global-flexbox: true;
+// $print-transparent-backgrounds: true;
+
+@include add-foundation-colors;
+
+// 2. Breakpoints
+// --------------
+
+// $breakpoints: (
+//   small: 0,
+//   medium: 640px,
+//   large: 1024px,
+//   xlarge: 1200px,
+//   xxlarge: 1440px,
+// );
+// $breakpoint-classes: (small medium large);
+
+// 3. The Grid
+// -----------
+
+// $grid-row-width: $global-width;
+// $grid-column-count: 12;
+// $grid-column-gutter: (
+//   small: 20px,
+//   medium: 30px,
+// );
+// $grid-column-align-edge: true;
+// $block-grid-max: 8;
+
+// 4. Base Typography
+// ------------------
+
+// $header-font-family: $body-font-family;
+// $header-font-weight: $global-weight-normal;
+// $header-font-style: normal;
+// $font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+// $header-sizes: (
+//   small: (
+//     'h1': 24,
+//     'h2': 20,
+//     'h3': 19,
+//     'h4': 18,
+//     'h5': 17,
+//     'h6': 16,
+//   ),
+//   medium: (
+//     'h1': 48,
+//     'h2': 40,
+//     'h3': 31,
+//     'h4': 25,
+//     'h5': 20,
+//     'h6': 16,
+//   ),
+// );
+// $header-color: inherit;
+// $header-lineheight: 1.4;
+// $header-margin-bottom: 0.5rem;
+// $header-text-rendering: optimizeLegibility;
+// $small-font-size: 80%;
+// $header-small-font-color: $medium-gray;
+// $paragraph-lineheight: 1.6;
+// $paragraph-margin-bottom: 1rem;
+// $paragraph-text-rendering: optimizeLegibility;
+// $code-color: $black;
+// $code-font-family: $font-family-monospace;
+// $code-font-weight: $global-weight-normal;
+// $code-background: $light-gray;
+// $code-border: 1px solid $medium-gray;
+// $code-padding: rem-calc(2 5 1);
+// $anchor-color: $primary-color;
+// $anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+// $anchor-text-decoration: none;
+// $anchor-text-decoration-hover: none;
+// $hr-width: $global-width;
+// $hr-border: 1px solid $medium-gray;
+// $hr-margin: rem-calc(20) auto;
+// $list-lineheight: $paragraph-lineheight;
+// $list-margin-bottom: $paragraph-margin-bottom;
+// $list-style-type: disc;
+// $list-style-position: outside;
+// $list-side-margin: 1.25rem;
+// $list-nested-side-margin: 1.25rem;
+// $defnlist-margin-bottom: 1rem;
+// $defnlist-term-weight: $global-weight-bold;
+// $defnlist-term-margin-bottom: 0.3rem;
+// $blockquote-color: $dark-gray;
+// $blockquote-padding: rem-calc(9 20 0 19);
+// $blockquote-border: 1px solid $medium-gray;
+// $cite-font-size: rem-calc(13);
+// $cite-color: $dark-gray;
+// $keystroke-font: $font-family-monospace;
+// $keystroke-color: $black;
+// $keystroke-background: $light-gray;
+// $keystroke-padding: rem-calc(2 4 0);
+// $keystroke-radius: $global-radius;
+// $abbr-underline: 1px dotted $black;
+
+// 5. Typography Helpers
+// ---------------------
+
+// $lead-font-size: $global-font-size * 1.25;
+// $lead-lineheight: 1.6;
+// $subheader-lineheight: 1.4;
+// $subheader-color: $dark-gray;
+// $subheader-font-weight: $global-weight-normal;
+// $subheader-margin-t#23262Cop: 0.2rem;
+// $subheader-margin-bottom: 0.5rem;
+// $stat-font-size: 2.5rem;
+
+// 6. Abide
+// --------
+
+// $abide-inputs: true;
+// $abide-labels: true;
+// $input-background-invalid: map-get($foundation-palette, alert);
+// $form-label-color-invalid: map-get($foundation-palette, alert);
+// $input-error-color: map-get($foundation-palette, alert);
+// $input-error-font-size: rem-calc(12);
+// $input-error-font-weight: $global-weight-bold;
+
+// 7. Accordion
+// ------------
+
+// $accordion-background: $white;
+// $accordion-plusminus: true;
+// $accordion-item-color: foreground($accordion-background, $primary-color);
+// $accordion-item-background-hover: $light-gray;
+// $accordion-item-padding: 1.25rem 1rem;
+// $accordion-content-background: $white;
+// $accordion-content-border: 1px solid $light-gray;
+// $accordion-content-color: foreground($accordion-content-background, $body-font-color);
+// $accordion-content-padding: 1rem;
+
+// 8. Accordion Menu
+// -----------------
+
+// $accordionmenu-arrows: true;
+// $accordionmenu-arrow-color: $primary-color;
+
+// 9. Badge
+// --------
+
+// $badge-background: $primary-color;
+// $badge-color: foreground($badge-background);
+// $badge-padding: 0.3em;
+// $badge-minwidth: 2.1em;
+// $badge-font-size: 0.6rem;
+
+// 10. Breadcrumbs
+// ---------------
+
+// $breadcrumbs-margin: 0 0 $global-margin 0;
+// $breadcrumbs-item-font-size: rem-calc(11);
+// $breadcrumbs-item-color: $primary-color;
+// $breadcrumbs-item-color-current: $black;
+// $breadcrumbs-item-color-disabled: $medium-gray;
+// $breadcrumbs-item-margin: 0.75rem;
+// $breadcrumbs-item-uppercase: true;
+// $breadcrumbs-item-slash: true;
+
+// 11. Button
+// ----------
+
+// $button-padding: 0.85em 1em;
+$button-margin: 0;
+// $button-fill: solid;
+// $button-background: $primary-color;
+// $button-background-hover: scale-color($button-background, $lightness: -15%);
+// $button-color: $white;
+// $button-color-alt: $black;
+// $button-radius: $global-radius;
+// $button-sizes: (
+//   tiny: 0.6rem,
+//   small: 0.75rem,
+//   default: 0.9rem,
+//   large: 1.25rem,
+// );
+// $button-opacity-disabled: 0.25;
+
+// 12. Button Group
+// ----------------
+
+// $buttongroup-margin: 1rem;
+// $buttongroup-spacing: 1px;
+// $buttongroup-child-selector: ".button";
+// $buttongroup-expand-max: 6;
+
+// 13. Callout
+// -----------
+
+// $callout-background: $white;
+// $callout-background-fade: 85%;
+// $callout-border: 1px solid rgba($black, 0.25);
+// $callout-margin: 0 0 1rem 0;
+// $callout-padding: 1rem;
+// $callout-font-color: $body-font-color;
+// $callout-font-color-alt: $body-background;
+// $callout-radius: $global-radius;
+// $callout-link-tint: 30%;
+
+// 14. Close Button
+// ----------------
+
+// $closebutton-position: right top;
+// $closebutton-offset-horizontal: 1rem;
+// $closebutton-offset-vertical: 0.5rem;
+// $closebutton-size: 2em;
+// $closebutton-lineheight: 1;
+// $closebutton-color: $dark-gray;
+// $closebutton-color-hover: $black;
+
+// 15. Drilldown
+// -------------
+
+// $drilldown-transition: transform 0.15s linear;
+// $drilldown-arrows: true;
+// $drilldown-arrow-color: $primary-color;
+// $drilldown-background: $white;
+
+// 16. Dropdown
+// ------------
+
+// $dropdown-padding: 1rem;
+// $dropdown-border: 1px solid $medium-gray;
+// $dropdown-font-size: 1rem;
+// $dropdown-width: 300px;
+// $dropdown-radius: $global-radius;
+// $dropdown-sizes: (
+//   tiny: 100px,
+//   small: 200px,
+//   large: 400px,
+// );
+
+// 17. Dropdown Menu
+// -----------------
+
+// $dropdownmenu-arrows: true;
+// $dropdownmenu-arrow-color: $anchor-color;
+// $dropdownmenu-min-width: 200px;
+// $dropdownmenu-background: $white;
+// $dropdownmenu-border: 1px solid $medium-gray;
+
+// 18. Flex Video
+// --------------
+
+// $flexvideo-margin-bottom: rem-calc(16);
+// $flexvideo-ratio: 4 by 3;
+// $flexvideo-ratio-widescreen: 16 by 9;
+
+// 19. Forms
+// ---------
+
+// $fieldset-border: 1px solid $medium-gray;
+// $fieldset-padding: rem-calc(20);
+// $fieldset-margin: rem-calc(18 0);
+// $legend-padding: rem-calc(0 3);
+// $form-spacing: rem-calc(16);
+// $helptext-color: $black;
+// $helptext-font-size: rem-calc(13);
+// $helptext-font-style: italic;
+// $input-prefix-color: $black;
+// $input-prefix-background: $light-gray;
+// $input-prefix-border: 1px solid $medium-gray;
+// $input-prefix-padding: 1rem;
+// $form-label-color: $black;
+// $form-label-font-size: rem-calc(14);
+// $form-label-font-weight: $global-weight-normal;
+// $form-label-line-height: 1.8;
+// $select-background: $white;
+// $select-triangle-color: $dark-gray;
+// $select-radius: $global-radius;
+// $input-color: $black;
+// $input-placeholder-color: $medium-gray;
+// $input-font-family: inherit;
+// $input-font-size: rem-calc(16);
+// $input-background: $white;
+// $input-background-focus: $white;
+// $input-background-disabled: $light-gray;
+// $input-border: 1px solid $medium-gray;
+// $input-border-focus: 1px solid $dark-gray;
+// $input-shadow: inset 0 1px 2px rgba($black, 0.1);
+// $input-shadow-focus: 0 0 5px $medium-gray;
+// $input-cursor-disabled: not-allowed;
+// $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+// $input-number-spinners: true;
+// $input-radius: $global-radius;
+
+// 20. Label
+// ---------
+
+// $label-background: $primary-color;
+// $label-color: foreground($label-background);
+// $label-font-size: 0.8rem;
+// $label-padding: 0.33333rem 0.5rem;
+// $label-radius: $global-radius;
+
+// 21. Media Object
+// ----------------
+
+// $mediaobject-margin-bottom: $global-margin;
+// $mediaobject-section-padding: $global-padding;
+// $mediaobject-image-width-stacked: 100%;
+
+// 22. Menu
+// --------
+
+// $menu-margin: 0;
+// $menu-margin-nested: 1rem;
+// $menu-item-padding: 0.7rem 1rem;
+// $menu-item-color-active: $white;
+// $menu-item-background-active: map-get($foundation-palette, primary);
+// $menu-icon-spacing: 0.25rem;
+
+// 23. Meter
+// ---------
+
+// $meter-height: 1rem;
+// $meter-radius: $global-radius;
+// $meter-background: $medium-gray;
+// $meter-fill-good: $success-color;
+// $meter-fill-medium: $warning-color;
+// $meter-fill-bad: $alert-color;
+
+// 24. Off-canvas
+// --------------
+
+// $offcanvas-size: 250px;
+$offcanvas-background: $black;
+// $offcanvas-zindex: -1;
+// $offcanvas-transition-length: 0.5s;
+// $offcanvas-transition-timing: ease;
+// $offcanvas-fixed-reveal: true;
+// $offcanvas-exit-background: rgba($white, 0.25);
+// $maincontent-class: "off-canvas-content";
+$maincontent-shadow: none;
+
+// 25. Orbit
+// ---------
+
+// $orbit-bullet-background: $medium-gray;
+// $orbit-bullet-background-active: $dark-gray;
+// $orbit-bullet-diameter: 1.2rem;
+// $orbit-bullet-margin: 0.1rem;
+// $orbit-bullet-margin-top: 0.8rem;
+// $orbit-bullet-margin-bottom: 0.8rem;
+// $orbit-caption-background: rgba($black, 0.5);
+// $orbit-caption-padding: 1rem;
+// $orbit-control-background-hover: rgba($black, 0.5);
+// $orbit-control-padding: 1rem;
+// $orbit-control-zindex: 10;
+
+// 26. Pagination
+// --------------
+
+// $pagination-font-size: rem-calc(14);
+// $pagination-margin-bottom: $global-margin;
+// $pagination-item-color: $black;
+// $pagination-item-padding: rem-calc(3 10);
+// $pagination-item-spacing: rem-calc(1);
+// $pagination-radius: $global-radius;
+// $pagination-item-background-hover: $light-gray;
+// $pagination-item-background-current: $primary-color;
+// $pagination-item-color-current: foreground($pagination-item-background-current);
+// $pagination-item-color-disabled: $medium-gray;
+// $pagination-ellipsis-color: $black;
+// $pagination-mobile-items: false;
+// $pagination-arrows: true;
+
+// 27. Progress Bar
+// ----------------
+
+// $progress-height: 1rem;
+// $progress-background: $medium-gray;
+// $progress-margin-bottom: $global-margin;
+// $progress-meter-background: $primary-color;
+// $progress-radius: $global-radius;
+
+// 28. Reveal
+// ----------
+
+// $reveal-background: $white;
+// $reveal-width: 600px;
+// $reveal-max-width: $global-width;
+// $reveal-padding: $global-padding;
+// $reveal-border: 1px solid $medium-gray;
+// $reveal-radius: $global-radius;
+// $reveal-zindex: 1005;
+// $reveal-overlay-background: rgba($black, 0.45);
+
+// 29. Slider
+// ----------
+
+// $slider-width-vertical: 0.5rem;
+// $slider-transition: all 0.2s ease-in-out;
+// $slider-height: 0.5rem;
+// $slider-background: $light-gray;
+// $slider-fill-background: $medium-gray;
+// $slider-handle-height: 1.4rem;
+// $slider-handle-width: 1.4rem;
+// $slider-handle-background: $primary-color;
+// $slider-opacity-disabled: 0.25;
+// $slider-radius: $global-radius;
+
+// 30. Switch
+// ----------
+
+// $switch-background: $medium-gray;
+// $switch-background-active: $primary-color;
+// $switch-height: 2rem;
+// $switch-height-tiny: 1.5rem;
+// $switch-height-small: 1.75rem;
+// $switch-height-large: 2.5rem;
+// $switch-radius: $global-radius;
+// $switch-margin: $global-margin;
+// $switch-paddle-background: $white;
+// $switch-paddle-offset: 0.25rem;
+// $switch-paddle-radius: $global-radius;
+// $switch-paddle-transition: all 0.25s ease-out;
+
+// 31. Table
+// ---------
+
+// $table-background: $white;
+// $table-color-scale: 5%;
+// $table-border: 1px solid smart-scale($table-background, $table-color-scale);
+// $table-padding: rem-calc(8 10 10);
+// $table-hover-scale: 2%;
+// $table-row-hover: darken($table-background, $table-hover-scale);
+// $table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+// $table-striped-background: smart-scale($table-background, $table-color-scale);
+// $table-stripe: even;
+// $table-head-background: smart-scale($table-background, $table-color-scale / 2);
+// $table-foot-background: smart-scale($table-background, $table-color-scale);
+// $table-head-font-color: $body-font-color;
+// $show-header-for-stacked: false;
+
+// 32. Tabs
+// --------
+
+// $tab-margin: 0;
+// $tab-background: $white;
+// $tab-background-active: $light-gray;
+// $tab-item-font-size: rem-calc(12);
+// $tab-item-background-hover: $white;
+// $tab-item-padding: 1.25rem 1.5rem;
+// $tab-expand-max: 6;
+// $tab-content-background: $white;
+// $tab-content-border: $light-gray;
+// $tab-content-color: foreground($tab-background, $primary-color);
+// $tab-content-padding: 1rem;
+
+// 33. Thumbnail
+// -------------
+
+// $thumbnail-border: solid 4px $white;
+// $thumbnail-margin-bottom: $global-margin;
+// $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+// $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+// $thumbnail-transition: box-shadow 200ms ease-out;
+// $thumbnail-radius: $global-radius;
+
+// 34. Title Bar
+// -------------
+
+$titlebar-background: map-get($foundation-palette, primary);
+// $titlebar-color: $white;
+// $titlebar-padding: 0.5rem;
+// $titlebar-text-font-weight: bold;
+// $titlebar-icon-color: $white;
+// $titlebar-icon-color-hover: $medium-gray;
+// $titlebar-icon-spacing: 0.25rem;
+
+// 35. Tooltip
+// -----------
+
+// $has-tip-font-weight: $global-weight-bold;
+// $has-tip-border-bottom: dotted 1px $dark-gray;
+// $tooltip-background-color: $black;
+// $tooltip-color: $white;
+// $tooltip-padding: 0.75rem;
+// $tooltip-font-size: $small-font-size;
+// $tooltip-pip-width: 0.75rem;
+// $tooltip-pip-height: $tooltip-pip-width * 0.866;
+// $tooltip-radius: $global-radius;
+
+// 36. Top Bar
+// -----------
+
+// $topbar-padding: 0.5rem;
+// $topbar-background: $light-gray;
+// $topbar-submenu-background: $topbar-background;
+// $topbar-title-spacing: 1rem;
+// $topbar-input-width: 200px;
+// $topbar-unstack-breakpoint: medium;