Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
common.scss 7.79 KiB
Newer Older
  • Learn to ignore specific revisions
  • Christophe Chaudier's avatar
    Christophe Chaudier committed
    @import 'buttons';
    
    @import 'categories_box';
    @import 'footer';
    
    @import 'variables';
    
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"],
    .d-editor-textarea-wrapper, .select-kit-header {
      @include border-radius;
    }
    
    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="datetime"]:focus,
    input[type="datetime-local"]:focus,
    input[type="date"]:focus,
    input[type="month"]:focus,
    input[type="time"]:focus,
    input[type="week"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="url"]:focus,
    input[type="search"]:focus,
    input[type="tel"]:focus,
    input[type="color"]:focus,
    .d-editor-textarea-wrapper.in-focus,
    .select-kit.multi-select.is-expanded .multi-select-header,
    .select-kit.single-select.is-expanded .select-kit-header:not(.btn),
    .select-kit.single-select .select-kit-header:not(.btn):focus,
    .select-kit.single-select .select-kit-header:not(.btn):active {
      @include border-radius;
      box-shadow: none;
      outline: none;
    }
    
    
    :root {
      --banner-secondary-text: var(--primary-medium);
    }
    
    
    body {
      background-color: $header_primary;
    }
    
    
    Christophe Chaudier's avatar
    Christophe Chaudier committed
    // HEADER //
    
    .d-header {
      height: 5em;
      box-shadow: none;
    }
    
    
    Christophe Chaudier's avatar
    Christophe Chaudier committed
    .navigation-topics {
      .container.list-container {
        @include border-radius;
        box-shadow: 0 8px 60px 0 rgba(159, 161, 165, 0.1), 0 12px 90px 0 rgba(197, 197, 197, 0.1);
        padding: 2em;
        border-top: 8px solid $primary-medium;
        margin-top: .8em;
      }
    }
    
    .menu-panel .d-label {
      color: $primary;
    }
    
    
    .alert.alert-info {
      border-radius: 10px;
    }
    
    
    Christophe Chaudier's avatar
    Christophe Chaudier committed
    // MENU //
    
    .menu-panel .widget-link:hover, .menu-panel .widget-link:focus,
    .menu-panel .categories-link:hover, .menu-panel .categories-link:focus {
      background-color: var(--primary-medium-low);
    }
    
    .user-menu .quick-access-panel li:hover {
      background-color: var(--tertiary-low);
    }
    
    
    // Text //
    p {
      color: var(--primary);
    }
    
    .site-texts .site-text .site-text-value {
      color: var(--primary);
    }
    
    .th {
      color: var(--primary);
    }
    
    .permalink-description {
      color: var(--quarternary);
    }
    
    .admin-customize .themes-list-container .themes-list-item.inactive-indicator {
      color: var(--primary-medium);
    }
    
    .content-list h3 {
      color: var(--primary-medium);
    }
    
    // PAGE home //
    
    .custom-homepage-columns {
      margin: 2em 0 2em 0;
      .col {
        position: relative;
        @include border-radius;
        padding: 2em 2em 1em;
    
        border-top: 8px solid $header_background;
        box-shadow: 0 8px 60px 0 rgba(154, 157, 163, 0.1), 0 12px 90px 0 rgba(134, 134, 134, 0.1);
    
    
        .header-wrapper {
          color: var(--primary);
          background-color: transparent;
          .btn-primary {
            display: none;
          }
        }
        .btn-more {
          color: var(--secondary);
    
          background: var(--primary-medium);
    
          transition: all 0.3s linear;
          @include border-radius;
          text-transform: uppercase;
    
          border: 1px solid var(--primary-medium);
    
          &:hover {
    
            background: var(--primary-medium);
    
            color: var(--secondary);
    
            box-shadow: 4px 4px $tertiary;
    
            transition: 0.3s;
            @include border-radius;
          }
        }
      }
    }
    
    
    /// Text box ///
    
    .topic-list-item.visited a.title:not(.badge-notification), .latest-topic-list-item.visited a.title:not(.badge-notification), .category-topic-link.visited a.title:not(.badge-notification) {
      color: $primary;
    }
    
    
    /// Searches elements ///
    
    .navigation-categories .search-banner {
      @include border-radius;
      height: 350px;
      box-sizing: border-box;
      padding: 2.5em 0 3em;
      margin: 1em auto;
      max-width: 1110px;
    }
    
    
    .search-widget .search-context {
      padding: 10px;
      background-color: var(--primary-medium-medium);
      @include border-radius;
    }
    
    .search-menu .search-context .show-help {
      color: $header_background;
    }
    
    .custom-search-banner-wrap h1, .custom-search-banner-wrap p {
      color: $header_background;
    }
    
    .search-container .search-advanced-sidebar {
      .search-advanced-title {
        background: var(--tertiary);
        color: var(--secondary);
      }
      .search-advanced-filters {
        border: 1px dashed var(--tertiary);
      }
    }
    
    
    .open .grippie {
      background: var(--tertiary);
    }
    
    .options.toolbar-popup-menu-options {
      button.single-select-header.dropdown-select-box-header {
        background: transparent;
        border-radius: none;
        border: none;
        &:hover {
    
          background: var(--primary-medium);
    
          border-radius: 0;
        }
      }
    }
    
    .list-controls .combo-box .combo-box-header {
    
      border: 1px solid $primary-medium;
      color: $primary;
      box-shadow: 1px 1px 5px 1px rgba(67,66,66, .2);
    
      @include border-radius;
    
      background-color: $header_primary;
    
    }
    
    .menu-panel .panel-body-bottom .btn {
      svg {
    
        color: var(--primary-medium);
    
      }
      &:hover {
    
        background: var(--primary-medium);
    
        color: var(--secondary);
      }
    }
    
    .nav-pills li a {
      border: 1px solid transparent;
      @include border-radius;
      &:hover {
        @include border-radius;
        transition: all 0.3s linear;
        background-color: transparent;
    
        color: var(--primary-medium);
        border: 1px dashed var(--primary-medium);
    
      }
      &.active {
        @include border-radius;
        transition: all 0.3s linear;
    
        background: $primary-medium;
    
        color: var(--secondary);
    
        border: 1px solid $primary-medium;
    
      }
    }
    
    .d-editor-button-bar .select-kit.dropdown-select-box .dropdown-select-box-header {
      background: transparent;
    
      color: var(--primary-low-mid);
    
      border: 1px solid transparent;
      border-radius: 0;
      svg {
        color: currentColor;
      }
      &:hover {
    
        color: var(--secondary-hover);
    
        background: var(--tertiary-hover);
        border: 1px solid var(--tertiary-hover);
        border-radius: 5px;
      }
    }
    
    .create {
      @include border-radius;
    }
    
    .select-kit .select-kit-row.is-selected {
      background-color: var(--secondary-very-high);
    }
    
    .modal-inner-container, .edit-category-footer {
      .btn-primary {
        @include border-radius;
      }
    }
    
    
    .image-upload-controls {
    
      border: 1px solid var(--secondary);
      .fa {
        color: var(--secondary);
      }
    }
    
    .admin-controls, .email-template, .admin-container {
      .nav-pills>li a.active {
    
        background: var(--primary-medium);
    
        color: var(--secondary);
      }
      .btn-primary {
        @include border-radius;
      }
    }
    
    summary.select-kit-header.single-select-header.dropdown-select-box-header {
      padding: 0.5em;
    }
    
    
    Christophe Chaudier's avatar
    Christophe Chaudier committed
    // LINKS //
    a {
      color: var(--primary-medium-hover);
    }
    
    a:hover {
      color: var(--tertiary-hover);
    }
    
    
    // Color showcase categories //
    .custom-homepage-columns .col {
      position: relative;
      background-color: $secondary;
    }
    
    .admin-report .header .breadcrumb .report .info {
      color: $primary-medium;
    
    // PAGE Top & Latest //
    .navigation-topics .container.list-container{
      background-color: $secondary;
    
    // Bouton & btn //
    .btn[href] {
      color: var(--secondary);
    
    .btn-default, .btn.btn-icon-text {
      color: var(--secondary);
      background: var(--primary-medium);
      transition: all 0.3s linear;
      @include border-radius;
      text-transform: uppercase;
    
      .fa {
        color: var(--secondary);
      }
    
    .custom-footer .footer-section-link-wrapper a:hover, .custom-footer .third-box .small-link:hover {
      text-decoration: underline;
      text-underline-offset: 5px;
    }
    
    
    ////Color showcase categories/////
    .custom-homepage-columns .col {
      position: relative;
      background-color: $secondary;
    }
    
    
    .discourse-no-touch .btn-danger:hover {
      background: var(--danger-hover);
    
    .discourse-no-touch .btn:hover .d-icon, .discourse-no-touch .btn.btn-hover .d-icon {
      color: var(--tertiary-hover);
    
    .discourse-no-touch .btn:hover, .discourse-no-touch .btn.btn-hover {
      color: var(--secondary);
      background: $header-background;
      border-radius: 5px;
      .fa {
        color: var(--quarternary);
        &:hover {
          color: var(--quarternary);
        }
      }
    
    /// button widget ///
    .btn-flat .icon {
      color: $primary-low-mid;
    }
    
    .btn-flat .d-icon {
      color: $primary-low-mid;