Repository: cprodhomme/arctic_admin
Branch: main
Commit: 98c7f8fdf8bf
Files: 62
Total size: 52.1 KB

Directory structure:
gitextract_8s76iiy1/

├── .github/
│   ├── FUNDING.yml
│   ├── ISSUE_TEMPLATE/
│   │   ├── bug_report.md
│   │   └── feature_request.md
│   └── workflows/
│       ├── gem-push.yml
│       └── npm-publish.yml
├── .gitignore
├── .tool-versions
├── Gemfile
├── LICENCE.txt
├── README.md
├── app/
│   └── assets/
│       ├── images/
│       │   └── .keep
│       ├── javascripts/
│       │   └── arctic_admin/
│       │       ├── base.js
│       │       └── main.js
│       └── stylesheets/
│           └── arctic_admin/
│               ├── _base.scss
│               ├── _buttons.scss
│               ├── _common.scss
│               ├── _fonts.scss
│               ├── _grid.scss
│               ├── _main.scss
│               ├── _reset.scss
│               ├── components/
│               │   ├── _columns.scss
│               │   ├── _comments.scss
│               │   ├── _date_picker.scss
│               │   ├── _dialogs.scss
│               │   ├── _flash.scss
│               │   ├── _form.scss
│               │   ├── _inputs.scss
│               │   ├── _pagination.scss
│               │   ├── _panel_contents.scss
│               │   ├── _select2.scss
│               │   ├── _status_tag.scss
│               │   ├── _tables.scss
│               │   ├── _tabs.scss
│               │   └── _toggle.scss
│               ├── layouts/
│               │   ├── _filter.scss
│               │   ├── _footer.scss
│               │   ├── _header.scss
│               │   ├── _main_content.scss
│               │   ├── _sidebar.scss
│               │   └── _wrapper.scss
│               ├── mixins/
│               │   ├── _buttons_mixins.scss
│               │   ├── _forms.scss
│               │   ├── _mixins.scss
│               │   ├── _prefix_mixins.scss
│               │   └── _sidebar_mixins.scss
│               ├── pages/
│               │   ├── _form.scss
│               │   ├── _index.scss
│               │   ├── _login.scss
│               │   └── _show.scss
│               └── variables/
│                   ├── _borders.scss
│                   ├── _box_shadows.scss
│                   ├── _colors.scss
│                   ├── _fonts.scss
│                   ├── _icons.scss
│                   ├── _media_queries.scss
│                   ├── _size.scss
│                   ├── _spaces.scss
│                   └── _variables.scss
├── arctic_admin.gemspec
├── lib/
│   ├── arctic_admin/
│   │   └── version.rb
│   └── arctic_admin.rb
└── package.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms

github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
polar: # Replace with a single Polar username
buy_me_a_coffee: cprodhomme
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']


================================================
FILE: .github/ISSUE_TEMPLATE/bug_report.md
================================================
---
name: Bug report
about: Create a report to help us improve
title: ''
labels: bug
assignees: ''

---

:warning: ArcticAdmin is a simple gem, if you found a bug, you can easily fix it and make a pull-request. :pray: Thanks !

**Describe the bug**
A clear and concise description of what the bug is.

**To Reproduce**
Steps to reproduce the behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

**Expected behavior**
A clear and concise description of what you expected to happen.

**Screenshots**
If applicable, add screenshots to help explain your problem.

**Desktop (please complete the following information):**
 - OS: [e.g. iOS]
 - Browser [e.g. chrome, safari]
 - Version [e.g. 22]

**Smartphone (please complete the following information):**
 - Device: [e.g. iPhone6]
 - OS: [e.g. iOS8.1]
 - Browser [e.g. stock browser, safari]
 - Version [e.g. 22]

**Gemfile**
Place here your gemfile.lock of your project

**Additional context**
Add any other context about the problem here.


================================================
FILE: .github/ISSUE_TEMPLATE/feature_request.md
================================================
---
name: Feature request
about: Suggest an idea for this project
title: ''
labels: enhancement
assignees: ''

---

**Is your feature request related to a problem? Please describe.**
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

**Describe the solution you'd like**
A clear and concise description of what you want to happen.

**Describe alternatives you've considered**
A clear and concise description of any alternative solutions or features you've considered.

**Additional context**
Add any other context or screenshots about the feature request here.


================================================
FILE: .github/workflows/gem-push.yml
================================================
name: Ruby Gem

on:
  push:
    tags:
      - '*'

jobs:
  build:
    name: Build + Publish
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write

    steps:
    - uses: ruby/setup-ruby@v1
      with:
        ruby-version: '3.3'
        bundler-cache: true

    - name: Publish to RubyGems
      run: |
        mkdir -p $HOME/.gem
        touch $HOME/.gem/credentials
        chmod 0600 $HOME/.gem/credentials
        printf -- "---\n:rubygems_api_key: ${GEM_HOST_API_KEY}\n" > $HOME/.gem/credentials
        gem build *.gemspec
        gem push *.gem
      env:
        GEM_HOST_API_KEY: "${{secrets.RUBYGEMS_AUTH_TOKEN}}"

    - name: Publish to GPR
      run: |
        mkdir -p $HOME/.gem
        touch $HOME/.gem/credentials
        chmod 0600 $HOME/.gem/credentials
        printf -- "---\n:github: ${GEM_HOST_API_KEY}\n" > $HOME/.gem/credentials
        gem build *.gemspec
        gem push --KEY github --host https://rubygems.pkg.github.com/${OWNER} *.gem
      env:
        GEM_HOST_API_KEY: "Bearer ${{secrets.GITHUB_TOKEN}}"
        OWNER: ${{ github.repository_owner }}


================================================
FILE: .github/workflows/npm-publish.yml
================================================
name: Node.js Package

on:
  push:
    tags:
      - '**'

jobs:
  publish-npm:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
          registry-url: https://registry.npmjs.org/
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}


================================================
FILE: .gitignore
================================================
*.gem
.DS_Store
.bundle
Gemfile.lock
gemfiles/*.lock
pkg/*
vendor/ruby
gemfiles/vendor/ruby
.rbenv-version
.sass-cache
/node_modules
/src
.idea
vendor/bundle/


================================================
FILE: .tool-versions
================================================
nodejs 18.15.0


================================================
FILE: Gemfile
================================================
source 'https://rubygems.org'


================================================
FILE: LICENCE.txt
================================================
Copyright (c) 2017 Clément Prod'homme

MIT License

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

================================================
FILE: README.md
================================================
# ArcticAdmin
[![Gem Version](https://img.shields.io/gem/v/arctic_admin.svg)](https://rubygems.org/gems/arctic_admin)
[![Gem Downloads](https://img.shields.io/gem/dt/arctic_admin.svg)](https://rubygems.org/gems/arctic_admin)
[![Gem Version](https://img.shields.io/npm/v/arctic_admin.svg)](https://www.npmjs.com/package/arctic_admin)
[![Gem Downloads](https://img.shields.io/npm/dt/arctic_admin.svg)](https://www.npmjs.com/package/arctic_admin)

Simple theme for ActiveAdmin :ok_hand:

>**Complete demo here : https://arcticadmin.osc-fr1.scalingo.io**
>
>*admin user : admin@example.com / password*

![Screenshot](doc/index.png)

## Installation

### For Sprockets users

- Add this to your Gemfile:

```ruby
gem 'arctic_admin'
```

- Run `bundle install`.

- Add this line to the file `config/initializers/active_admin.rb`

```ruby
meta_tags_options = { viewport: 'width=device-width, initial-scale=1' }
config.meta_tags = meta_tags_options
config.meta_tags_for_logged_out_pages = meta_tags_options
```

### For webpacker / jsbundling-rails or other JS-based asset solutions

Install the needed assets with npm or yarn:

```bash
yarn add arctic_admin @fortawesome/fontawesome-free
```

## Use with Sprockets

### 1a - CSS

In your `active_admin.css`, include the css file:

```css
/*
 *= require arctic_admin/base
 */
```

**Remove the line `*= require active_admin/base`**

Then restart your webserver if it was previously running.

### 1b - Sass Support

:exclamation: **Remove the line `@import "active_admin/base"`**

If you prefer [SCSS](http://sass-lang.com/documentation/file.SASS_REFERENCE.html), add this to your
`active_admin.scss` file:

```scss
@import "arctic_admin/base";
```

If you use the
[Sass indented syntax](http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html),
add this to your `active_admin.sass` file:

```sass
@import arctic_admin/base
```

### 2 - JS

In your `active_admin.js`, include the js file:

```js
//= require arctic_admin/base
```

:exclamation:  **Remove the line `//= require active_admin/base`**

## Use with webpacker

### 1 - CSS

In your `app/javascript/stylesheets/active_admin.scss`, add the line:

```scss
@import '~arctic_admin/src/scss/main';
```

Remove:

```scss
@import "~@activeadmin/activeadmin/src/scss/mixins";
@import "~@activeadmin/activeadmin/src/scss/base";
```

### 2 - JS

Search for `app/javascript/packs/active_admin.js` in your rails project and add the following lines:  

```js
import "@fortawesome/fontawesome-free/css/all.css";
import 'arctic_admin'
```


### Customization

For this, you need to use SASS to customize the theming.

Right now you can change the primary color of the theme by placing the following variable in your `active_admin.scss` file:

```scss
$primary-color: #2dbb43;

@import "~arctic_admin/src/scss/main";
```

If you use the
[Sass indented syntax](http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html),
add this to your `active_admin.sass` file:

```sass
$primary-color: #2dbb43

@import ~arctic_admin/src/scss/main
```

Then restart your webserver if it was previously running.

## Contributing

1. Fork it ( https://github.com/cprodhomme/arctic_admin/fork )
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create new Pull Request


================================================
FILE: app/assets/images/.keep
================================================


================================================
FILE: app/assets/javascripts/arctic_admin/base.js
================================================
//= require active_admin/base
//= require ./main


================================================
FILE: app/assets/javascripts/arctic_admin/main.js
================================================
// right filter sidebar toggle
function sidebar() {
  return document.querySelector('#sidebar')
}
function sidebarToggle(event) {
  const insideSection = document.querySelector('#filters_sidebar_section')

  if (!(event.target === insideSection || insideSection.contains(event.target)) && event.target.className != "select2-selection__choice__remove") {
    sidebar().classList.toggle('sidebar_open')
  }
}

// left menu sidebar toggle with menu button
function menuButton() {
  return document.querySelector('#utility_nav')
}
function menu() {
  return document.querySelector('#tabs')
}
function menuToggle(event) {
  const currentUser = document.querySelector('#current_user')
  const logout = document.querySelector('#logout')
  const forbiddenLinks = event.target === logout ||
    logout.contains(event.target) ||
    event.target === currentUser ||
    (currentUser && currentUser.contains(event.target))
  if (!forbiddenLinks) {
    menu().classList.toggle('tabs_open')
  }
}

// left menu sidebar close on any click outside
function menuClose(event) {
  const forbiddenLinks = event.target === menu ||
    menu().contains(event.target) ||
    event.target === menuButton() ||
    menuButton().contains(event.target)
  if (menu().classList.contains('tabs_open') && !forbiddenLinks) {
    menu().classList.remove('tabs_open')
  }
}

// nested menu items toggle
function nestedMenuItems() {
  return document.querySelectorAll('#tabs .has_nested')
}

// add event listeners
function addListeners() {

  // right filter sidebar toggle
  if (sidebar()) {
    sidebar().addEventListener('click', sidebarToggle)
  }

  // left menu sidebar toggle with menu button
  if (menuButton()) {
    menuButton().addEventListener('click', menuToggle)
  }

  // left menu sidebar close on any click outside
  document.body.addEventListener('click', menuClose)

  // nested menu items toggle
  nestedMenuItems().forEach(
    (nestedMenuItem) => {
      nestedMenuItem.addEventListener('click', (e) => {
        e.stopPropagation()
        nestedMenuItem.classList.toggle('open')
      })
    }
  )
}

// remove all previous eventListeners
function removeListeners() {

  // right filter sidebar toggle
  if (sidebar()) {
    sidebar().removeEventListener('click', sidebarToggle)
  }

  // left menu sidebar toggle with menu button
  menuButton().removeEventListener('click', menuToggle)

  // left menu sidebar close on any click outside
  document.body.removeEventListener('click', menuClose)

  // nested menu items toggle
  nestedMenuItems().forEach(
    (nestedMenuItem) => {
      nestedMenuItem.removeEventListener('click', (e) => {
        e.stopPropagation()
        nestedMenuItem.classList.toggle('open')
      })
    }
  )
}

document.addEventListener('DOMContentLoaded', addListeners)

document.addEventListener('turbolinks:load', () => {
  removeListeners()
  addListeners()
})


================================================
FILE: app/assets/stylesheets/arctic_admin/_base.scss
================================================
@import "font-awesome";

@import "reset";
@import "fonts";
@import "variables/variables";

@import "mixins/mixins";

@import "common";
@import "buttons";
@import "grid";

@import "components/*";
@import "layouts/*";
@import "pages/*";

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;
}


================================================
FILE: app/assets/stylesheets/arctic_admin/_buttons.scss
================================================
.button {
  @include primary-button($primary-color, #fff);
  padding: 5px 8px;
  font-size: 16px;

  &.small {
    padding: 2px 9px;
    font-size: 12px;
  }

  &.large {
    padding: 10px;
    font-size: 18px;
  }

  &.action {
    margin-right: 4px;
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/_common.scss
================================================
code {
  display: block;
  background-color: #272822;
  padding: 5px;
  color: white;
}

hr {
  border: 1px solid $border-color;
  color: $primary-color;
  margin: 10px auto 25px auto;
}

================================================
FILE: app/assets/stylesheets/arctic_admin/_fonts.scss
================================================
/* 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;
}


================================================
FILE: app/assets/stylesheets/arctic_admin/_grid.scss
================================================
.columns {
  display: flex;
  flex-wrap:wrap;
}


================================================
FILE: app/assets/stylesheets/arctic_admin/_main.scss
================================================
@import 'reset';

@import './variables/variables';

@import './mixins/mixins';

@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;
}


================================================
FILE: app/assets/stylesheets/arctic_admin/_reset.scss
================================================
*, *: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;
}


================================================
FILE: app/assets/stylesheets/arctic_admin/components/_columns.scss
================================================
.columns {
  display: flex;
  flex-wrap: wrap;
}


================================================
FILE: app/assets/stylesheets/arctic_admin/components/_comments.scss
================================================
.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;
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/components/_date_picker.scss
================================================
#ui-datepicker-div {
  background-color: #fff;
  padding: 5px;
  border-radius: $border-radius;
  @include box-shadow($box-shadow);
  z-index: 3!important;
  padding: 8px 10px;

  .ui-datepicker-header {
    @include clear-fix();
    margin-bottom: 10px;

    .ui-datepicker-prev, .ui-datepicker-next {
      @include primary-button($button-primary-color, #fff);
      padding: 2px 5px;
      font-size: 14px;
    }

    .ui-datepicker-prev {
      float: left;
    }

    .ui-datepicker-next {
      float: right;
    }

    .ui-datepicker-title {
      text-align: center;
    }
  }

  .ui-datepicker-calendar {
    td {
      border: none;
      text-align: center;
    }
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/components/_dialogs.scss
================================================
.ui-dialog {
  background-color: #fff;
  @include box-shadow($box-shadow);
  border-radius: $border-radius;
  padding: 15px 10px;
  z-index: 1;

  &:focus, &:active {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: 0;
  }

  .ui-button {
    @include primary-button($primary-color, #fff);
    border: 0;
    margin-right: 5px;
    padding: 5px 10px;
  }

  .ui-dialog-titlebar-close {
    display: none;
  }
}

================================================
FILE: app/assets/stylesheets/arctic_admin/components/_flash.scss
================================================
.flash {
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: $flash-background-color;
  color: $flash-text-color;
}

.flash_alert, .flash_error {
  background-color: $error;
  color: $flash-text-color;
}

.flash_warning {
  background-color: $warning;
  color: $flash-text-color;
}

.flash_notice {
  background-color: $success;
  color: $flash-text-color;
}

.flash_info {
  background-color: $info;
  color: $flash-text-color;
}

================================================
FILE: app/assets/stylesheets/arctic_admin/components/_form.scss
================================================
.label {
  display: inline-block;
  margin-bottom: 5px;
}

.input {
  margin-bottom: 20px;

  &.hidden {
    margin: 0;
  }
}

#active_admin_content {
  form {
    li {
      list-style: none;
    }
    
    legend:not(.label) {
      margin-bottom: 28px;
      font-size: 18px;
      display: block;
      width: 100%;
      padding-bottom: 12px;
      border-bottom: 1px solid $body-background;
    }

    .error {
      input, select, textarea {
        @include input-invalid();
      }
    }

    input:not([disabled]):not([type="submit"]), select, textarea {
      &.error {
        @include input-invalid();
      }
    }
    
    .inline-hints {
      margin: 5px 0 20px $form-margin-left;
      font-size: $font-size;
      font-style: italic;
    }

    .inline-errors, label.error {
      color: $error;
      margin-top: 5px;
      margin-bottom: 20px;
      font-size: $font-size;
    }

    label.error {
      display: block;
      margin-left: $form-margin-left;
    }
    
    .button.has_many_remove {
      @include tertiary-button($red);
    }
    
    .button.has_many_add {
      @include secondary-button($primary-color);
    }
  }

  .actions {
    .action {
      display: inline-block;
      margin-right: 10px;

      input[type="submit"] {
        line-height: 43px;
      }
    }

    .cancel {
      display: inline-block;
    }
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/components/_inputs.scss
================================================
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="date"], input[type="datetime-local"],
input[type="month"], input[type="range"], input[type="search"],
input[type="time"], input[type="url"], input[type="week"],
input[type="number"], textarea {
  @include appearance();
  @include box-shadow(none);

  display: block;
  width: 100%;
  height: $input-height;
  padding: 6px 12px;
  font-size: $font-size;
  line-height: 1.57142857;
  color: $text-color;
  background-color: #fff;
  background-image: none;
  border: 1px solid $border-color;
  outline: 0;
  border-radius: $border-radius;
  @include transition(border-color ease-in-out .15s);

  &:focus {
    border-color: $primary-color;
    @include appearance();
    @include transition(border .25s linear,color .25s linear,background-color .25s linear);
  }

  &:disabled {
    opacity: 0.6;
  }

  &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: $text-color;
  }
}

input[type="submit"] {
  @include appearance();
  @include primary-button($button-primary-color, white);
  width: 100%;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 500;
  @include box-shadow(0 1px 0 rgba(0,0,0,.05));
  border: none;
  cursor: pointer;
}

input[type="checkbox"] {
  height: 15px;
  width: 15px;
  -webkit-appearance: none!important;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: $border-radius;
  box-sizing: border-box;
  @include outline();
  @include transition-button();
  cursor: pointer;

  &:checked {
    border-color: $primary-color;
    background-color: $primary-color !important;
  }
}

input[type="radio"] {
  @include appearance();
  border: 2px solid $primary-color;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin: 1px 5px 1px 1px;
  display: inline-flex;
  @include outline();
  @include transition-button();

  &:checked {
    background-color: $primary-color;
  }
}

select {
  background-color: #fff;
  background-image: none;
  border: 1px solid $border-color;
  outline: 0;
  border-radius: $border-radius;
  font-size: $font-size;
  color: #5a5a5a;
  @include transition(border-color ease-in-out .15s);

  &:focus {
    border-color: $primary-color;
    @include box-shadow(none);
    @include transition(border .25s linear,color .25s linear,background-color .25s linear);
  }

  &:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
  }
}

textarea {
  min-height: 80px;
  height: auto;
  padding: 5px 10px;
}


================================================
FILE: app/assets/stylesheets/arctic_admin/components/_pagination.scss
================================================
.pagination {
  font-size: 13px;
  margin-bottom: 10px;

  .page {
    text-align: center;
  }

  .page a, .next a, .last a, .first a, .prev a {
    padding: .3rem .4rem;
    color: $text-color;
    @include transition-button();

    &:hover {
      color: $link-primary-color;
    }
  }
  .page.current {
    background-color: $link-primary-color;
    color: #fff;
    border-radius: $border-radius;
    padding: .3rem .4rem;
    cursor: normal;
  }
}

================================================
FILE: app/assets/stylesheets/arctic_admin/components/_panel_contents.scss
================================================
.panel_contents {
  .paginated_collection {
    #index_footer {
      margin: 10px;
      text-align: right;
      font-size: 12px;
    }
  }

  th {
    text-align: left;
    padding: 8px;
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/components/_select2.scss
================================================
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: $input-height; 
  color: $text-color; 
  font-size: $font-size;
}

.select2-container .select2-selection--single{ 
  height: $input-height;
  outline: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{ 
  height: $input-height;
}

.select2-container--default .select2-selection--single { 
  border-color: $border-color;
}

.select2-container .select2-selection--single .select2-selection__rendered{ 
  padding-left: 12px;
}

.select2-dropdown{
  border-color: $border-color; 
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background-color: $primary_color;
}

.select2-container--default .select2-search--dropdown .select2-search__field{
  border-color: $border-color;
}

.select2-container--default .select2-results__option[aria-selected=true]{
  background-color: $body-background;
}

.select2-search--dropdown .select2-search__field{
  padding-left: 12px;
}

.select2-results{
  font-size: $font-size;
}

.select2-results__option{
  padding-left: 12px;
}


================================================
FILE: app/assets/stylesheets/arctic_admin/components/_status_tag.scss
================================================
.status_tag {
  background: $status-tag-background-color;
  color: $status-tag-text-color;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 3px 5px 2px 5px;
  font-size: 0.8em;
  border-radius: $border-radius;

  &.ok, &.published, &.complete, &.completed, &.green, &.yes {
    background-color: $status-tag-background-valid-color;
  }

  &.cancel, &.red, &.no {
    background-color: $status-tag-background-error-color;
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/components/_tables.scss
================================================
table {
  width: 100%;
  border-collapse: collapse;

  &:not(.index_table) {
    border-radius: $border-radius;
    margin-bottom: 10px;
  }
}

thead tr {
  border: 1px solid $border-color;
  background-color: $border-color;
}

thead th {
  font-size: 12px;
  text-align: left;

  a {
    color: $text-color-important;
    font-weight: normal;
    width: 100%;
    display: inline-block;
    padding: 4px 20px 4px 4px;

    @media screen and (min-width: $md-width) {
      padding: 8px 20px 8px 8px;
    }
  }

  &.col-selectable {
    padding-left: 4px;

    @media screen and (min-width: $md-width) {
      padding-left: 8px;
    }
  }
}

tbody tr {
  th {
    font-size: $font-size;
  }

  td {
    padding: 4px;
    vertical-align: middle;
    color: $text-color;
    font-size: 12px;

    &.col-actions {
      padding: 6px 8px;
    }

    @media screen and (min-width: $md-width) {
      padding: 8px;
    }
  }
}

// style only for table
.index_as_table {
  tbody tr {
    border: 1px solid $border-color;

    &:hover {
      background-color: rgba(228, 234, 236, 0.3);
    }
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/components/_tabs.scss
================================================
.tabs.ui-tabs {
  border: 1px solid $border-color;

  .nav {
    border-bottom: 1px solid $border-color;
    
    li {
      display: inline-block;
      text-align: center;
      @include outline();

      a {
        color: $text-color;
        display: inline-block;
        padding: 15px 25px;
        @include outline();
        @include transition-button();
      }
      
      &.ui-tabs-active {
        border-bottom: 2px solid $link-primary-color;

        a {
          color: $link-primary-color;
        }
      }
    }
  }

  .tab-content {
    padding: 10px 20px;
  }
}

================================================
FILE: app/assets/stylesheets/arctic_admin/components/_toggle.scss
================================================
$toggle-width: 40px !default;
$toggle-height: 20px !default;
$toggle-offset: 3px !default;

$toggle-outer-default: #ddd !default;
$toggle-outer-active: $link-primary-color !default;
$toggle-inner-default: #fff !default;
$toggle-inner-active: #fff !default;

$toggle-transition: 200ms ease-out !default;

.toggle-bool-switches-container {
  display: flex;
  text-align: left;

  span {
    line-height: 0;
  }

  .toggle-bool-switch {
    // reset style
    background-image: none;
    box-shadow: none;
    //

    cursor: pointer;

    position: relative;
    display: inline-flex;
    align-items: center;
    width: $toggle-width;
    height: $toggle-height;
    background-color: $toggle-outer-default;
    border-radius: 100vw;
    cursor: pointer;
    transition: $toggle-transition;

    &::before {
      // reset style
      height: auto;
      width: auto;
      background-image: none;
      //


      content: "";
      position: absolute;
      top: $toggle-offset;
      left: $toggle-offset;
      bottom: $toggle-offset;
      
      aspect-ratio: 1 / 1;
      
      background-color: $toggle-inner-default;
      border-radius: 50%;
      box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
      transition: $toggle-transition;
    }

    &.on {
      // reset style
      background-image: none;
      //
      background: $link-primary-color;

      &::before {
        // reset style
        left: $toggle-offset;
        //

        background-color: $toggle-inner-active;
        $toggle-translate-x: calc(( #{$toggle-width} - #{$toggle-height} ));
        transform: translateX($toggle-translate-x);
      }
    }
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/layouts/_filter.scss
================================================
#sidebar {
  width: $filter-width;
  background-color: #fff;
  border-radius: $border-radius;
  @include box-shadow(0 0 4px 0 rgba(0,0,0,.04));
  margin-bottom: 30px;

  @media screen and (min-width: $x-lg-width) {
    width: $lg-filter-width;
  }

  .sidebar_section {
    padding: 15px 20px;
    overflow-y: scroll;
    max-height: 80vh;

    h3 {
      margin: 0 0 10px 0;
    }

    .label {
      display: block;
      text-align: left;
    }

    .input {
      margin-bottom: 10px;

      input, select {
        height: 36px;
        padding: 3px 5px;
        font-size: 14px;
      }
    }

    .select_and_search {
      input, select {
        width: 50%;
        display: inline-block;  
      }

      input {
        float: right;
      }
    }

    .filter_select select {
      width: 100%;
    }

    .filter_date_range input {
      width: 50%;
      display: inline-block;

      // consistent look of all filters
      &:nth-child(2) {
        float: left;
      }
    }

    input[type="submit"] {
      width: auto;
      line-height: 31px;
      margin-right: 10px;
    }

    &.panel {
      position: relative;
    }
  }

  #search-status-_sidebar_section {
    font-size: 14px;
  }

  // 'Filter' and 'Clear Filters' buttons
  .buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
  }
}

// fix pour search select filter de ActiveAdmin_Addons
.search_select_filter, .filter_boolean {
  .select2.select2-container {
    width: 100% !important;
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/layouts/_footer.scss
================================================
.footer {
  display: inline-block;
  padding: 0 15px;
}

================================================
FILE: app/assets/stylesheets/arctic_admin/layouts/_header.scss
================================================
body.active_admin.logged_in {
  padding-top: 50px;

  @media screen and (min-width: $sm-width) {
    padding-top: 60px;
  }

  @media screen and (min-width: $lg-width) {
    padding-left: $header-width;
  }

  @media screen and (min-width: $x-lg-width) {
    padding-left: $lg-header-width;
  }

  #active_admin_content {
    padding: 20px 0;
    @include clear-fix();

    @media screen and (min-width: $lg-width) {
      padding: 20px 25px;
    }
  }
}

.header {
  .site_title {
    width: 160px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: $header-background;
    border-bottom: 1px solid $header-border-color;
    text-align: center;
    margin: 0;

    @media screen and (min-width: $sm-width) {
      width: $header-width;
      height: 60px;
      font-size: 20px;
      line-height: 60px;
    }

    @media screen and (min-width: $x-lg-width) {
      width: $lg-header-width;
    }
    
    #site_title_image {
      height: 100%;
      padding: 6px 0;
    }
  }

  #utility_nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50px;
    width: calc(100% - 160px);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3;
    text-align: right;
    background-color: $header-background;
    border-bottom: 1px solid $header-border-color;

    &:before {
      @include icon($icon-menu);

      display: inline;
      visibility: visible;
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      color: $text-color;
      padding: 15px 0;
      text-align: center;
      width: 40px;
      font-size: 20px;
    }

    @media screen and (min-width: $sm-width) {
      height: 60px;
      width: $screen-header-width;

      &:before {
        padding: 20px 0;
      }
    }

    @media screen and (min-width: $lg-width) {
      &:before {
        display: none;
      }
    }

    @media screen and (min-width: $x-lg-width) {
      width: $lg-screen-header-width;
    }

    li {
      display: inline-block;
      @include transition-button();

      &:hover {
        background-color: $header-nav-action-hover-background;
      }

      &:active {
        background-color: $header-nav-action-active-background;
      }
    }

    #current_user {
      a {
        color: transparent;
        position: relative;
        width: 50px;
        height: 49px;
        display: inline-block;

        &:before {
          @include icon($icon-user);

          display: inline;
          visibility: visible;
          cursor: pointer;
          position: absolute;
          top: 0;
          right: 0;
          color: $text-color;
          padding: 15px 0;
          text-align: center;
          width: 50px;
          font-size: 20px;
        }

        @media screen and (min-width: $sm-width) {
          width: 60px;
          height: 59px;

          &:before {
            padding: 20px 0;
            width: 60px;
          }
        }
      }
    }

    #logout {
      min-width: 50px;
      min-height: 49px;
      float: right;

      a {
        color: transparent;
        position: relative;
        width: 50px;
        display: block;

        &:before {
          @include icon($icon-logout);

          display: inline;
          visibility: visible;
          cursor: pointer;
          position: absolute;
          top: 0;
          right: 0;
          color: $text-color;
          padding: 15px 0;
          text-align: center;
          width: 50px;
          font-size: 20px;
        }

      }
      
      @media screen and (min-width: $sm-width) {
        min-width: 60px;
        min-height: 59px;

        a {
          width: 60px;
          height: 59px;

          &:before {
            padding: 20px 0;
            width: 60px;
          }
        }
      }
    }
  }
}

#title_bar {
  background-color: #fff;
  @include box-shadow($box-shadow);
  margin: 15px 0 0 0;
  padding: 8px 10px;
  @include clear-fix();

  @media screen and (min-width: $lg-width) {
    padding: 8px 20px;
    border-radius: $border-radius;
    margin: 15px 25px 0 25px;
  }

  #titlebar_left {
    display: inline-block;
    float: left;
    line-height: 29px;

    h2 {
      display: inline-block;
      font-size: 16px;
    }
  }

  #titlebar_right {
    display: inline-block;
    float: right;

    .action_item a {
      @include primary-button($button-primary-color, #fff);
      padding: 5px 8px;
    }
  }

  #page_title {
    font-weight: normal;
    margin: 0;
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/layouts/_main_content.scss
================================================
#main_content_wrapper {
  float: left;
  width: 100%;

  @include clear-fix();
}

#active_admin_content.with_sidebar #main_content_wrapper {
  width: 100%;

  @media screen and (min-width: $sm-width) {
    #main_content {
      border-top-right-radius: $border-radius;
      border-bottom-right-radius: $border-radius;
    }
  }

  @media screen and (min-width: $lg-width) {
    #main_content {
      margin-right: 20px;
    }
  }

  @media screen and (min-width: $lg-width) {
    #main_content {
      margin-right: 20px;
    }
  }
}

#main_content {
  background-color: #fff;
  @include box-shadow(0 0 4px 0 rgba(0,0,0,.04));
  padding: 15px 10px;

  @media screen and (max-width: 576px) {
    overflow-x: scroll;
  }

  @media screen and (min-width: $lg-width) {
    padding: 20px;
    border-radius: $border-radius;
  }
}

================================================
FILE: app/assets/stylesheets/arctic_admin/layouts/_sidebar.scss
================================================
.header #tabs {
  width: $header-width;
  height: calc(100% - 60px);
  position: fixed;
  top: 50px;
  background-color: $sidebar-background;
  border-right: 1px solid $sidebar-border-color;
  z-index: 1;
  overflow: auto;
  left: - $header-width;
  transition: .5s;
  transition-timing-function: ease-in-out;

  &.tabs_open {
    left: 0;
  }

  @media screen and (min-width: $sm-width) {
    top: 60px;
  }

  @media screen and (min-width: $lg-width) {
    left: 0px !important;
  }

  @media screen and (min-width: $x-lg-width) {
    width: $lg-header-width;
  }

  li {
    width: 100%;
    font-size: $font-size;
    line-height: 38px;
    cursor: pointer;

    a {
      width: 100%;
      height: 100%;
      display: inline-block;
      color: $text-color;
      padding: 0 20px;

      &:hover {
        background-color: $sidebar-item-hover-background;
      }
    }

    &.current {
      a {
        color: $link-primary-color;
      }
    }

    &.has_nested {
      & > a:nth-child(1) {
        position: relative;

        &:after {
          @include icon($icon-down);
          display: inline;
          position: absolute;
          top: 50%;
          right: 20px;
          @include transform(translateY(-50%));
          color: $text-color;
        }
      }

      ul {
        border-top: 1px solid $sidebar-border-color;
        border-bottom: 1px solid $sidebar-border-color;
        background-color: $body-background;
        padding: 10px 0;
        cursor: auto;
        display: none;

        a {
          padding: 0px 15px 0px 35px;
          color: $text-color;

          &:hover {
            background-color: $sidebar-nested-item-hover-background;
          }

          @media screen and (min-width: $x-lg-width) {
            padding: 0px 15px 0px 40px;
          }
        }

        .current a {
          color: $link-primary-color;
        }
      }

      &.open, &.current {
        & > a:nth-child(1) {
          position: relative;

          &:after {
            @include icon($icon-up);
          }
        }

        & > ul {
          display: block;
        }
      }
    }
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/layouts/_wrapper.scss
================================================
#wrapper {
  display: flex;
  flex-direction: column;

  .flashes {
    order: -1;
  }
}

================================================
FILE: app/assets/stylesheets/arctic_admin/mixins/_buttons_mixins.scss
================================================
$bg-tertiary-button: transparent;
$bg-tertiary-button-hover: rgba($border-color, .3);;

@mixin button() {
  border-radius: $border-radius;
  display: inline-block;
  @include transition-button();
  cursor: pointer;

  &:active, &:focus {
    outline: 0;
  }

  &.disabled, &:disabled {
    opacity: 0.6;
    cursor: no-drop;
  }
}

@mixin primary-button($background-color, $color) {
  background-color: $background-color;
  color: $color;
  border: none; 
  @include button();

  &:hover {
    background-color: lighten($background-color, 10%);
  }

  &:active, &:focus {
    background-color: darken($background-color, 10%); 
  }

  &:disabled {
    background-color: $background-color;
  }
}

@mixin secondary-button($color) {
  background-color: #fff;
  color: $color;
  border: 1px solid $color;
  padding: 4px 8px;
  @include button();

  &:hover {
    color: #fff;
    background-color: $color;
  }

  &:active, &:focus {
    background-color: darken($color, 10%);
    color: #fff;
  }
}

@mixin tertiary-button($color) {
  background-color: $bg-tertiary-button;
  color: $color;
  border: 1px solid $bg-tertiary-button;
  padding: 4px 8px;
  @include button();

  &:hover {
    color: $color;
    background-color: $bg-tertiary-button-hover;
  }

  &:active, &:focus {
    background-color: $bg-tertiary-button-hover;
    color: $color;
  }
}

@mixin secondary-dropdown($color) {
  @include secondary-button($color);
  padding: 6px 25px 6px 10px;
  position: relative;

  &:after {
    @include icon($icon-sort-down);
    position: absolute;
    right: 8px;
  }

  &:active, &:focus {
    background-color: darken($color, 10%); 
    color: #fff;
  }

  &.disabled, &:disabled {
    color: $grey;
    background-color: #f3f7f9;
    border-color: #f3f7f9;
    @include box-shadow(none);
    opacity: .65;
  }
}

@mixin group-button($color) {
  a {
    display: inline-block;
    color: $color;
    border-top: 1px solid $color;
    border-bottom: 1px solid $color;
    float: left;
    padding: 6px 10px;
    border-right: 1px solid $color;
    @include transition-button();
  }

  &:first-child a {
    border-left: 1px solid $color;
    border-top-left-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
  }

  &:last-child a {
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }

  &:hover {
    a {
      background-color: lighten($color, 10%);
      border-color: lighten($color, 10%);
      color: #fff;
    }
  }

  &:active, &:focus, &.selected {
    a {
      background-color: darken($color, 10%);
      border-color: darken($color, 10%);
      color: #fff;
    }
  }
}

@mixin little-button() {
  padding: 6px 12px;
}


================================================
FILE: app/assets/stylesheets/arctic_admin/mixins/_forms.scss
================================================
@mixin input-valid() {
  border-color: $success;
  background-color: rgba($success, .1);
}

@mixin input-invalid() {
  border-color: $error;
  background-color: rgba($error, .1);
}

================================================
FILE: app/assets/stylesheets/arctic_admin/mixins/_mixins.scss
================================================
@import "prefix_mixins";
@import "buttons_mixins";
@import "sidebar_mixins";
@import "forms";

================================================
FILE: app/assets/stylesheets/arctic_admin/mixins/_prefix_mixins.scss
================================================
@mixin transform($var) {
  -webkit-transform: $var;
     -moz-transform: $var;
      -ms-transform: $var;
       -o-transform: $var;
          transform: $var;
}

@mixin appearance($effect:none) {
  -webkit-appearance: $effect;
     -moz-appearance: $effect;
      -ms-appearance: $effect;
       -o-appearance: $effect;
          appearance: $effect;
}

@mixin transition($args...) {
  -webkit-transition: $args;
  -o-transition: $args;
  transition: $args;
}

@mixin transition-button() {
  @include transition(border .15s linear,color .15s linear,width .15s linear,background-color .15s linear);
}

@mixin box-shadow($args...) {
  -webkit-box-shadow: $args;
  -moz-box-shadow: $args;
  box-shadow: $args;
}

@mixin disable-user-select() {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin clear-fix() {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

@mixin outline() {
  &:focus {
    outline: 0;
  }
}

@mixin icon($code-icon) {
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font: 900 normal normal 14px/1 $font-icon;
  content: $code-icon;
}


================================================
FILE: app/assets/stylesheets/arctic_admin/mixins/_sidebar_mixins.scss
================================================
@mixin sidebar-container() {
  #active_admin_content.with_sidebar {
    #main_content_wrapper {
      width: $screen-filter-width;

      @media screen and (min-width: $sm-width) {
        padding-right: 10px;
      }

      @media screen and (min-width: $lg-width) {
        padding-right: 0;
        width: $lg-screen-filter-width;
      }
    }

    #sidebar {
      display: inline-block;

      tr:hover {
        background: rgba(243, 247, 249, 0.3);
      }
    }
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/pages/_form.scss
================================================
@mixin arctic-admin-form() {
  @include sidebar-container();
  
  form legend {
    font-weight: normal;
  }
  
  fieldset.inputs {
    margin-bottom: 20px;
  }
  
  .input {
    .label {
      padding-bottom: 5px;
      text-align: left;
      margin: auto 0;
      padding-top: 8px;
      text-align: right;
      font-size: $font-size;
  
      @media screen and (min-width: $sm-width) {
        padding-bottom: 0;
        height: 25px;
        width: $form-margin-left;
        float: left;
        padding-right: 20px;
      }
    }
    input, textarea {
      @media screen and (min-width: $sm-width) {
        width: $form-input-width;
      }
  
      &[type='radio'] {
        width: 15px;
        float: left;
        margin-top: 3px;
      }
  
      &[type='checkbox'] {
        width: 15px;
        margin: 0 5px -2px 0;
      }
    }
  
    .select2-container {
      @media screen and (min-width: $sm-width) {
        width: $form-input-width !important;
      }
  
      a {
        height: 30px;
        line-height: 30px;
      }
    }
  
    select {
      min-width: $form-input-width;
      height: 30px;
    }
  
    select[multiple] {
      height: 100px;
    }
  
    .fragment {
      margin-right: 10px;
  
      label {
        padding-right: 5px;
      }
  
      select {
        min-width: auto;
      }
    }
  
    &.boolean {
      margin-left: $form-margin-left;
      @include disable-user-select();
  
      input {
        width: auto;
      }
  
      label {
        font-size: $font-size;
        cursor: pointer;
        padding: 5px 5px 5px 0;
      }
  
      input[type='checkbox'] {
        width: 15px;
        margin: 0 5px -2px 0;
      }
    }
  
    li.fragment {
      display: inline;
    }
  
    li.choice {
      margin-left: $form-margin-left;
      
      .field_with_errors {
        float: left;
      }
    }
  
    .inline-errors {
      padding-left: $form-margin-left;
    }
  }
  
  .actions {
    padding-left: $form-margin-left;
  }
}

body.logged_in {
  &.new, &.edit, &.create, &.update {
    @include arctic-admin-form();
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/pages/_index.scss
================================================
@use "sass:math";

body.index {

  .resource_selection_toggle_cell, .resource_selection_cell {
    display: flex;
  }

  .table_tools {
    margin-bottom: 20px;
    font-size: $font-size;

    &:after {
      content: '';
      display: block;
      clear: both;
    }

    input[type='checkbox'] {
      display: flex;
    }

    .collection_selection_toggle_all {
      display: flex !important;
    }

    .batch_actions_selector {
      display: inline-block;
    }

    .dropdown_menu_button{
      @include secondary-dropdown($button-primary-color);
    }

    .dropdown_menu_list {
      background-color: #fff;
      padding: 10px 15px;
      border-radius: $border-radius;
      @include box-shadow($box-shadow);
      display: inline-block;
      position: absolute;
      z-index: 1;
    }

    .indexes.table_tools_segmented_control {
      display: flex;
      justify-content: right;

      a {
        @include secondary-button($button-primary-color);
      }

      .index {
        margin-right: 4px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .paginated_collection_contents {
    margin-bottom: 20px;
    overflow-x: auto;
  }

  #index_footer {
    font-size: $font-size;
  }

  .sortable {
    position: relative;

    &:after {
      @include icon($icon-sort);
      font-size: 12px;
      position: absolute;
      top: 50%;
      right: 5px;
      @include transform(translateY(-50%));

      @media screen and (min-width: $md-width) {
        // font-size: math.div($font-size, 1px);
      }
    }

    &.sorted-desc:after {
      content: "\f0dd";
    }

    &.sorted-asc:after {
      content: "\f0de";
    }
  }

  .table_actions {
    margin-bottom: -4px;

    .member_link {
      @include primary-button($button-primary-color, white);
      padding: 4px 8px;
      margin-right: 4px;
      margin-bottom: 4px;
    }
  }

  .scopes {
    .scope {
      @include group-button($button-primary-color);

      a {
        margin-right: .25rem;
      }
    }
  }

  #sidebar {
    position: fixed;
    transition: .5s;
    transition-timing-function: ease-in-out;
    right: - $filter-width;

    &.sidebar_open {
      right: 0;
    }

    @media screen and (min-width: $x-lg-width) {
      right: - $lg-filter-width;
    }

    &:before {
      cursor: pointer;
      position: absolute;
      top: 30px;
      left: -40px;
      width: 40px;
      height: 50px;
      background-color: #fff;
      @include box-shadow(-1px 0 4px 0 rgba(0,0,0,.04));
      border-top-left-radius: $border-radius;
      border-bottom-left-radius: $border-radius;
      @include icon($icon-filter);
      font-size: 20px;
      padding: 15px 10px;
    }
  }
}


================================================
FILE: app/assets/stylesheets/arctic_admin/pages/_login.scss
================================================
body.logged_out {
  .flash {
    position: fixed;
  }

  #active_admin_content {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
  }
}

#login {
  width: 100%;
  margin: auto;
  background-color: white;
  border-top: $border-radius solid $primary-color;
  @include box-shadow($box-shadow);
  color: $text-color;
  padding: 20px;

  @media screen and (min-width: 400px) {
    border-radius: $border-radius;
    width: 400px;
    padding: 30px;
  }

  h2 {
    text-align: center;
  }

  .label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
  }

  .input.boolean {
    @include disable-user-select();
    label {
      font-size: 15px;
      cursor: pointer;
      padding: 5px 5px 5px 0;
    }

    input[type='checkbox'] {
      width: 15px;
      margin: 0 5px -2px 0;
    }
  }

  a {
    margin-top: 10px;
    display: inline-block;
  }

  .input_action {
    min-width: 50%;
  }

  input[type="submit"] {
    line-height: 43px;
  }
}

================================================
FILE: app/assets/stylesheets/arctic_admin/pages/_show.scss
================================================
body.show {
  @include sidebar-container();
}

================================================
FILE: app/assets/stylesheets/arctic_admin/variables/_borders.scss
================================================
$border-radius: 3px !default;


================================================
FILE: app/assets/stylesheets/arctic_admin/variables/_box_shadows.scss
================================================
$box-shadow: 0 0 4px 0 rgba(0,0,0,0.1) !default;


================================================
FILE: app/assets/stylesheets/arctic_admin/variables/_colors.scss
================================================
// BASIC COLOR
$red: #B02B2C;
$green: #00897B;
$blue: #4bacfe;
$black: #36393D;
$grey: #76838f;

// flash
$error: #dc4747 !default;
$warning: #f2a654 !default;
$success: #46be8a !default;
$info: #57c7d4 !default;
$flash-text-color: #fff !default;
$flash-background-color: $grey !default;

// status_tag
$status-tag-text-color: #fff !default;
$status-tag-background-color: #cacaca !default;
$status-tag-background-valid-color: $success !default;
$status-tag-background-error-color: $error !default;

$border-color: #e4eaec !default;

// body
$body-background: #eee !default;

// header
$header-border-color: #e6e6e6 !default;
$header-background: #fff !default;

// nav action
$header-nav-action-hover-background: #f5f5f5 !default;
$header-nav-action-active-background: #f0f0f0 !default;

//sidebar
$sidebar-border-color: $header-border-color !default;
$sidebar-background: #f5f5f5 !default;

$sidebar-item-hover-background: #f0f0f0 !default;
$sidebar-nested-item-hover-background: #e7e7e7 !default;

// text
$text-color: #5a5a5a !default;
$text-color-important: #526069 !default;

$primary-color: $blue !default;
$link-primary-color: $primary-color !default;
$button-primary-color: $primary-color !default;


================================================
FILE: app/assets/stylesheets/arctic_admin/variables/_fonts.scss
================================================
$font-family-fallback: Arial, sans-serif !default;
$font-family-body: "LatoWeb", $font-family-fallback !default;

$font-size: 14px !default;


================================================
FILE: app/assets/stylesheets/arctic_admin/variables/_icons.scss
================================================
// you can customise any icons
// you need to use unicode of the icon font
// the unicode of fontawesome can be found here : https://fontawesome.com/

$font-icon: 'Font Awesome 6 Free', 'Font Awesome 6 Pro' !default;

$icon-user: "\f007" !default;
$icon-logout: "\f2f5" !default;

$icon-menu: "\f0c9" !default;

$icon-down: "\f0d7" !default;
$icon-up: "\f0d8" !default;

$icon-sort: "\f0dc" !default;
$icon-sort-down: "\f0dd" !default;
$icon-filter: "\f0b0" !default;


================================================
FILE: app/assets/stylesheets/arctic_admin/variables/_media_queries.scss
================================================
$sm-width: 576px !default;
$md-width: 768px !default;
$lg-width: 992px !default;
$x-lg-width: 1400px !default;

// <576px  Extra small
// ≥576px  Small
// ≥768px  Medium
// ≥992px  Large
// ≥1400px Extra large


================================================
FILE: app/assets/stylesheets/arctic_admin/variables/_size.scss
================================================
$header-width: 200px !default;
$screen-header-width: calc(100% - 200px) !default;
$lg-header-width: 250px !default;
$lg-screen-header-width: calc(100% - 250px) !default;

$filter-width: 230px !default;
$screen-filter-width: calc(100% - 230px) !default;
$lg-filter-width: 270px !default;
$lg-screen-filter-width: calc(100% - 270px) !default;

$input-height: 36px !default;

// Forms
$form-margin-left: 25%;
$form-input-width: 50%;


================================================
FILE: app/assets/stylesheets/arctic_admin/variables/_spaces.scss
================================================
$space-0: 0;
$space-0-1: 0.125rem; /* 2px */
$space-1: 0.25rem; /* 4px */
$space-2: 0.5rem; /* 8px */
$space-3: 0.75rem; /* 12px */
$space-4: 1rem; /* 16px */
$space-5: 1.25rem; /* 20px */
$space-6: 1.5rem; /* 24px */
$space-7: 1.75rem; /* 28px */
$space-8: 2rem; /* 32px */
$space-9: 2.25rem; /* 36px */
$space-10: 2.5rem; /* 40px */
$space-11: 2.75rem; /* 44px */
$space-12: 3rem; /* 48px */
$space-14: 3.5rem; /* 56px */
$space-16: 4rem; /* 64px */
$space-20: 5rem; /* 80px */
$space-24: 6rem; /* 96px */
$space-28: 7rem; /* 112px */
$space-32: 8rem; /* 128px */
$space-36: 9rem; /* 144px */
$space-40: 10rem; /* 160px */
$space-44: 11rem; /* 176px */
$space-48: 12rem; /* 192px */
$space-52: 13rem; /* 208px */
$space-56: 14rem; /* 224px */
$space-60: 15rem; /* 240px */
$space-64: 16rem; /* 256px */
$space-72: 18rem; /* 288px */
$space-80: 20rem; /* 320px */
$space-96: 24rem; /* 384px */


================================================
FILE: app/assets/stylesheets/arctic_admin/variables/_variables.scss
================================================
@import "colors";
@import "size";
@import "icons";
@import "media_queries";
@import "fonts";
@import "spaces";
@import "borders";


================================================
FILE: arctic_admin.gemspec
================================================
# coding: utf-8
lib = File.expand_path('../lib', __FILE__)
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
require 'arctic_admin/version'

Gem::Specification.new do |s|
  s.name        = 'arctic_admin'
  s.version     = ArcticAdmin::VERSION
  s.summary     = "Arctic Admin theme for ActiveAdmin"
  s.description = "A responsive theme for Active Admin"
  s.authors     = ["Clément Prod'homme"]
  s.files       = Dir["{app,lib}/**/*"] + ["README.md", 'LICENCE.txt']
  s.homepage    = 'https://github.com/cprodhomme/arctic_admin'
  s.metadata    = {
    "source_code_uri" => "https://github.com/cprodhomme/arctic_admin",
    "changelog_uri"   => "https://github.com/cprodhomme/arctic_admin/releases",
  }

  s.license     = 'MIT'
  s.require_paths = ["lib"]
  s.add_development_dependency "bundler", "~> 1.5"
  s.add_development_dependency "rake"
  s.add_dependency 'activeadmin', ['>= 1.1.0', '< 4.0']
  s.add_dependency 'font-awesome-sass', '~> 6.0'
end


================================================
FILE: lib/arctic_admin/version.rb
================================================
module ArcticAdmin
  VERSION = "4.3.3"
end


================================================
FILE: lib/arctic_admin.rb
================================================
require "arctic_admin/version"
require 'font-awesome-sass'

module ArcticAdmin
  module Rails
    class Engine < ::Rails::Engine
    end
  end
end


================================================
FILE: package.json
================================================
{
  "name": "arctic_admin",
  "version": "4.3.3",
  "description": "Responsive Theme for ActiveAdmin",
  "main": "app/assets/javascripts/arctic_admin/main.js",
  "files": [
    "app/assets/javascripts/arctic_admin/*.js",
    "src/**/*"
  ],
  "scripts": {
    "prepublishOnly": "rm -rf src && cp -R app/assets/javascripts/arctic_admin src && cp -R app/assets/stylesheets/arctic_admin src/scss && cp -R app/assets/fonts src/fonts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/cprodhomme/arctic_admin.git"
  },
  "keywords": [
    "activeadmin",
    "theme",
    "arctic_admin"
  ],
  "author": "Clément Prod'homme",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/cprodhomme/arctic_admin/issues"
  },
  "homepage": "https://github.com/cprodhomme/arctic_admin#readme"
}