convert c3nav.css to c3nav.scss
This commit is contained in:
Laura Klünder
parent
4f22dbc2e9
commit
ecbb3dce27
2 changed files with 28 additions and 22 deletions
|
|
@ -1,3 +1,10 @@
|
||||||
|
@import 'milligram/milligram.sass';
|
||||||
|
|
||||||
|
$color-icon: #7c848a;
|
||||||
|
$color-icon-light: #b2b2b2;
|
||||||
|
$color-placeholder: #9da2a6;
|
||||||
|
$color-sidebar-border: #dddddd;
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -30,7 +37,7 @@ header #user {
|
||||||
header #user small {
|
header #user small {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: -3px;
|
margin-top: -3px;
|
||||||
color: #606c76;
|
color: $color-secondary;
|
||||||
}
|
}
|
||||||
header #user small:empty {
|
header #user small:empty {
|
||||||
display:none;
|
display:none;
|
||||||
|
|
@ -41,10 +48,10 @@ input {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
::-webkit-input-placeholder {
|
::-webkit-input-placeholder {
|
||||||
color: #9DA2A6;
|
color: $color-placeholder;
|
||||||
}
|
}
|
||||||
::-moz-placeholder {
|
::-moz-placeholder {
|
||||||
color: #9DA2A6;
|
color: $color-placeholder;
|
||||||
}
|
}
|
||||||
.material-icons {
|
.material-icons {
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
|
|
@ -123,7 +130,7 @@ main.account form {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
#sidebar section > div {
|
#sidebar section > div {
|
||||||
border: 0 #dddddd solid;
|
border: 0 $color-sidebar-border solid;
|
||||||
border-top-width: 1px;
|
border-top-width: 1px;
|
||||||
transition: margin-bottom 150ms, opacity 150ms;
|
transition: margin-bottom 150ms, opacity 150ms;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
@ -162,7 +169,7 @@ main.account form {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
color: #606c76;
|
color: $color-secondary;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
opacity: 0.4;
|
opacity: 0.4;
|
||||||
|
|
@ -353,7 +360,7 @@ main.show-options #resultswrapper #route-options {
|
||||||
#route-options .details-head button {
|
#route-options .details-head button {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
line-height: 1.0;
|
line-height: 1.0;
|
||||||
color: #b2b2b2;
|
color: $color-icon-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
.location {
|
.location {
|
||||||
|
|
@ -367,7 +374,7 @@ main.show-options #resultswrapper #route-options {
|
||||||
top: 9px;
|
top: 9px;
|
||||||
left: 9px;
|
left: 9px;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
color: #7C848A;
|
color: $color-icon;
|
||||||
transition: color 150ms, transform 150ms, top 150ms;
|
transition: color 150ms, transform 150ms, top 150ms;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
@ -379,7 +386,7 @@ main.show-options #resultswrapper #route-options {
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
}
|
}
|
||||||
.location.focus {
|
.location.focus {
|
||||||
background-color: #f4f4f4;
|
background-color: $color-tertiary;
|
||||||
}
|
}
|
||||||
#autocomplete .location {
|
#autocomplete .location {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -421,7 +428,7 @@ main.show-options #resultswrapper #route-options {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 1px;
|
left: 1px;
|
||||||
content: "search";
|
content: "search";
|
||||||
color: #b2b2b2;
|
color: $color-icon-light;
|
||||||
transition: color 150ms;
|
transition: color 150ms;
|
||||||
}
|
}
|
||||||
.locationinput.selected .icon::before {
|
.locationinput.selected .icon::before {
|
||||||
|
|
@ -440,10 +447,10 @@ main.show-options #resultswrapper #route-options {
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
transition: transform 150ms, opacity 150ms, top 150ms, right 150ms;
|
transition: transform 150ms, opacity 150ms, top 150ms, right 150ms;
|
||||||
font-size: 42px;
|
font-size: 42px;
|
||||||
color: #b2b2b2;
|
color: $color-icon-light;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
#search button:hover {
|
#search .locationinput button:hover {
|
||||||
color: #a2a2a2;
|
color: #a2a2a2;
|
||||||
}
|
}
|
||||||
#search button.locate {
|
#search button.locate {
|
||||||
|
|
@ -462,7 +469,7 @@ main.show-options #resultswrapper #route-options {
|
||||||
left: 25px;
|
left: 25px;
|
||||||
text-shadow: 2px 0 1px #fff, -2px 0 1px #fff;
|
text-shadow: 2px 0 1px #fff, -2px 0 1px #fff;
|
||||||
transition: top 150ms, opacity 150ms, color 150ms, transform 150ms;
|
transition: top 150ms, opacity 150ms, color 150ms, transform 150ms;
|
||||||
color: #7C848A;
|
color: $color-icon;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
main:not([data-view^=route]) #route-dots {
|
main:not([data-view^=route]) #route-dots {
|
||||||
|
|
@ -471,11 +478,11 @@ main:not([data-view^=route]) #route-dots {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
main:not([data-view=route-result]) #route-dots {
|
main:not([data-view=route-result]) #route-dots {
|
||||||
color: #b2b2b2;
|
color: $color-icon-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
#route-details .details-body > div:not(:last-child) {
|
#route-details .details-body > div:not(:last-child) {
|
||||||
border: 0 #dddddd solid;
|
border: 0 $color-sidebar-border solid;
|
||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
}
|
}
|
||||||
.routeitem {
|
.routeitem {
|
||||||
|
|
@ -491,7 +498,7 @@ main:not([data-view=route-result]) #route-dots {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.routeitem .icon .material-icons {
|
.routeitem .icon .material-icons {
|
||||||
color: #7C848A;
|
color: $color-icon;
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
}
|
}
|
||||||
.routeitem .icon img {
|
.routeitem .icon img {
|
||||||
|
|
@ -504,7 +511,7 @@ main:not([data-view=route-result]) #route-dots {
|
||||||
}
|
}
|
||||||
.location-popup .leaflet-popup-content {
|
.location-popup .leaflet-popup-content {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #606c76;
|
color: $color-secondary;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
@ -535,7 +542,7 @@ main:not([data-view=route-result]) #route-dots {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: 0 #dddddd solid;
|
border: 0 $color-sidebar-border solid;
|
||||||
border-left-width: 1px;
|
border-left-width: 1px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -572,7 +579,7 @@ button .material-icons, .button .material-icons {
|
||||||
top: 10px;
|
top: 10px;
|
||||||
left: 9px;
|
left: 9px;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
color: #7C848A;
|
color: $color-icon;
|
||||||
}
|
}
|
||||||
#route-summary small {
|
#route-summary small {
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
|
|
@ -599,7 +606,7 @@ main:not([data-view=route-result]) #route-summary {
|
||||||
height: 37px;
|
height: 37px;
|
||||||
border-width: 0;
|
border-width: 0;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
color: #b2b2b2;
|
color: $color-icon-light;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -696,7 +703,7 @@ main:not([data-view=route-result]) #route-summary {
|
||||||
right: 8px;
|
right: 8px;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: #b2b2b2;
|
color: $color-icon-light;
|
||||||
}
|
}
|
||||||
#close-modal:hover {
|
#close-modal:hover {
|
||||||
color: #a2a2a2;
|
color: #a2a2a2;
|
||||||
|
|
@ -10,10 +10,9 @@
|
||||||
{% compress css %}
|
{% compress css %}
|
||||||
<link href="{% static 'fonts/fonts.css' %}" rel="stylesheet">
|
<link href="{% static 'fonts/fonts.css' %}" rel="stylesheet">
|
||||||
<link href="{% static 'normalize/normalize.css' %}" rel="stylesheet">
|
<link href="{% static 'normalize/normalize.css' %}" rel="stylesheet">
|
||||||
<link href="{% static 'milligram/milligram.sass' %}" rel="stylesheet" type="text/x-scss">
|
|
||||||
<link href="{% static 'leaflet/leaflet.css' %}" rel="stylesheet">
|
<link href="{% static 'leaflet/leaflet.css' %}" rel="stylesheet">
|
||||||
<link href="{% static 'material-icons/material-icons.css' %}" rel="stylesheet">
|
<link href="{% static 'material-icons/material-icons.css' %}" rel="stylesheet">
|
||||||
<link href="{% static 'site/css/c3nav.css' %}" rel="stylesheet">
|
<link href="{% static 'site/css/c3nav.scss' %}" rel="stylesheet" type="text/x-scss">
|
||||||
{% endcompress %}
|
{% endcompress %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue