refactoring
This commit is contained in:
Clément
0
src/styles/functions.scss
Normal file
0
src/styles/functions.scss
Normal file
264
src/styles/icons.scss
Normal file
264
src/styles/icons.scss
Normal file
@ -0,0 +1,264 @@
|
||||
@font-face {
|
||||
font-family: 'simple-line-icons';
|
||||
src: url('../fonts/simple-line-icons.eot?23594131');
|
||||
src: url('../fonts/simple-line-icons.eot?23594131#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('../fonts/simple-line-icons.woff2?23594131') format('woff2'),
|
||||
url('../fonts/simple-line-icons.woff?23594131') format('woff'),
|
||||
url('../fonts/simple-line-icons.ttf?23594131') format('truetype'),
|
||||
url('../fonts/simple-line-icons.svg?23594131#simple-line-icons')
|
||||
format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
|
||||
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
|
||||
/*
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
@font-face {
|
||||
font-family: 'simple-line-icons';
|
||||
src: url('../font/simple-line-icons.svg?23594131#simple-line-icons') format('svg');
|
||||
}
|
||||
}
|
||||
*/
|
||||
%icon,
|
||||
[class^='icon-']:before,
|
||||
[class*=' icon-']:before {
|
||||
font-family: 'simple-line-icons';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
margin-right: 0.2em;
|
||||
text-align: center;
|
||||
/* opacity: .8; */
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Animation center compensation - margins should be symmetric */
|
||||
/* remove if not needed */
|
||||
margin-left: 0.2em;
|
||||
|
||||
/* you can be more comfortable with increased icons size */
|
||||
/* font-size: 120%; */
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
/* Uncomment for 3D effect */
|
||||
// text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
|
||||
}
|
||||
|
||||
$icons: (
|
||||
user-female: '\e000',
|
||||
people: '\e001',
|
||||
user-follow: '\e002',
|
||||
user-following: '\e003',
|
||||
user-unfollow: '\e004',
|
||||
user: '\e005',
|
||||
trophy: '\e006',
|
||||
speedometer: '\e007',
|
||||
social-youtube: '\e008',
|
||||
social-twitter: '\e009',
|
||||
social-tumblr: '\e00a',
|
||||
social-facebook: '\e00b',
|
||||
social-dropbox: '\e00c',
|
||||
social-dribbble: '\e00d',
|
||||
shield: '\e00e',
|
||||
screen-tablet: '\e00f',
|
||||
screen-smartphone: '\e010',
|
||||
screen-desktop: '\e011',
|
||||
plane: '\e012',
|
||||
notebook: '\e013',
|
||||
mustache: '\e014',
|
||||
mouse: '\e015',
|
||||
magnet: '\e016',
|
||||
magic-wand: '\e017',
|
||||
hourglass: '\e018',
|
||||
graduation: '\e019',
|
||||
ghost: '\e01a',
|
||||
game-controller: '\e01b',
|
||||
fire: '\e01c',
|
||||
eyeglass: '\e01d',
|
||||
envelope-open: '\e01e',
|
||||
envolope-letter: '\e01f',
|
||||
energy: '\e020',
|
||||
emotsmile: '\e021',
|
||||
disc: '\e022',
|
||||
cursor-move: '\e023',
|
||||
crop: '\e024',
|
||||
credit-card: '\e025',
|
||||
chemistry: '\e026',
|
||||
bell: '\e027',
|
||||
badge: '\e028',
|
||||
anchor: '\e029',
|
||||
wallet: '\e02a',
|
||||
vector: '\e02b',
|
||||
speech: '\e02c',
|
||||
puzzle: '\e02d',
|
||||
printer: '\e02e',
|
||||
present: '\e02f',
|
||||
playlist: '\e030',
|
||||
pin: '\e031',
|
||||
picture: '\e032',
|
||||
map: '\e033',
|
||||
layers: '\e034',
|
||||
handbag: '\e035',
|
||||
globe-alt: '\e036',
|
||||
globe: '\e037',
|
||||
frame: '\e038',
|
||||
folder-alt: '\e039',
|
||||
film: '\e03a',
|
||||
feed: '\e03b',
|
||||
earphones-alt: '\e03c',
|
||||
earphones: '\e03d',
|
||||
drop: '\e03e',
|
||||
drawar: '\e03f',
|
||||
docs: '\e040',
|
||||
directions: '\e041',
|
||||
direction: '\e042',
|
||||
diamond: '\e043',
|
||||
cup: '\e044',
|
||||
compass: '\e045',
|
||||
call-out: '\e046',
|
||||
call-in: '\e047',
|
||||
call-end: '\e048',
|
||||
calculator: '\e049',
|
||||
bubbles: '\e04a',
|
||||
briefcase: '\e04b',
|
||||
book-open: '\e04c',
|
||||
basket-loaded: '\e04d',
|
||||
basket: '\e04e',
|
||||
bag: '\e04f',
|
||||
action-undo: '\e050',
|
||||
action-redo: '\e051',
|
||||
wrench: '\e052',
|
||||
umbrella: '\e053',
|
||||
trash: '\e054',
|
||||
tag: '\e055',
|
||||
support: '\e056',
|
||||
size-fullscreen: '\e057',
|
||||
size-actual: '\e058',
|
||||
shuffle: '\e059',
|
||||
share-alt: '\e05a',
|
||||
share: '\e05b',
|
||||
rocket: '\e05c',
|
||||
question: '\e05d',
|
||||
pie-chart: '\e05e',
|
||||
pencil: '\e05f',
|
||||
note: '\e060',
|
||||
music-tone-alt: '\e061',
|
||||
music-tone: '\e062',
|
||||
microphone: '\e063',
|
||||
loop: '\e064',
|
||||
logout: '\e065',
|
||||
login: '\e066',
|
||||
list: '\e067',
|
||||
like: '\e068',
|
||||
home: '\e069',
|
||||
grid: '\e06a',
|
||||
graph: '\e06b',
|
||||
equalizer: '\e06c',
|
||||
dislike: '\e06d',
|
||||
cursor: '\e06e',
|
||||
control-start: '\e06f',
|
||||
control-rewind: '\e070',
|
||||
control-play: '\e071',
|
||||
control-pause: '\e072',
|
||||
control-forward: '\e073',
|
||||
control-end: '\e074',
|
||||
calender: '\e075',
|
||||
bulb: '\e076',
|
||||
chart: '\e077',
|
||||
arrow-up-circle: '\e078',
|
||||
arrow-right-circle: '\e079',
|
||||
arrow-left-circle: '\e07a',
|
||||
arrow-down-circle: '\e07b',
|
||||
ban: '\e07c',
|
||||
bubble: '\e07d',
|
||||
camrecorder: '\e07e',
|
||||
camera: '\e07f',
|
||||
check: '\e080',
|
||||
clock: '\e081',
|
||||
close: '\e082',
|
||||
cloud-download: '\e083',
|
||||
cloud-upload: '\e084',
|
||||
doc: '\e085',
|
||||
envolope: '\e086',
|
||||
eye: '\e087',
|
||||
flag: '\e088',
|
||||
folder: '\e089',
|
||||
heart: '\e08a',
|
||||
info: '\e08b',
|
||||
key: '\e08c',
|
||||
link: '\e08d',
|
||||
lock: '\e08e',
|
||||
lock-open: '\e08f',
|
||||
magnifier: '\e090',
|
||||
magnifier-add: '\e091',
|
||||
magnifier-remove: '\e092',
|
||||
paper-clip: '\e093',
|
||||
paper-plane: '\e094',
|
||||
plus: '\e095',
|
||||
location-pin: '\e096',
|
||||
power: '\e097',
|
||||
refresh: '\e098',
|
||||
reload: '\e099',
|
||||
settings: '\e09a',
|
||||
star: '\e09b',
|
||||
symble-female: '\e09c',
|
||||
symbol-male: '\e09d',
|
||||
target: '\e09e',
|
||||
volume-1: '\e09f',
|
||||
volume-2: '\e0a0',
|
||||
volume-off: '\e0a1',
|
||||
phone: '\e600',
|
||||
menu: '\e601',
|
||||
options-vertical: '\e602',
|
||||
options: '\e603',
|
||||
arrow-down: '\e604',
|
||||
arrow-left: '\e605',
|
||||
arrow-right: '\e606',
|
||||
arrow-up: '\e607',
|
||||
paypal: '\e608',
|
||||
social-instagram: '\e609',
|
||||
social-linkedin: '\e60a',
|
||||
social-pintarest: '\e60b',
|
||||
social-github: '\e60c',
|
||||
social-google: '\e60d',
|
||||
social-reddit: '\e60e',
|
||||
social-skype: '\e60f',
|
||||
social-behance: '\e610',
|
||||
social-foursqare: '\e611',
|
||||
social-soundcloud: '\e612',
|
||||
social-spotify: '\e613',
|
||||
social-stumbleupon: '\e614',
|
||||
minus: '\e615',
|
||||
organization: '\e616',
|
||||
exclamation: '\e617',
|
||||
social-vkontakte: '\e618',
|
||||
event: '\e619',
|
||||
social-steam: '\e620',
|
||||
);
|
||||
|
||||
|
||||
@each $name, $code in $icons {
|
||||
.icon-#{$name} {
|
||||
&:before {
|
||||
content: $code;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin icon($code) {
|
||||
@extend %icon;
|
||||
@extend .icon-#{$code};
|
||||
}
|
||||
10
src/styles/index.scss
Normal file
10
src/styles/index.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@charset "UTF-8";
|
||||
@import
|
||||
'icons',
|
||||
'variables',
|
||||
'functions',
|
||||
'mixins',
|
||||
'main';
|
||||
|
||||
@import 'menu'
|
||||
|
||||
41
src/styles/main.scss
Normal file
41
src/styles/main.scss
Normal file
@ -0,0 +1,41 @@
|
||||
@import 'variables';
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: Open Sans, sans-serif;
|
||||
font-size: 13px;
|
||||
background-color: $color-grey-light;
|
||||
}
|
||||
|
||||
#header {
|
||||
background-color: $color-white;
|
||||
position: relative;
|
||||
@include border-shadow(bottom);
|
||||
border: solid $color-white;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
margin: 1.4em;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#subContainer {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
#mainContainer {
|
||||
flex: 1 1 0px;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
color: $color-black;
|
||||
}
|
||||
133
src/styles/menu.scss
Normal file
133
src/styles/menu.scss
Normal file
@ -0,0 +1,133 @@
|
||||
// #navbar{}
|
||||
// #navbar-router{}
|
||||
|
||||
.btn-toggle {
|
||||
@include icon('menu');
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $color-white;
|
||||
color: $color-black;
|
||||
font-size: 2em;
|
||||
padding: 0.72em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
background-color: $color-white;
|
||||
color: $color-grey;
|
||||
max-width: 16rem;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
&.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
@include border-shadow(right);
|
||||
}
|
||||
|
||||
@media (max-width: 32rem) {
|
||||
.btn-toggle {
|
||||
display: block;
|
||||
}
|
||||
#navbar {
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.5s ease;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
#header {
|
||||
padding-left: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#menu-items {
|
||||
> * {
|
||||
display: block;
|
||||
border-top: 1px solid $color-grey;
|
||||
&:last-child {
|
||||
border-bottom: 1px solid $color-grey;
|
||||
}
|
||||
sib-route {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
cursor: pointer;
|
||||
&[active] {
|
||||
color: $color-black;
|
||||
> div:before {
|
||||
background-color: $color-yellow-light;
|
||||
transform: perspective(1000px) translateZ(1px) scale(0.8);
|
||||
}
|
||||
}
|
||||
> div {
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
&:before {
|
||||
display: block;
|
||||
margin: -0.5em auto 0;
|
||||
font-size: 2em;
|
||||
border-radius: 100%;
|
||||
padding: 0.7em;
|
||||
transform: perspective(1000px) translateZ(1px) scale(1);
|
||||
will-change: transform;
|
||||
transition:
|
||||
all .3s ease,
|
||||
transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
|
||||
}
|
||||
width: max-content;
|
||||
padding: 2em;
|
||||
}
|
||||
&[id-prefix] {
|
||||
display: none;
|
||||
}
|
||||
> sib-display {
|
||||
display: block;
|
||||
font-size: 0.9em;
|
||||
color: #aaa;
|
||||
> div {
|
||||
margin-bottom: 1.5em;
|
||||
> sib-display {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
padding: 0.5em 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* sub menu (right menu) */
|
||||
|
||||
#mainContainer > div {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: flex-start;
|
||||
> sib-router {
|
||||
display: block;
|
||||
background-color: #ccc;
|
||||
sib-route {
|
||||
display: block;
|
||||
> div {
|
||||
position: relative;
|
||||
padding: 1em 2em;
|
||||
border-bottom: 1px solid #888;
|
||||
}
|
||||
&[active] {
|
||||
font-weight: bold;
|
||||
> div:before {
|
||||
content: '<';
|
||||
position: absolute;
|
||||
transform: translateX(-150%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> div {
|
||||
margin: 0.5em;
|
||||
flex: 1 1 0px;
|
||||
}
|
||||
}
|
||||
149
src/styles/mixins.scss
Normal file
149
src/styles/mixins.scss
Normal file
@ -0,0 +1,149 @@
|
||||
@charset "UTF-8";
|
||||
@mixin debug {
|
||||
$hsla: hsla(random(360), 100%, 50%, 0.3);
|
||||
background-color: $hsla;
|
||||
}
|
||||
@mixin log($v) {
|
||||
font-family: '__log__:#{$v}';
|
||||
}
|
||||
|
||||
@mixin offset($corner: 1, $x: 0, $y: 0) {
|
||||
// corner:
|
||||
// 1-----2
|
||||
// | |
|
||||
// | |
|
||||
// 3-----4
|
||||
position: absolute;
|
||||
@if ($corner == 1) {
|
||||
top: $y;
|
||||
left: $x;
|
||||
}
|
||||
@if ($corner == 2) {
|
||||
top: $y;
|
||||
right: $x;
|
||||
}
|
||||
@if ($corner == 3) {
|
||||
bottom: $y;
|
||||
left: $x;
|
||||
}
|
||||
@if ($corner == 4) {
|
||||
bottom: $y;
|
||||
right: $x;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin position($top: 0, $right: null, $bottom: null, $left: null) {
|
||||
// --1--
|
||||
// | |
|
||||
// 4 2
|
||||
// | |
|
||||
// --3--
|
||||
@if ($right == null) {
|
||||
$right: $top;
|
||||
}
|
||||
|
||||
@if ($bottom == null) {
|
||||
$bottom: $top;
|
||||
}
|
||||
|
||||
@if ($left == null) {
|
||||
$left: $right;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
top: $top;
|
||||
left: $left;
|
||||
right: $right;
|
||||
bottom: $bottom;
|
||||
}
|
||||
|
||||
@mixin pos($pos: 5, $position: absolute) {
|
||||
// ╔═──┐ ╔═══╗ ┌──═╗
|
||||
// │ 1 │ │ 2 │ │ 3 │
|
||||
// └───┘ └───┘ └───┘
|
||||
// ╔═──┐ ╔═══╗ ┌──═╗
|
||||
// ║ 4 │ ║ 5 ║ │ 6 ║
|
||||
// ╚═──┘ ╚═══╝ └──═╝
|
||||
// ┌───┐ ┌───┐ ┌───┐
|
||||
// │ 7 │ │ 8 │ │ 9 │
|
||||
// ╚═──┘ ╚═══╝ └──═╝
|
||||
|
||||
$mod: ($pos - 1) % 3;
|
||||
|
||||
position: $position;
|
||||
@if ($pos <= 6) {
|
||||
top: 0;
|
||||
}
|
||||
@if ($mod <= 1) {
|
||||
left: 0;
|
||||
}
|
||||
@if ($mod >= 1) {
|
||||
right: 0;
|
||||
}
|
||||
@if ($pos >= 4) {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-shadow($border: top, $size: 4px, $opacity: 0.05, $color: black) {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: if(($border == bottom), auto, 0);
|
||||
left: if(($border == right), auto, 0);
|
||||
right: if(($border == left), auto, 0);
|
||||
bottom: if(($border == top), auto, 0);
|
||||
background-image: linear-gradient(to #{$border}, $color, transparent);
|
||||
#{$border}: -$size;
|
||||
opacity: $opacity;
|
||||
@if($border == top or $border == bottom) {
|
||||
height: $size;
|
||||
}@else{
|
||||
width: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin align($horizontal: center, $vertical: middle) {
|
||||
text-align: $horizontal;
|
||||
white-space: nowrap;
|
||||
&:after,
|
||||
> * {
|
||||
display: inline-block;
|
||||
vertical-align: $vertical;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
height: 100%;
|
||||
width: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
> * {
|
||||
//text-align:left;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin list-reset($deep: 0) {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: block;
|
||||
list-style: none;
|
||||
@if ($deep == 0) {
|
||||
> li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: block;
|
||||
list-style: none;
|
||||
}
|
||||
} @else {
|
||||
ul,
|
||||
ol,
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: block;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
17
src/styles/variables.scss
Normal file
17
src/styles/variables.scss
Normal file
@ -0,0 +1,17 @@
|
||||
$color-white: #fff;
|
||||
$color-black: #36383B;
|
||||
$color-grey: #898F95;
|
||||
$color-grey-light: #F0F3F6;
|
||||
|
||||
$color-yellow: #FFB700;
|
||||
$color-yellow-light: #FFD759;
|
||||
|
||||
%button{
|
||||
border-radius: 100em
|
||||
}
|
||||
|
||||
%button-yellow{
|
||||
@extend %button;
|
||||
background-color: $color-yellow;
|
||||
color: $color-white;
|
||||
}
|
||||
Reference in New Issue
Block a user