active_s95 1.0.0

data/app/assets/stylesheets/arctic_admin/_custom_enhancements.scss

@@ -0,0 +1,275 @@
+.panel {
+    border-radius: $border-radius-card !important;
+    box-shadow: $box-shadow-card;
+    transition: all 0.3s ease;
+    overflow: hidden;
+
+    &:hover {
+        box-shadow: $box-shadow-hover;
+        transform: translateY(-4px);
+    }
+
+    h3,
+    .panel_title {
+        text-transform: uppercase;
+        font-weight: 800;
+        letter-spacing: 1.2px;
+        color: $indigo-dark;
+        font-family: $font-family-accent;
+    }
+}
+
+.panel_contents {
+    background: #fff;
+}
+
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: $font-family-accent;
+
+    &.page_title,
+    &.section_title {
+        text-transform: uppercase;
+        font-weight: 800;
+        letter-spacing: 1.5px;
+        color: $indigo-dark;
+    }
+}
+
+.title {
+    font-family: $font-family-accent;
+    font-weight: 700;
+    color: $indigo;
+}
+
+// ====================
+// ICON CONTAINERS
+// ====================
+.icon-container {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, rgba($indigo, 0.1) 0%, rgba($indigo, 0.05) 100%);
+    box-shadow: 0 2px 8px rgba($indigo, 0.15);
+    transition: all 0.3s ease;
+
+    &:hover {
+        background: linear-gradient(135deg, rgba($indigo, 0.15) 0%, rgba($indigo, 0.08) 100%);
+        box-shadow: 0 4px 12px rgba($indigo, 0.25);
+        transform: translateY(-2px);
+    }
+
+    i,
+    svg {
+        color: $indigo;
+    }
+}
+
+// ====================
+// ATTRIBUTES TABLE (SHOW PAGE)
+// ====================
+.attributes_table {
+    th {
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        font-size: 12px;
+        color: $indigo-dark;
+    }
+
+    td {
+        &.monospace {
+            font-family: $font-family-mono;
+            font-weight: 600;
+            color: $indigo;
+        }
+    }
+}
+
+// ====================
+// LOGO STYLING
+// ====================
+#site_title,
+.site_title {
+    font-family: $font-family-accent !important;
+    font-weight: 900 !important;
+    font-size: 22px !important;
+    letter-spacing: 2px !important;
+    text-transform: uppercase !important;
+    background: linear-gradient(135deg, $indigo 0%, $indigo-light 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+// ====================
+// FORM INPUTS
+// ====================
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="url"],
+input[type="tel"],
+textarea,
+select {
+    border-radius: $border-radius-input !important;
+    border: 2px solid $border-color;
+    transition: all 0.3s ease;
+
+    &:focus {
+        border-color: $indigo;
+        box-shadow: 0 0 0 3px rgba($indigo, 0.1);
+        outline: none;
+    }
+}
+
+// ====================
+// PAGINATION
+// ====================
+.pagination {
+
+    a,
+    span {
+        border-radius: $border-radius-small;
+        transition: all 0.2s ease;
+    }
+
+    a {
+        &:hover {
+            background-color: rgba($indigo, 0.1);
+            color: $indigo;
+            transform: translateY(-1px);
+        }
+    }
+
+    .current {
+        background: linear-gradient(135deg, $indigo 0%, $indigo-dark 100%);
+        color: #fff;
+        font-weight: 700;
+    }
+}
+
+// ====================
+// FILTERS SIDEBAR
+// ====================
+#filters_sidebar_section {
+    .panel {
+        background: linear-gradient(135deg, rgba($indigo, 0.03) 0%, rgba($indigo, 0.01) 100%);
+    }
+
+    .filter_form_field {
+        label {
+            font-weight: 600;
+            color: $indigo-dark;
+            text-transform: uppercase;
+            font-size: 11px;
+            letter-spacing: 0.5px;
+        }
+    }
+}
+
+// ====================
+// FLASH MESSAGES
+// ====================
+.flash {
+    border-radius: $border-radius-button;
+    box-shadow: $box-shadow-card;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+
+    &.flash_notice {
+        background: linear-gradient(135deg, rgba($teal, 0.9) 0%, rgba($teal, 0.8) 100%);
+    }
+
+    &.flash_error {
+        background: linear-gradient(135deg, rgba($coral, 0.9) 0%, rgba($coral, 0.8) 100%);
+    }
+}
+
+// ====================
+// SCOPES (TABS)
+// ====================
+.scopes {
+    .scope {
+        border-radius: $border-radius-button;
+        transition: all 0.2s ease;
+
+        &:hover {
+            background-color: rgba($indigo, 0.08);
+            transform: translateY(-1px);
+        }
+
+        &.selected {
+            background: linear-gradient(135deg, $indigo 0%, $indigo-dark 100%);
+            color: #fff;
+            font-weight: 700;
+        }
+    }
+}
+
+// ====================
+// ACTION ITEMS
+// ====================
+.action_item {
+    a {
+        transition: all 0.2s ease;
+
+        &:hover {
+            color: $indigo;
+            transform: translateX(3px);
+        }
+    }
+}
+
+// ====================
+// DASHBOARD WIDGETS
+// ====================
+.dashboard {
+    .panel {
+        background: #fff;
+        border-left: 4px solid $indigo;
+    }
+
+    .attributes_table {
+        border-spacing: 0 4px;
+    }
+}
+
+// ====================
+// BATCH ACTIONS
+// ====================
+.batch_actions_selector {
+    border-radius: $border-radius-button !important;
+}
+
+.dropdown_menu {
+    border-radius: $border-radius-small;
+    box-shadow: $box-shadow-hover;
+    border: none;
+}
+
+// ====================
+// CHARTS & GRAPHS
+// ====================
+.chart-container {
+    canvas {
+        border-radius: $border-radius-small;
+    }
+}
+
+// Custom chart colors (to be used in JS)
+:root {
+    --chart-primary: #{$indigo};
+    --chart-accent-1: #{$teal};
+    --chart-accent-2: #{$coral};
+    --chart-grid: rgba(102, 16, 242, 0.05);
+}

data/app/assets/stylesheets/arctic_admin/_fonts.scss

@@ -0,0 +1,47 @@
+/* Webfont: Lato-Bold */@font-face {
+  font-family: 'LatoWeb';
+  src: font-url('Lato-Bold.eot'); /* IE9 Compat Modes */
+  src: font-url('Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       font-url('Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
+       font-url('Lato-Bold.woff') format('woff'), /* Modern Browsers */
+       font-url('Lato-Bold.ttf') format('truetype');
+  font-style: normal;
+  font-weight: bold;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-BoldItalic */@font-face {
+  font-family: 'LatoWeb';
+  src: font-url('Lato-BoldItalic.eot'); /* IE9 Compat Modes */
+  src: font-url('Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       font-url('Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
+       font-url('Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */
+       font-url('Lato-BoldItalic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: bold;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Italic */@font-face {
+  font-family: 'LatoWeb';
+  src: font-url('Lato-Italic.eot'); /* IE9 Compat Modes */
+  src: font-url('Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       font-url('Lato-Italic.woff2') format('woff2'), /* Modern Browsers */
+       font-url('Lato-Italic.woff') format('woff'), /* Modern Browsers */
+       font-url('Lato-Italic.ttf') format('truetype');
+  font-style: italic;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}
+
+/* Webfont: Lato-Regular */@font-face {
+  font-family: 'LatoWeb';
+  src: font-url('Lato-Regular.eot'); /* IE9 Compat Modes */
+  src: font-url('Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       font-url('Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
+       font-url('Lato-Regular.woff') format('woff'), /* Modern Browsers */
+       font-url('Lato-Regular.ttf') format('truetype');
+  font-style: normal;
+  font-weight: normal;
+  text-rendering: optimizeLegibility;
+}

data/app/assets/stylesheets/arctic_admin/_grid.scss

@@ -0,0 +1,4 @@
+.columns {
+  display: flex;
+  flex-wrap:wrap;
+}

data/app/assets/stylesheets/arctic_admin/_main.scss

@@ -0,0 +1,57 @@
+@import 'reset';
+
+@import './variables/variables';
+
+@import './mixins/mixins';
+
+@import 'mobile_utilities';
+
+@import 'common';
+@import 'buttons';
+@import 'grid';
+
+@import './components/columns';
+@import './components/comments';
+@import './components/date_picker';
+@import './components/dialogs';
+@import './components/flash';
+@import './components/form';
+@import './components/inputs';
+@import './components/pagination';
+@import './components/panel_contents';
+@import './components/select2';
+@import './components/status_tag';
+@import './components/tables';
+@import './components/tabs';
+
+@import './layouts/filter';
+@import './layouts/footer';
+@import './layouts/header';
+@import './layouts/main_content';
+@import './layouts/sidebar';
+@import './layouts/wrapper';
+
+@import './pages/form';
+@import './pages/index';
+@import './pages/login';
+@import './pages/show';
+
+body {
+  font-family: $font-family-body;
+  background-color: $body-background;
+  color: $text-color;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+}
+
+a {
+  color: $link-primary-color;
+  text-decoration: none;
+}

data/app/assets/stylesheets/arctic_admin/_mobile_utilities.scss

@@ -0,0 +1,212 @@
+// Mobile-First Utilities and Helpers
+// Touch-friendly interactions, safe areas, and mobile-specific utilities
+
+// Touch-friendly minimum sizes (44x44px iOS HIG, 48x48px Material Design)
+$touch-target-min: 44px !default;
+$touch-target-optimal: 48px !default;
+
+// Touch-friendly button mixin
+@mixin touch-button($min-height: $touch-target-min) {
+    min-height: $min-height;
+    min-width: $min-height;
+    padding: 12px 20px;
+
+    @media screen and (max-width: $sm-width) {
+        min-height: $touch-target-optimal;
+        min-width: $touch-target-optimal;
+    }
+}
+
+// Tap highlight removal (for custom touch feedback)
+@mixin no-tap-highlight {
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+}
+
+// Momentum scrolling for smooth scrolling on iOS
+@mixin momentum-scroll {
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+// Safe area insets for iOS notch/home bar
+@mixin safe-area-inset-padding($side: 'all', $additional: 0) {
+    @if $side =='all' {
+        padding: calc(#{$additional} + env(safe-area-inset-top)) calc(#{$additional} + env(safe-area-inset-right)) calc(#{$additional} + env(safe-area-inset-bottom)) calc(#{$additional} + env(safe-area-inset-left));
+    }
+
+    @else if $side =='top' {
+        padding-top: calc(#{$additional} + env(safe-area-inset-top));
+    }
+
+    @else if $side =='bottom' {
+        padding-bottom: calc(#{$additional} + env(safe-area-inset-bottom));
+    }
+
+    @else if $side =='left' {
+        padding-left: calc(#{$additional} + env(safe-area-inset-left));
+    }
+
+    @else if $side =='right' {
+        padding-right: calc(#{$additional} + env(safe-area-inset-right));
+    }
+}
+
+// Card view transformation helper
+@mixin table-to-cards {
+    thead {
+        display: none;
+    }
+
+    tbody tr {
+        display: block;
+        margin-bottom: 16px;
+        border-radius: $border-radius;
+        box-shadow: $box-shadow-card;
+        border-left: none !important;
+
+        td {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 16px;
+            border: none;
+            gap: 12px;
+
+            &:first-child {
+                border-radius: $border-radius-small $border-radius-small 0 0;
+                padding-top: 16px;
+            }
+
+            &:last-child {
+                border-radius: 0 0 $border-radius-small $border-radius-small;
+                padding-bottom: 16px;
+            }
+
+            // Add label before value
+            &::before {
+                content: attr(data-label);
+                font-weight: 700;
+                text-transform: uppercase;
+                font-size: 11px;
+                letter-spacing: 0.5px;
+                color: $indigo;
+                flex-shrink: 0;
+            }
+
+            // Hide elements that don't make sense in card view
+            &.col-selectable {
+                order: -1;
+                background: rgba($indigo, 0.05);
+
+                &::before {
+                    content: '';
+                }
+            }
+
+            &.col-actions {
+                order: 999;
+                background: rgba($indigo, 0.03);
+                justify-content: center;
+
+                &::before {
+                    content: '';
+                }
+            }
+        }
+    }
+}
+
+// Visibility utilities
+.mobile-only {
+    @media screen and (min-width: $md-width) {
+        display: none !important;
+    }
+}
+
+.desktop-only {
+    @media screen and (max-width: #{$md-width - 1}) {
+        display: none !important;
+    }
+}
+
+.tablet-only {
+    display: none !important;
+
+    @media screen and (min-width: $md-tablet) and (max-width: #{$md-width - 1}) {
+        display: block !important;
+    }
+}
+
+// Prevent zoom on input focus (iOS)
+@mixin prevent-zoom {
+    font-size: 16px !important;
+
+    @media screen and (min-width: $md-width) {
+        font-size: $font-size !important;
+    }
+}
+
+// Full-width mobile overlay
+@mixin mobile-overlay {
+    @media screen and (max-width: $sm-width) {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100vw;
+        height: 100vh;
+        z-index: 9999;
+        background: white;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+
+// Backdrop overlay for modals/drawers
+@mixin backdrop-overlay($z-index: 998) {
+    &::before {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: $z-index;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.3s ease;
+    }
+
+    &.open::before,
+    &.sidebar_open::before,
+    &.tabs_open::before {
+        opacity: 1;
+        pointer-events: all;
+    }
+}
+
+// Swipe-ready preparation (for future JS integration)
+.swipeable {
+    @include no-tap-highlight;
+    touch-action: pan-y; // Allow vertical scroll, prepare for horizontal swipe
+    user-select: none;
+}
+
+// Sticky bottom actions (for forms, filters)
+@mixin sticky-bottom-actions {
+    @media screen and (max-width: $sm-width) {
+        position: sticky;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: white;
+        padding: 12px 16px;
+        @include safe-area-inset-padding('bottom', 12px);
+        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+        z-index: 100;
+        margin: 0 -16px -16px;
+    }
+}

data/app/assets/stylesheets/arctic_admin/_reset.scss

@@ -0,0 +1,41 @@
+*, *:after, *:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+html, body {
+  padding: 0;
+  margin: 0;
+  min-height: 100vh;
+}
+
+fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol, ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+th {
+  font-weight: normal;
+}
+
+abbr[title] {
+  border-bottom: none;
+  cursor: inherit;
+  text-decoration: none;
+}

data/app/assets/stylesheets/arctic_admin/components/_columns.scss

@@ -0,0 +1,4 @@
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+}

data/app/assets/stylesheets/arctic_admin/components/_comments.scss

@@ -0,0 +1,49 @@
+.comments {
+  margin-top: 20px;
+  @include clear-fix();
+
+  h3 {
+    margin: 0 0 10px 0;
+  }
+  
+  .panel_contents .empty {
+    margin-bottom: 10px;
+    display: inline-block;
+  }
+
+  .active_admin_comment:not(#new_active_admin_comment) {
+    margin-bottom: 20px;
+    border: 1px solid $border-color;
+
+    .active_admin_comment_meta {
+      background-color: $sidebar-background;
+      padding: 8px 10px;
+
+      .active_admin_comment_author {
+        margin: 0;
+        display: inline-block;
+      }
+
+      span { // date
+        font-size: 14px;
+        font-style: italic;
+        line-height: 21px;
+      }
+
+      a[data-method="delete"] {
+        @include primary-button($primary-color, white);
+        padding: 2px 9px;
+        font-size: 12px;
+        float: right;
+      }
+    }
+
+    .active_admin_comment_body {
+      padding: 0 10px;
+    }
+  }
+
+  .pagination_information {
+    margin-bottom: 20px;
+  }
+}