Skip to content
This repository has been archived by the owner on Jun 24, 2022. It is now read-only.

SCSS version added #21

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
71 changes: 71 additions & 0 deletions sass/_accordion.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/* =Accordion
-----------------------------------------------------------------------------*/
.accordion-title {
position: relative;
display: block;
margin: 0;
margin-bottom: 2px;
padding: 12px 50px 12px 18px;
color: #000;
text-decoration: none;
font-weight: normal;
font-size: $font-size-base;
line-height: 1,4em;
background: $color-gray-pastel;
cursor: pointer;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

&.accordion-title-opened {
margin-bottom: 0;
font-weight: bold;
background: $color-gray-light;
}
& a,
&:hover {
color: #000;
text-decoration: none;
}
}
.accordion-panel {
padding: $base-line;
margin-bottom: 10px;
}
.accordion-toggle {
position: absolute;
top: 50%;
margin-top: -8px;
right: 20px;
padding: 0;
font-size: 0;
line-height: 1;
}
.accordion-toggle-closed {
background: #000;
width: 1px;
height: 15px;
margin-left: 1px;
&:before {
position: absolute;
top: 7px;
left: -7px;
content: "";
width: 15px;
height: 1px;
background: #000;
}
}
.accordion-toggle-opened:before {
position: absolute;
top: 7px;
left: -8px;
content: "";
width: 15px;
height: 1px;
background: #000;
}
28 changes: 28 additions & 0 deletions sass/_autocomplete.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/* =Autocomplete
-----------------------------------------------------------------------------*/
.autocomplete {
position: absolute;
z-index: 1000;
left: 0;
display: none;
margin: 0;
list-style: none;
background: #fff;
width: 250px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
max-height: 250px;
overflow: auto;
& a {
padding: 4px 10px;
color: #000;
display: block;
text-decoration: none;
&:hover {
background: $color-gray-light;
}
&.active {
background: $color-blue;
color: #fff;
}
}
}
42 changes: 42 additions & 0 deletions sass/_blocks-responsive.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/* =Blocks Responsive
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {

.blocks-2,
.blocks-3,
.blocks-4,
.blocks-5,
.blocks-6 {
margin-left: 0;
margin-bottom: $base-line;
}

.blocks-2 > li,
.blocks-3 > li,
.blocks-4 > li,
.blocks-5 > li,
.blocks-6 > li {
float: none;
margin-left: 0;
width: 100%;
}

.blocks-mobile-50 > li,
.blocks-mobile-33 > li {
float: left;
margin-left: $grid-gutter-width/($grid-width/100)*1%;
}
.blocks-mobile-33,
.blocks-mobile-50 {
margin-left: -$grid-gutter-width/($grid-width/100)*1%;
}

.blocks-mobile-50 > li {
@include block(2);
}
.blocks-mobile-33 > li {
@include block(3);
}


}
39 changes: 39 additions & 0 deletions sass/_blocks.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/* =Blocks
-----------------------------------------------------------------------------*/
.blocks-2,
.blocks-3,
.blocks-4,
.blocks-5,
.blocks-6 {
padding-left: 0;
list-style: none;
margin-left: -$grid-gutter-width / ($grid-width / 100) * 1%;
@include clearfix;
& > li {
height: auto;
float: left;
margin-bottom: $base-line;
margin-left: $grid-gutter-width / ($grid-width / 100) * 1%;
& ul {
list-style-type: disc;
}
& ul ul {
list-style-type: circle;
}
& li {
float: none;
margin: 0;
}
}

}

.blocks-2 > li { @include block(2); }
.blocks-3 > li { @include block(3); }
.blocks-4 > li { @include block(4); }
.blocks-5 > li { @include block(5); }
.blocks-6 > li { @include block(6); }

.block-first {
clear: both;
}
173 changes: 173 additions & 0 deletions sass/_buttons.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
/* =Buttons
-----------------------------------------------------------------------------*/
.btn,
input[type="submit"].btn {
display: inline-block;
vertical-align: top;

font-family: $font-family-controls;
font-size: 1em;
font-weight: 400;

line-height: $base-line;

text-align: center;
text-decoration: none;
color: $color-body;

-webkit-appearance: none;

outline: none;
margin: 0;
border: none;
border-radius: 2px;
box-shadow: none;
cursor: pointer;
background: $color-gray;
padding: $padding-btn;

&:hover {
color: rgba(0, 0, 0, .5);
background: $color-gray-dark;
}
}
.btn::-moz-focus-inner {
border: 0;
padding: 0;
}
.btn-big,
input[type="submit"].btn-big {
font-size: $font-size-big;
}
.btn-small,
input[type="submit"].btn-small {
font-size: $font-size-small;
}
.btn-smaller,
input[type="submit"].btn-smaller {
font-size: $font-size-smaller;
vertical-align: baseline;
}
.btn-round {
border-radius: 15px;
}
.btn-outline,
input[type="submit"].btn-outline {
background: none;
padding: $padding-btn-outline;
border: 1px solid $color-black;
&:hover {
border-color: $color-gray-dark;
}
}
.btn-outline.btn-active {
padding: $padding-btn;
}
.btn-outline.bold {
border-width: 2px;
padding: $padding-btn-outline-bold;
}
.btn-active,
.btn[disabled],
.btn-disabled {
background: none;
background: $color-gray-dark;
color: rgba(0, 0, 0, .5);
&:hover {
color: rgba(0, 0, 0, .5);
background: $color-gray-dark;
}
}
.btn-active {
box-shadow: 0 1px 3px rgba(0, 0, 0, .4) inset;
}
.btn-outline.btn[disabled],
.btn-outline.btn-disabled {
background: none;
box-shadow: none;
color: rgba(0, 0, 0, .3);
border: 1px solid rgba(0, 0, 0, .1);
}
.btn-outline.btn-active {
background: none;
color: rgba(0, 0, 0, .4);
border: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2) inset;
}
.btn[disabled],
.btn-disabled {
cursor: default;
box-shadow: none;
}


.btn-blue,
input[type="submit"].btn-blue {
@include make-color-btn($color-blue, $color-blue-dark, #fff);
}
.btn-red,
input[type="submit"].btn-red {
@include make-color-btn($color-red, $color-red-dark, #fff);
}
.btn-green,
input[type="submit"].btn-green {
@include make-color-btn($color-green, $color-green-dark, #fff);
}
.btn-black,
input[type="submit"].btn-black {
@include make-color-btn($color-black, $color-black-light, #fff, .7);
}
.btn-yellow,
input[type="submit"].btn-yellow {
@include make-color-btn($color-yellow, $color-yellow-dark, #000);
}
.btn-white,
input[type="submit"].btn-white {
@include make-color-btn($color-white, darken(#fff, 7%), #000, .2);
}

.btn-white {
&.btn-outline.btn-active {
box-shadow: none;
border: 1px solid rgba(255, 255, 255, .3);
padding: $padding-btn-outline;
}
}


/*
Buttons Group
*/
.btn-single,
.btn-group {
display: inline-block;
margin-right: 2px;
@include clearfix;
vertical-align: bottom;
}
.btn-single > .btn,
.btn-single > input,
.btn-group > .btn,
.btn-group > input {
float: left;
border-radius: 0;
margin-left: -1px;
}
.btn-single > .btn {
border-radius: 2px;
}
.btn-group > .btn:first-child {
border-radius: 2px 0 0 2px;
}
.btn-group > .btn:last-child {
border-radius: 0 2px 2px 0;
}
.btn-group > .btn.btn-round:first-child,
.btn-group > .input-search:first-child {
border-radius: 15px 0 0 15px;
}
.btn-group > .btn.btn-round:last-child,
.btn-group > .input-search:last-child {
border-radius: 0 15px 15px 0;
}

Loading