...
...
*
* The .btn-dropdown can use
* any class modifiers (col-*, btn-*)
*
*
************************************/
/* _Component_ VARIABLES */
/* _Component_ STYLE */
.dropdown-toggle {
cursor: pointer; }
.dropdown {
position: relative;
display: inline-block;
z-index: 5000; }
.dropdown-menu {
display: none;
list-style: none;
margin: 4px 0 0;
padding: 0;
width: 100%;
min-width: 150px;
left: 0;
position: absolute;
text-align: left;
background: #369CD7;
font-size: 0.9rem;
line-height: 1.5rem;
border-radius: 4px;
box-shadow: none;
z-index: 6000; }
.dropdown-menu.dropdown-menu-left {
left: auto;
right: 0; }
.dropdown-menu.active {
display: inline-block; }
.btn + .dropdown-menu, .jquery-comments .textarea-wrapper .control-row > span + .dropdown-menu,
button + .dropdown-menu {
top: calc(100% - 1.5rem); }
a + .dropdown-menu {
top: 100%; }
.dropdown-item {
display: block;
color: #FFF; }
.dropdown-item a {
padding: 0.5rem 1rem;
display: block;
color: #FFF; }
.dropdown-item:hover a {
color: #0f354b; }
.dropdown-header {
padding: 0.5rem 1rem;
display: block;
color: #0f354b; }
.dropdown-divider {
display: block;
height: 1px;
background: #BDC3C7;
padding: 0;
margin: 0; }
/*************************************
* _Component_ HAMBURGER
*
* A simple burger icon with 2 states
* and animation.
*
* ==================================
* NO REQUIREMENT
*
* ==================================
* NO LAYOUT
*
*
************************************/
/* _Component_ VARIABLES */
/* _Component_ STYLE */
.btn-hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 48px;
height: 48px;
font-size: 0;
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border-radius: none;
background-color: transparent;
border: none;
cursor: pointer;
-webkit-transition: background 0.15s;
transition: background 0.15s; }
.btn-hamburger span {
display: block;
position: absolute;
top: 22px;
left: 8px;
right: 8px;
border-radius: none;
height: 4px;
background: #369CD7; }
.btn-hamburger span:before, .btn-hamburger span:after {
position: absolute;
display: block;
left: 0;
width: 100%;
border-radius: none;
height: 4px;
background-color: #369CD7;
content: ""; }
.btn-hamburger span:before {
top: -9.7777777778px; }
.btn-hamburger span:after {
bottom: -9.7777777778px; }
.btn-hamburger:hover, .btn-hamburger:active, .btn-hamburger:focus {
background: transparent;
border: none;
outline: 0; }
.btn-hamburger span {
-webkit-transition: background 0s 0.15s;
transition: background 0s 0.15s; }
.btn-hamburger span:before, .btn-hamburger span:after {
-webkit-transition-duration: 0.15s, 0.15s;
transition-duration: 0.15s, 0.15s;
-webkit-transition-delay: 0.15s, 0s;
transition-delay: 0.15s, 0s; }
.btn-hamburger span:before {
-webkit-transition-property: top, -webkit-transform;
transition-property: top, transform; }
.btn-hamburger span:after {
-webkit-transition-property: bottom, -webkit-transform;
transition-property: bottom, transform; }
.btn-hamburger.active span {
background: none; }
.btn-hamburger.active span:before {
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
.btn-hamburger.active span:after {
bottom: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
.btn-hamburger.active span:before, .btn-hamburger.active span:after {
-webkit-transition-delay: 0s, 0.15s;
transition-delay: 0s, 0.15s; }
/*************************************
* _Component_ HEXAGON
*
*
* ==================================
* REQUIRES:
-- Nothing
*
* ==================================
*
use as a mixin
*
.hexagon {
@include hexagon(width:5rem, border:none, background: $white, background-image:none);
}
*
*
************************************/
/* mixin */
/******************************************************
* MIXIN WITH BORDER AND IMAGE
*******************************************************/
/***************************************************************************************************/
/*************************************
* _Component_ TABS
*
*
* ==================================
* REQUIRES:
-- /import/_variables
*
* ==================================
*
*
*
************************************/
/* _Component_ VARIABLES */
/* _Component_ STYLE */
.tabs {
margin: 0 0 1.5rem; }
.tabs .tab-selector-list {
list-style: none;
margin: 0;
padding: 0;
border-right: none;
border-bottom: 1px solid #BDC3C7;
border-left: none; }
.tabs .tab-selector {
display: inline-block;
margin-bottom: -1px;
margin-right: -1px;
cursor: pointer;
border-radius: 0;
border-right: none;
border-bottom: 1px solid transparent;
border-left: none;
color: #D2D7D3;
padding: 0.5em 2em;
width: 100%; }
@media (min-width: 768px) {
.tabs .tab-selector {
width: auto; } }
.tabs .tab-selector.active, .tabs .tab-selector:hover {
border-right: none;
border-bottom: 2px solid #369CD7;
border-left: none;
color: #369CD7; }
.tabs .tab {
display: none;
margin: 0;
padding: 1rem 0 0; }
.tabs .tab.active {
display: block; }
/*************************************
* _Component_ TAGS
*
*
* ==================================
* REQUIRES:
-- /import/_variables
*
* ==================================
*
...
*
*
************************************/
/* _Component_ VARIABLES */
/* _Component_ STYLE */
.tag {
padding: 0.15em 0.75em;
display: inline-block;
border: 1px solid transparent;
cursor: pointer;
border-radius: 1em; }
.tag.tag-all {
background: transparent;
color: #2c3e50;
border: 1px solid #2c3e50; }
.tag.tag-prh {
background: transparent;
color: #7ED321;
border: 1px solid #7ED321; }
.tag.tag-fpr {
background: transparent;
color: #FCA1CC;
border: 1px solid #FCA1CC; }
.tag.tag-sub {
background: transparent;
color: #B81138;
border: 1px solid #B81138; }
.tag.tag-avf {
background: transparent;
color: #9A12B3;
border: 1px solid #9A12B3; }
.tag.tag-avr {
background: transparent;
color: #20A1FD;
border: 1px solid #20A1FD; }
.tag.tag-pre {
background: transparent;
color: #FCC01D;
border: 1px solid #FCC01D; }
.tag.tag-pct {
background: transparent;
color: #FC0FC0;
border: 1px solid #FC0FC0; }
.tag.tag-small {
font-size: 0.8em;
line-height: 1.5emrem; }
.tag.tag-large {
font-size: 1.5996rem;
line-height: 3rem; }
/******************************************
* TOGGLE
*
* Create a toggle switch from a checkbox
*
* Requieres:
* - theme.scss,
* - _core/_constants.scss
* - _core/_engine.scss
*
* Markup example:
*
*
*
*
*
******************************************/
/******************************************
* Toggle style:
******************************************/
.toggle input[type="checkbox"] {
display: none; }
.toggle label {
width: 70px;
height: 30px;
max-width: 100%;
border-radius: 30px;
background: #F2F1EF;
position: relative;
-webkit-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
margin-bottom: 1.5rem; }
.toggle label:after {
content: '';
width: 22px;
height: 22px;
background: #FF4136;
border-radius: 30px;
position: absolute;
left: 4px;
-webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
top: 4px; }
.toggle input[type="checkbox"]:checked + label {
background: #369CD7; }
.toggle input[type="checkbox"]:checked + label:after {
left: 44px;
background: #FFF; }
/*************************************
* _Component_ TOOLTIPS
*
*
* ==================================
* REQUIRES:
-- /import/_variables
*
* ==================================
*
...
*
*
************************************/
/* _Component_ VARIABLES */
/* _Component_ STYLE */
.tooltip {
position: relative;
display: inline-block;
cursor: help; }
.tooltip:before, .tooltip:after {
position: absolute;
bottom: 100%;
left: 50%;
visibility: hidden;
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
-webkit-transition: all .15s;
transition: all .15s;
pointer-events: none; }
.tooltip:before {
content: "";
position: absolute;
background: transparent;
border: 6px solid transparent;
border-top-color: #2c3e50;
z-index: 9999;
margin-bottom: -12px; }
.tooltip:after {
content: attr(data-tooltip);
background: #2c3e50;
color: #FFF;
font-weight: 400;
margin: 0;
padding: .5em 1em;
white-space: normal;
z-index: 7000;
max-width: 200px;
min-width: 150px;
text-align: center;
font-size: 0.8rem;
line-height: 1.5rem;
border-radius: 4px; }
.tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after {
-webkit-transform: translate3d(-50%, -10px, 0);
transform: translate3d(-50%, -10px, 0);
visibility: visible;
opacity: 1; }
.tooltip.tooltip-left:before, .tooltip.tooltip-left:after {
bottom: 50%;
left: -10px;
-webkit-transform: translate3d(-75%, 50%, 0);
transform: translate3d(-75%, 50%, 0); }
.tooltip.tooltip-left:before {
border-top-color: transparent;
border-left-color: #2c3e50;
margin-bottom: 0;
margin-right: 12px;
left: auto; }
.tooltip.tooltip-left:hover:before, .tooltip.tooltip-left:hover:after, .tooltip.tooltip-left:focus:before, .tooltip.tooltip-left:focus:after {
-webkit-transform: translate3d(-100%, 50%, 0);
transform: translate3d(-100%, 50%, 0); }
.tooltip.tooltip-right:before, .tooltip.tooltip-right:after {
bottom: 50%;
right: -10px;
-webkit-transform: translate3d(-75%, 50%, 0);
transform: translate3d(-75%, 50%, 0); }
.tooltip.tooltip-right:before {
border-top-color: transparent;
border-right-color: #2c3e50;
margin-bottom: 0;
margin-left: 12px;
left: auto; }
.tooltip.tooltip-right:hover:before, .tooltip.tooltip-right:hover:after, .tooltip.tooltip-right:focus:before, .tooltip.tooltip-right:focus:after {
-webkit-transform: translate3d(100%, 50%, 0);
transform: translate3d(100%, 50%, 0); }
.tooltip.tooltip-bottom:before, .tooltip.tooltip-bottom:after {
bottom: auto;
top: auto;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0); }
.tooltip.tooltip-bottom:before {
border-top-color: transparent;
border-bottom-color: #2c3e50;
margin-bottom: 0;
margin-top: -12px;
top: 100%; }
.tooltip.tooltip-bottom:hover:before, .tooltip.tooltip-bottom:hover:after, .tooltip.tooltip-bottom:focus:before, .tooltip.tooltip-bottom:focus:after {
-webkit-transform: translate3d(-50%, 10px, 0);
transform: translate3d(-50%, 10px, 0); }
/*************************************
* _Comp
*
* ==================================
* REQUIRES:
-- /import/_variables.scss
*
* ==================================
* LAYOUT:
*
whatever
*
*
*
************************************/
/* _Component_ VARIABLES */
/* _Component_ STYLE */
.modal {
overflow-x: hidden;
overflow-y: auto;
position: fixed;
width: 100%;
min-height: 100%;
max-height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
padding: 2rem;
z-index: 9000;
display: none;
opacity: 0;
-webkit-transition: opacity .2s;
transition: opacity .2s;
-webkit-overflow-scrolling: touch; }
.modal.loading, .modal.active {
display: block;
opacity: 1; }
.modal.active .modal-message {
display: none; }
.modal.active .modal-content {
display: block; }
.modal.loading .modal-message {
display: block; }
.modal.modal-height-adjust .modal-container {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
height: auto; }
.modal button.close {
float: right; }
.modal-message {
color: #FFF; }
.modal-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 100%; }
.modal-content {
max-width: 800px;
width: 100%;
display: none;
background: #FFF;
border-radius: 4px; }
.modal-header {
padding: 1.5rem 1.5rem;
border-bottom: 1px solid #BDC3C7; }
.modal-body {
padding: 1.5rem 1.5rem; }
.modal-body .row {
min-width: 100%; }
.modal-footer {
border-top: 1px solid #BDC3C7;
padding: 1.5rem 1.5rem; }
body.modal-is-active {
overflow: hidden;
position: absolute;
height: 100%; }
@media (min-width: 768px) {
.modal {
height: 100%;
min-height: auto;
max-height: auto; }
body.modal-is-active {
overflow: hidden;
position: relative;
height: 100%; } }
/*************************************
* _Component_ POPOVER
*
*
* ==================================
* REQUIRES:
-- /import/_variables
*
* ==================================
*