init
This commit is contained in:
36
public/scss/components/_badge.scss
Normal file
36
public/scss/components/_badge.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* BADGE
|
||||
*
|
||||
* Markup:
|
||||
* -------
|
||||
*
|
||||
* <ul>
|
||||
* <li class="badge badge--primary">Badge 1</li>
|
||||
* <li class="badge badge--secondary badge--big">Badge 1</li>
|
||||
* </ul>
|
||||
*
|
||||
*/
|
||||
|
||||
.badge {
|
||||
background-color: $bg-badge;
|
||||
border-radius: $bdr-badge;
|
||||
color: $c-badge;
|
||||
display: inline-block;
|
||||
line-height: $lh-badge;
|
||||
padding: $p-badge;
|
||||
|
||||
&--big {
|
||||
font-size: $fz-badge-big;
|
||||
}
|
||||
|
||||
&--small {
|
||||
font-size: $fz-badge-small;
|
||||
}
|
||||
|
||||
@each $type, $color in $badges-color-map {
|
||||
&--#{$type} {
|
||||
background-color: $color;
|
||||
color: $c-badge-colored;
|
||||
}
|
||||
}
|
||||
}
|
||||
149
public/scss/components/_buttons.scss
Normal file
149
public/scss/components/_buttons.scss
Normal file
@@ -0,0 +1,149 @@
|
||||
/**
|
||||
* BUTTON
|
||||
*
|
||||
* Markup:
|
||||
* -------
|
||||
*
|
||||
* <button class="button">Default</button>
|
||||
* <button class="button button--big">Button big</button>
|
||||
* <button class="button button--secondary">Button secondary</button>
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
// reset default buttons
|
||||
button {
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: $bg-button;
|
||||
border: 0;
|
||||
border-radius: $bdr-button;
|
||||
color: $c-button;
|
||||
display: inline-block;
|
||||
font-family: $ff-button;
|
||||
font-size: $fz-button;
|
||||
font-weight: $fw-button;
|
||||
line-height: $lh-button;
|
||||
margin: $m-button;
|
||||
padding: $p-button;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: $tt-button;
|
||||
transition: opacity .2s ease-in-out;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $c-button;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($c-primary, .8);
|
||||
color: $c-white;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// sizes
|
||||
&--big {
|
||||
font-size: $fz-button-big;
|
||||
padding: $p-button-big;
|
||||
}
|
||||
|
||||
&--small {
|
||||
font-size: $fz-button-small;
|
||||
padding: $p-button-small;
|
||||
}
|
||||
|
||||
&--mobileFull {
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// colors
|
||||
&--secondary {
|
||||
background-color: $c-secondary;
|
||||
color: $c-white;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($c-secondary, .8);
|
||||
color: $c-white;
|
||||
}
|
||||
}
|
||||
|
||||
&--white {
|
||||
background-color: $c-white;
|
||||
color: $c-primary;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($c-white, .8);
|
||||
color: rgba($c-primary, .8);
|
||||
}
|
||||
}
|
||||
|
||||
&--green {
|
||||
background-color: $c-success;
|
||||
color: $c-white;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($c-success, .8);
|
||||
color: $c-white;
|
||||
}
|
||||
}
|
||||
|
||||
&--red {
|
||||
background-color: $c-error;
|
||||
color: $c-white;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($c-error, .8);
|
||||
color: $c-white;
|
||||
}
|
||||
}
|
||||
|
||||
&--transparent {
|
||||
background-color: transparent;
|
||||
color: $c-button-transparent;
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
color: rgba($c-button-transparent, .8);
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
&--outlined {
|
||||
background-color: transparent;
|
||||
border: $bd-medium;
|
||||
color: $c-button-outlined;
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
color: rgba($c-button-outlined, .8);
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
398
public/scss/components/_forms.scss
Normal file
398
public/scss/components/_forms.scss
Normal file
@@ -0,0 +1,398 @@
|
||||
/**
|
||||
* FORMS
|
||||
*
|
||||
* Markup:
|
||||
* ---------
|
||||
* <div class="input input-fullWidth">
|
||||
* <input id="#" placeholder="#" type="text">
|
||||
* </div>
|
||||
*
|
||||
* <div class="select select-fullWidth">
|
||||
* <select name="#" id="#">
|
||||
* <option>Option 1</option>
|
||||
* <option>Option 2</option>
|
||||
* </select>
|
||||
* </div>
|
||||
*
|
||||
* <div class="textarea">
|
||||
* <textarea id="#"></textarea>
|
||||
* </div>
|
||||
*
|
||||
* <div class="radio">
|
||||
* <input id="#" name="#" type="radio" value="">
|
||||
* <label for="#">Radio button</label>
|
||||
* </div>
|
||||
*
|
||||
* <div class="checkbox">
|
||||
* <input id="#" name="#" type="checkbox" value="">
|
||||
* <label for="#">Checkbox</label>
|
||||
* </div>
|
||||
*/
|
||||
|
||||
|
||||
// prevent input default appearence on webkit
|
||||
input,
|
||||
textarea {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// Disable webkit background color
|
||||
input:-webkit-autofill {
|
||||
box-shadow: 0 0 0 1000px $bgc-form inset;
|
||||
}
|
||||
|
||||
// Common styles
|
||||
.textarea,
|
||||
.input,
|
||||
.select {
|
||||
border: $bd-form;
|
||||
border-radius: $bdr-form;
|
||||
box-shadow: none;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.has-error {
|
||||
background: $bgc-form-error;
|
||||
border: $bd-form-error;
|
||||
margin-bottom: 0; // we should display an error message
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
background-color: $bgc-form;
|
||||
display: inline-block;
|
||||
margin-right: $m-medium;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&-fullWidth {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: $c-form;
|
||||
display: block;
|
||||
font-size: $fz-form;
|
||||
line-height: $lh-medium;
|
||||
margin: 0;
|
||||
padding: $p-form;
|
||||
padding-right: 30px;
|
||||
transition: $trs-form;
|
||||
width: 100%;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: $bgc-form-focus;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
background: $c-primary;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 2px;
|
||||
margin-top: 2px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 50%;
|
||||
transform-origin: 1px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
// textarea
|
||||
.textarea {
|
||||
background-color: $bgc-form;
|
||||
padding: 0;
|
||||
|
||||
&-fullWidth {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: $c-form;
|
||||
display: block;
|
||||
font-family: $ff-body;
|
||||
font-size: $fz-form;
|
||||
line-height: $lh-medium;
|
||||
margin: 0;
|
||||
min-height: $mih-form-textarea;
|
||||
padding: $p-form;
|
||||
transition: $trs-form;
|
||||
width: 100%;
|
||||
|
||||
&::placeholder {
|
||||
color: $c-form-placeholder;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: $bgc-form-focus;
|
||||
border: 0;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.checkbox {
|
||||
margin-bottom: $m-small;
|
||||
position: relative;
|
||||
|
||||
input[type='checkbox'] {
|
||||
display: none;
|
||||
|
||||
&:checked + label::after {
|
||||
animation: checkboxAndRadioAnimation .25s;
|
||||
content: '';
|
||||
transform: scale(1) rotate(45deg);
|
||||
}
|
||||
|
||||
& + label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding-left: 30px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
background-color: $bgc-form;
|
||||
border: $bd-form;
|
||||
border-radius: $bdr-medium;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
left: 0;
|
||||
margin-top: -10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-bottom: 3px solid $c-primary;
|
||||
border-right: 3px solid $c-primary;
|
||||
display: block;
|
||||
height: 12px;
|
||||
left: 11px;
|
||||
margin-left: -4px;
|
||||
margin-top: -7px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 7px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
margin-bottom: $m-small;
|
||||
position: relative;
|
||||
|
||||
input[type='radio'] {
|
||||
display: none;
|
||||
|
||||
&:checked + label::after {
|
||||
animation: checkboxAndRadioAnimation .25s;
|
||||
content: '';
|
||||
transform: scale(1) rotate(45deg);
|
||||
}
|
||||
|
||||
& + label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding-left: 30px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
background-color: $bgc-form;
|
||||
border: $bd-form;
|
||||
border-radius: 20px;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
left: 0;
|
||||
margin-top: -10px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-color: $c-primary;
|
||||
border-radius: 20px;
|
||||
display: block;
|
||||
height: 10px;
|
||||
left: 11px;
|
||||
margin-left: -6px;
|
||||
margin-top: -6px;
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
width: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkboxAndRadioAnimation {
|
||||
0% {
|
||||
transform: scale(0) rotate(45deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1.5) rotate(45deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.input {
|
||||
background-color: $bgc-form;
|
||||
margin-right: 10px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
:focus,
|
||||
:active {
|
||||
background-color: $bgc-form-focus;
|
||||
border-radius: $bdr-form;
|
||||
}
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: $c-form;
|
||||
font-size: $fz-form;
|
||||
line-height: $lh-medium;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
padding: $p-form;
|
||||
width: 100%;
|
||||
|
||||
&::placeholder {
|
||||
color: $c-form-placeholder;
|
||||
}
|
||||
}
|
||||
|
||||
&-withIcon {
|
||||
input {
|
||||
padding-right: $size-form-input-icon * 2;
|
||||
}
|
||||
}
|
||||
|
||||
&-icon {
|
||||
fill: $c-form-input-icon;
|
||||
height: $size-form-input-icon;
|
||||
margin-top: -$size-form-input-icon / 2;
|
||||
position: absolute;
|
||||
right: $m-medium;
|
||||
top: 50%;
|
||||
width: $size-form-input-icon;
|
||||
}
|
||||
|
||||
// input variations
|
||||
&-fullWidth {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* FORM COLLAPSED (items in row without gap between them)
|
||||
*
|
||||
* Markup:
|
||||
* -------
|
||||
*
|
||||
* <div class="formCollapsed">
|
||||
* <div class="input formCollapsed-item formCollapsed-itemPrimary">
|
||||
* <input id="name" placeholder="Klingon search" type="text" />
|
||||
* </div>
|
||||
* <div class="select formCollapsed-item">
|
||||
* <select name="country-code" id="country-code">
|
||||
* <option value="AO"> Angola</option>
|
||||
* </select>
|
||||
* </div>
|
||||
* <button class="formCollapsed-item button button-primary">
|
||||
* Search
|
||||
* </button>
|
||||
* </div>
|
||||
**/
|
||||
|
||||
.formCollapsed {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&-item {
|
||||
border-radius: 0 !important;
|
||||
margin: 0 !important;
|
||||
|
||||
|
||||
&:first-child {
|
||||
border-bottom-left-radius: $bdr-form !important;
|
||||
border-top-left-radius: $bdr-form !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: $bdr-form !important;
|
||||
border-top-right-radius: $bdr-form !important;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
&Primary {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
57
public/scss/components/_loading-bar.scss
Normal file
57
public/scss/components/_loading-bar.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
/**
|
||||
* LOADING BAR
|
||||
*
|
||||
* Markup:
|
||||
* ---------
|
||||
* <div class="loadingBar"></div>
|
||||
*
|
||||
*/
|
||||
|
||||
.loadingBar {
|
||||
height: $h-loading-bar;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: $z-loading-bar;
|
||||
|
||||
&::before {
|
||||
animation: loading 2s linear infinite;
|
||||
background-color: $c-primary;
|
||||
content: '';
|
||||
display: block;
|
||||
height: $h-loading-bar;
|
||||
left: -$w-loading-bar;
|
||||
position: absolute;
|
||||
width: $w-loading-bar;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
from {
|
||||
left: -$w-loading-bar;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
50% {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
70% {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
80% {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
95% {
|
||||
left: 120%;
|
||||
}
|
||||
|
||||
to {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
139
public/scss/components/_loading-spinner.scss
Normal file
139
public/scss/components/_loading-spinner.scss
Normal file
@@ -0,0 +1,139 @@
|
||||
/**
|
||||
* LOADING SPINNER
|
||||
*
|
||||
* Markup:
|
||||
* ---------
|
||||
* <div class='loadingSpinner'>
|
||||
* <span class='loadingSpinner-inner'></span>
|
||||
* <span class='loadingSpinner-inner'></span>
|
||||
* <span class='loadingSpinner-inner'></span>
|
||||
* <span class='loadingSpinner-inner'></span>
|
||||
* </div>
|
||||
*
|
||||
*/
|
||||
|
||||
.loadingSpinner {
|
||||
animation: rotateLoader 4s infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
display: block;
|
||||
height: $size-loading-spinner;
|
||||
left: 50%;
|
||||
margin-left: -$size-loading-spinner / 2;
|
||||
margin-top: -$size-loading-spinner / 2;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
width: $size-loading-spinner;
|
||||
z-index: $z-loading-spinner;
|
||||
|
||||
&-inner {
|
||||
animation-timing-function: ease-in-out;
|
||||
background-color: $bg-loading-spinner;
|
||||
border-radius: 100%;
|
||||
display: block;
|
||||
height: $size-loading-spinner-inner;
|
||||
position: absolute;
|
||||
width: $size-loading-spinner-inner;
|
||||
|
||||
&:nth-child(1) {
|
||||
animation: translateBall1 1s infinite;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translate3d($size-loading-spinner-inner / 2, $size-loading-spinner-inner / 2, 0);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
animation: translateBall2 1s infinite;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation: translateBall3 1s infinite;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
animation: translateBall4 1s infinite;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rotateLoader {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateBall1 {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate3d($size-loading-spinner-inner / 2, $size-loading-spinner-inner / 2, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes translateBall2 {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate3d(-$size-loading-spinner-inner / 2, $size-loading-spinner-inner / 2, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateBall3 {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate3d(-$size-loading-spinner-inner / 2, -$size-loading-spinner-inner / 2, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes translateBall4 {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate3d($size-loading-spinner-inner / 2, -$size-loading-spinner-inner / 2, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
31
public/scss/components/_notification.scss
Normal file
31
public/scss/components/_notification.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* NOTIFICATION
|
||||
*
|
||||
* Markup:
|
||||
* -------
|
||||
*
|
||||
* <div class="notification notification--sucess">Success notification</div>
|
||||
* <div class="notification notification--info">Success info</div>
|
||||
* <div class="notification notification--error">Success error</div>
|
||||
* <div class="notification notification--warning">Success warning</div>
|
||||
*
|
||||
*/
|
||||
|
||||
.notification {
|
||||
border-radius: $bdr-notification;
|
||||
color: $c-notification;
|
||||
margin-bottom: $mb-notification;
|
||||
padding: $p-notification;
|
||||
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@each $type, $color in $c-map {
|
||||
&--#{$type} {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
public/scss/components/_paginator.scss
Normal file
45
public/scss/components/_paginator.scss
Normal file
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* PAGINATOR
|
||||
*
|
||||
* Markup:
|
||||
* -------
|
||||
*
|
||||
* <ul class="paginator">
|
||||
* <li class="paginator-item">
|
||||
* <a href="#" class="paginator-itemLink">< Prev</a>
|
||||
* </li>
|
||||
* <li class="paginator-item">
|
||||
* <a href="#" class="paginator-itemLink">1</a>
|
||||
* </li>
|
||||
* <li class="paginator-item">
|
||||
* <a href="#" class="paginator-itemLink is-active">2</a>
|
||||
* </li>
|
||||
* <li class="paginator-item">
|
||||
* <a href="#" class="paginator-itemLink">3</a>
|
||||
* </li>
|
||||
* <li class="paginator-item">
|
||||
* <a href="#" class="paginator-itemLink">Next ></a>
|
||||
* </li>
|
||||
* </ul>
|
||||
*/
|
||||
|
||||
.paginator {
|
||||
|
||||
&-item {
|
||||
display: inline-block;
|
||||
margin-right: $mr-paginator-item;
|
||||
|
||||
&Link {
|
||||
background-color: $bg-paginator-item;
|
||||
border-radius: $bdr-paginator-item;
|
||||
display: block;
|
||||
padding: $p-paginator-item;
|
||||
|
||||
&.is-active {
|
||||
background-color: $bg-paginator-item-active;
|
||||
color: $c-paginator-item-active;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
123
public/scss/components/_table.scss
Normal file
123
public/scss/components/_table.scss
Normal file
@@ -0,0 +1,123 @@
|
||||
/**
|
||||
* TABLE
|
||||
*
|
||||
* Markup:
|
||||
* -------
|
||||
*
|
||||
* <table class="table">
|
||||
* <tr>
|
||||
* <th>First column</th>
|
||||
* <th>Second column</th>
|
||||
* <th>Third column</th>
|
||||
* </tr>
|
||||
* <tr>
|
||||
* <td="First column">Blue</td>
|
||||
* <td="Second column">One</td>
|
||||
* <td="Third column">My life fades</td>
|
||||
* </tr>
|
||||
* </table>
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
.table {
|
||||
background-color: $bgc-table;
|
||||
border: $bd-table;
|
||||
border-collapse: collapse;
|
||||
color: $c-table-text;
|
||||
max-width: $mwi-table;
|
||||
width: $w-table;
|
||||
|
||||
th,
|
||||
td {
|
||||
border-bottom: $bd-table;
|
||||
padding: $p-table-cell;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
thead {
|
||||
border-bottom: $bd-table;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: $bgc-table-header;
|
||||
color: $c-table-heading;
|
||||
font-size: $fz-table-heading;
|
||||
font-weight: $fw-table-heading;
|
||||
padding: $p-table-heading;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* TABLE RESPONSIVE
|
||||
*
|
||||
* Markup:
|
||||
* -------
|
||||
*
|
||||
* <table class="table table--responsive">
|
||||
* <tr>
|
||||
* <th>First column</th>
|
||||
* <th>Second column</th>
|
||||
* <th>Third column</th>
|
||||
* </tr>
|
||||
* <tr>
|
||||
* <td data-th="First column">Blue</td>
|
||||
* <td data-th="Second column">One</td>
|
||||
* <td data-th="Third column">My life fades</td>
|
||||
* </tr>
|
||||
* <tr>
|
||||
* <td data-th="First column">Green</td>
|
||||
* <td data-th="Second column">Two</td>
|
||||
* <td data-th="Third column">
|
||||
* when the world was powered by the black fuel... and the desert
|
||||
* sprouted great cities of pipe and steel.
|
||||
* </td>
|
||||
* </tr>
|
||||
* <tr>
|
||||
* <td data-th="First column">Yellow</td>
|
||||
* <td data-th="Second column">Three</td>
|
||||
* <td data-th="Third column">
|
||||
* A whirlwind of looting, a firestorm of fear.
|
||||
* </td>
|
||||
* </tr>
|
||||
* </table>
|
||||
*
|
||||
*/
|
||||
|
||||
.table--responsive {
|
||||
|
||||
th {
|
||||
display: none;
|
||||
}
|
||||
|
||||
td {
|
||||
@include media-breakpoint-down(sm) {
|
||||
border: 0;
|
||||
}
|
||||
display: block;
|
||||
|
||||
&::before {
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: none;
|
||||
}
|
||||
color: $c-table-heading;
|
||||
content: attr(data-th)': ';
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top: $bd-table;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
@include media-breakpoint-up(sm) {
|
||||
border-top: $bd-table;
|
||||
display: table-cell;
|
||||
}
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
37
public/scss/components/_tabs.scss
Normal file
37
public/scss/components/_tabs.scss
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* TABS
|
||||
*
|
||||
* Markup:
|
||||
* -------
|
||||
*
|
||||
* <div class="tabs">
|
||||
* <a href="#" title="#" class="tabs-item">[...]</a>
|
||||
* <a href="#" title="#" class="tabs-item is-selected">[...]</a>
|
||||
* </div>
|
||||
*
|
||||
*/
|
||||
|
||||
.tabs {
|
||||
border-bottom: $bdb-tabs;
|
||||
text-align: center;
|
||||
|
||||
&-item {
|
||||
border-bottom: $bdb-tabs-item;
|
||||
color: $c-tabs-item;
|
||||
display: inline-block;
|
||||
margin: $m-tabs-item;
|
||||
min-width: $miw-tabs-item;
|
||||
padding: $p-tabs-item;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
color: $c-tabs-item-hover;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.is-selected {
|
||||
border-bottom: $bdb-tabs-item-selected;
|
||||
color: $c-tabs-item-selected;
|
||||
}
|
||||
}
|
||||
}
|
||||
62
public/scss/components/_tag.scss
Normal file
62
public/scss/components/_tag.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
/**
|
||||
* TAG
|
||||
*
|
||||
* Markup:
|
||||
* -------
|
||||
*
|
||||
* <ul>
|
||||
* <li class="tag">Fantasy</li>
|
||||
* <li class="tag">Fiction</li>
|
||||
* <li class="tag">Contemporary</li>
|
||||
* </ul>
|
||||
*
|
||||
* <ul>
|
||||
* <li class="tag">
|
||||
* <a href="#">Fantasy</a>
|
||||
* </li>
|
||||
* <li class="tag">
|
||||
* <a href="#">Fiction</a>
|
||||
* </li>
|
||||
* <li class="tag">
|
||||
* <a href="#">Contemporary</a>
|
||||
* </li>
|
||||
* </ul>
|
||||
*
|
||||
*/
|
||||
|
||||
.tag {
|
||||
background-color: $bg-tag;
|
||||
border-radius: $bdr-tag;
|
||||
color: $c-tag;
|
||||
display: inline-block;
|
||||
line-height: $lh-tag;
|
||||
margin: $m-tag;
|
||||
padding: $p-tag;
|
||||
position: relative;
|
||||
|
||||
// triangle arrow
|
||||
&::before {
|
||||
border-bottom: ($lh-tag / 2) + $p-tag solid transparent;
|
||||
border-left: $p-tag solid $bg-tag;
|
||||
border-top: ($lh-tag / 2) + $p-tag solid transparent;
|
||||
content: '';
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: -$p-tag;
|
||||
top: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
// dot
|
||||
&::after {
|
||||
background: $bg-tag-dot;
|
||||
border-radius: 100%;
|
||||
content: '';
|
||||
height: $size-tag-dot;
|
||||
margin-top: -$size-tag-dot / 2;
|
||||
position: absolute;
|
||||
right: -$size-tag-dot / 2;
|
||||
top: 50%;
|
||||
width: $size-tag-dot;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user