Menu
This commit is contained in:
Ruud
@@ -9,6 +9,12 @@ var BlockSearch = new Class({
|
||||
|
||||
var focus_timer = 0;
|
||||
self.el = new Element('div.search_form').adopt(
|
||||
new Element('a.icon-search', {
|
||||
'events': {
|
||||
'click': self.clear.bind(self),
|
||||
'touchend': self.clear.bind(self)
|
||||
}
|
||||
}),
|
||||
new Element('div.input').adopt(
|
||||
self.input = new Element('input', {
|
||||
'placeholder': 'Search & add a new media',
|
||||
@@ -29,12 +35,6 @@ var BlockSearch = new Class({
|
||||
}).delay(100);
|
||||
}
|
||||
}
|
||||
}),
|
||||
new Element('a.icon2', {
|
||||
'events': {
|
||||
'click': self.clear.bind(self),
|
||||
'touchend': self.clear.bind(self)
|
||||
}
|
||||
})
|
||||
),
|
||||
self.result_container = new Element('div.results_container', {
|
||||
|
||||
@@ -1,101 +1,78 @@
|
||||
@import "couchpotato/static/style/mixins";
|
||||
|
||||
.search_form {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
transition: all .4s cubic-bezier(0.9,0,0.1,1);
|
||||
z-index: 20;
|
||||
border: 0 solid transparent;
|
||||
border-bottom-width: 4px;
|
||||
}
|
||||
.search_form:hover {
|
||||
border-color: #047792;
|
||||
}
|
||||
z-index: 200;
|
||||
width: 44px;
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
.search_form {
|
||||
right: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.search_form.focused,
|
||||
.search_form.shown {
|
||||
border-color: #04bce6;
|
||||
}
|
||||
|
||||
.search_form .input {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
width: 45px;
|
||||
transition: all .4s cubic-bezier(0.9,0,0.1,1);
|
||||
}
|
||||
|
||||
.search_form.focused .input,
|
||||
.search_form.shown .input {
|
||||
width: 380px;
|
||||
background: #4e5969;
|
||||
}
|
||||
|
||||
.search_form .input input {
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
border: 0;
|
||||
background: none;
|
||||
color: #FFF;
|
||||
font-size: 25px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
padding: 0 40px 0 10px;
|
||||
transition: all .4s ease-in-out .2s;
|
||||
}
|
||||
.search_form.focused .input input,
|
||||
.search_form.shown .input input {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.search_form input::-ms-clear {
|
||||
width : 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
.search_form .input input {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.search_form.focused .input,
|
||||
.search_form.shown .input {
|
||||
width: 277px;
|
||||
}
|
||||
}
|
||||
|
||||
.search_form .input a {
|
||||
a {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 44px;
|
||||
z-index: 2;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
line-height: 66px;
|
||||
font-size: 15px;
|
||||
color: #FFF;
|
||||
font-size: 20px;
|
||||
|
||||
@include translateY(-50%);
|
||||
|
||||
}
|
||||
|
||||
.search_form .input a:after {
|
||||
content: "\e03e";
|
||||
.input {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
&:before {
|
||||
@include transform(rotate(45deg) translateY(-60%));
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background: $background_color;
|
||||
left: 33px;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.search_form.shown.filled .input a:after {
|
||||
content: "\e04e";
|
||||
}
|
||||
input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 44px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
box-shadow: 0 0 4px rgba(0,0,0,.1);
|
||||
|
||||
@media all and (max-width: 480px) {
|
||||
.search_form .input a {
|
||||
line-height: 44px;
|
||||
&::-ms-clear {
|
||||
width : 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.focused,
|
||||
&.shown {
|
||||
border-color: #04bce6;
|
||||
|
||||
.input {
|
||||
width: 380px;
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.search_form .results_container {
|
||||
text-align: left;
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
.page.movies_wanted, .page.movies_manage {
|
||||
top: $header-height;
|
||||
top: $header_height;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
.movie {
|
||||
display: block;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
border-top: 1px solid $theme_off;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -146,14 +146,14 @@
|
||||
|
||||
.page.movie_details {
|
||||
|
||||
$gab-width: $header-width/3;
|
||||
$gab-width: $header_width/3;
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: $header-width;
|
||||
left: $header_width;
|
||||
background: rgba(0,0,0,.6);
|
||||
border-radius: 3px 0 0 3px;
|
||||
|
||||
@@ -161,7 +161,7 @@
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 60px;
|
||||
line-height: $header-height;
|
||||
line-height: $header_height;
|
||||
color: #FFF;
|
||||
width: $gab-width;
|
||||
cursor: pointer;
|
||||
@@ -174,7 +174,7 @@
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: $header-width + $gab-width;
|
||||
left: $header_width + $gab-width;
|
||||
background: $background_color;
|
||||
z-index: 200;
|
||||
border-radius: 3px 0 0 3px;
|
||||
@@ -183,7 +183,7 @@
|
||||
margin: 0;
|
||||
padding: 0 $padding;
|
||||
font-size: 24px;
|
||||
line-height: $header-height;
|
||||
line-height: $header_height;
|
||||
color: rgba(0,0,0,.5);
|
||||
font-weight: 300;
|
||||
}
|
||||
@@ -207,10 +207,8 @@
|
||||
|
||||
.button {
|
||||
padding: 0 $padding/2;
|
||||
line-height: $header-height;
|
||||
font-size: 24px;
|
||||
line-height: $header_height;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.counter, .more_menu, .actions {
|
||||
@@ -218,7 +216,7 @@
|
||||
}
|
||||
|
||||
.counter {
|
||||
line-height: $header-height;
|
||||
line-height: $header_height;
|
||||
}
|
||||
|
||||
.actions {
|
||||
@@ -253,7 +251,7 @@
|
||||
padding: $padding/2 $padding/2 $padding/2 $padding*1.5;
|
||||
background: $background_color;
|
||||
border: none;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
border-bottom: 1px solid $theme_off;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -270,7 +268,7 @@
|
||||
cursor: default;
|
||||
|
||||
&.active {
|
||||
background: #f2f2f2;
|
||||
background: $theme_off;
|
||||
}
|
||||
|
||||
&.available {
|
||||
@@ -278,41 +276,16 @@
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #f2f2f2;
|
||||
background: $theme_off;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more_menu {
|
||||
position: relative;
|
||||
line-height: 1em;
|
||||
|
||||
.wrapper {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
right: 0;
|
||||
top: $header-height;
|
||||
background: $background_color;
|
||||
|
||||
ul {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
background: #f2f2f2;
|
||||
|
||||
.wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.more_menu .wrapper {
|
||||
width: 320px;
|
||||
top: $header_height;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@ var NotificationBase = new Class({
|
||||
App.addEvent('load', function(){
|
||||
|
||||
App.block.notification = new BlockMenu(self, {
|
||||
'button_class': 'icon2.eye-open',
|
||||
'button_class': 'icon-notifications',
|
||||
'class': 'notification_menu',
|
||||
'onOpen': self.markAsRead.bind(self)
|
||||
});
|
||||
|
||||
@@ -6,6 +6,24 @@
|
||||
"units_per_em": 1000,
|
||||
"ascent": 850,
|
||||
"glyphs": [
|
||||
{
|
||||
"uid": "48cc210e59ff4bc56b6c8fba6eb384b8",
|
||||
"css": "emo-coffee",
|
||||
"code": 59401,
|
||||
"src": "fontelico"
|
||||
},
|
||||
{
|
||||
"uid": "078fec38562c3f83a1201a908040c141",
|
||||
"css": "emo-sunglasses",
|
||||
"code": 59402,
|
||||
"src": "fontelico"
|
||||
},
|
||||
{
|
||||
"uid": "04688d76a33ce7a7950e40fae79c08ac",
|
||||
"css": "emo-cry",
|
||||
"code": 59400,
|
||||
"src": "fontelico"
|
||||
},
|
||||
{
|
||||
"uid": "9dd9e835aebe1060ba7190ad2b2ed951",
|
||||
"css": "search",
|
||||
@@ -47,6 +65,12 @@
|
||||
"css": "dots",
|
||||
"code": 59395,
|
||||
"src": "entypo"
|
||||
},
|
||||
{
|
||||
"uid": "51fb22f9ff9d7f60c95ef31e4c59502d",
|
||||
"css": "notifications",
|
||||
"code": 59399,
|
||||
"src": "mfglabs"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
@@ -13,6 +13,10 @@
|
||||
<glyph glyph-name="filter" unicode="" d="m783 685q9-23-8-39l-275-275v-414q0-23-22-33-7-3-14-3-15 0-25 11l-143 143q-10 10-10 25v271l-275 275q-18 16-8 39 9 22 33 22h714q23 0 33-22z" horiz-adv-x="785.7" />
|
||||
<glyph glyph-name="thumbs" unicode="" d="m286 154v-108q0-22-16-37t-38-16h-178q-23 0-38 16t-16 37v108q0 22 16 38t38 15h178q22 0 38-15t16-38z m0 285v-107q0-22-16-38t-38-15h-178q-23 0-38 15t-16 38v107q0 23 16 38t38 16h178q22 0 38-16t16-38z m357-285v-108q0-22-16-37t-38-16h-178q-23 0-38 16t-16 37v108q0 22 16 38t38 15h178q23 0 38-15t16-38z m-357 571v-107q0-22-16-38t-38-16h-178q-23 0-38 16t-16 38v107q0 22 16 38t38 16h178q22 0 38-16t16-38z m357-286v-107q0-22-16-38t-38-15h-178q-23 0-38 15t-16 38v107q0 23 16 38t38 16h178q23 0 38-16t16-38z m357-285v-108q0-22-16-37t-38-16h-178q-22 0-38 16t-16 37v108q0 22 16 38t38 15h178q23 0 38-15t16-38z m-357 571v-107q0-22-16-38t-38-16h-178q-23 0-38 16t-16 38v107q0 22 16 38t38 16h178q23 0 38-16t16-38z m357-286v-107q0-22-16-38t-38-15h-178q-22 0-38 15t-16 38v107q0 23 16 38t38 16h178q23 0 38-16t16-38z m0 286v-107q0-22-16-38t-38-16h-178q-22 0-38 16t-16 38v107q0 22 16 38t38 16h178q23 0 38-16t16-38z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="list" unicode="" d="m286 154v-108q0-22-16-37t-38-16h-178q-23 0-38 16t-16 37v108q0 22 16 38t38 15h178q22 0 38-15t16-38z m0 285v-107q0-22-16-38t-38-15h-178q-23 0-38 15t-16 38v107q0 23 16 38t38 16h178q22 0 38-16t16-38z m714-285v-108q0-22-16-37t-38-16h-535q-23 0-38 16t-16 37v108q0 22 16 38t38 15h535q23 0 38-15t16-38z m-714 571v-107q0-22-16-38t-38-16h-178q-23 0-38 16t-16 38v107q0 22 16 38t38 16h178q22 0 38-16t16-38z m714-286v-107q0-22-16-38t-38-15h-535q-23 0-38 15t-16 38v107q0 23 16 38t38 16h535q23 0 38-16t16-38z m0 286v-107q0-22-16-38t-38-16h-535q-23 0-38 16t-16 38v107q0 22 16 38t38 16h535q23 0 38-16t16-38z" horiz-adv-x="1000" />
|
||||
<glyph glyph-name="notifications" unicode="" d="m0 404q0 67 27 130t75 114 114 89 145 59 166 21 166-21 146-59 113-89 76-114 26-130q0-84-42-160t-112-131-168-88-205-33q-105 0-201 31l-121-85q-67-42-94-24t-12 100l25 125q-60 55-92 122t-32 143z" horiz-adv-x="1054.7" />
|
||||
<glyph glyph-name="emo-cry" unicode="" d="m278 787c-7 0-15-2-23-5l-128-62-80-38c-2-1-4-2-6-3-1-5-1-11-1-16l0 0 0-1 0 0c0-69 40-162 122-163l0 0 0 0 0 0c34 1 65 19 87 50 26 35 37 82 34 128l18 8c27 13 38 45 25 71-9 19-28 31-48 31z m212 0c-20 0-39-11-48-30-13-27-1-59 25-71l18-9c-3-46 9-93 34-128 22-31 53-49 87-49l0 0 1 0 0 0c82 0 121 93 122 162l0 0 0 1 0 0c0 5-1 11-1 16-2 1-5 2-7 3l-80 38-128 62c-7 3-15 5-23 5z m279-302c-7 0-15-5-21-16-42-72-96-259 27-259 123 1 73 182 16 261-6 8-14 13-22 14z m-512-138c-57 0-112-9-166-26-10-4-20-7-30-11-11-5-21-9-30-13l0 0-1-1 0 0c-26-12-37-44-25-70 13-26 44-38 70-25l0-1c9 5 17 8 24 11 9 3 17 6 25 9 43 14 88 21 133 21 51 0 101-9 148-27 19-7 37-15 55-24 91-49 163-130 200-232 10-27 40-41 68-31 27 10 42 40 32 68-46 126-137 227-250 288-22 12-45 22-69 31-57 21-120 33-184 33z" horiz-adv-x="851" />
|
||||
<glyph glyph-name="emo-coffee" unicode="" d="m1234 850c-17 0-34-8-44-23-54-80-24-144 4-204 13-29 26-56 5-72-23-17-28-51-10-74 17-23 51-28 74-10 89 67 60 131 27 201-15 33-32 70-12 99 16 25 10 57-14 74-9 6-20 9-30 9z m-1021-121c-81 0-157-39-203-105-18-25-12-59 14-77 24-17 59-11 76 14 45 63 132 76 193 32l0 0c3-2 7-6 11-9l1-1 1-1c3-3 7-7 10-10l1-2 0 0 0 0 1-1 1 0c20-23 55-25 78-4 22 20 24 55 4 77-46 55-116 87-188 87z m499 0c-80 0-156-39-202-105-18-25-12-59 13-77 25-17 59-11 77 14 44 63 131 76 192 32l0 0c4-2 8-6 12-9l0-1 1-1c4-3 7-7 11-10l1-2 0 0 0 0 1-1 0 0c20-23 55-25 78-4 23 20 25 55 4 77-46 55-116 87-188 87z m206-346c-24 0-44-19-44-43l1-4-1-275 0 0 0 0 0 0c0-58 24-111 62-149l0 0 0 0 0 0c38-38 91-62 148-62l0 0 226 0c1 0 3 0 5 0 13 1 27 2 39 5 15 4 29 8 42 14 55 26 97 74 114 133l31 0 0 0c37 0 70 15 94 39 23 23 38 56 38 92l0 0 0 0 0 119 0 0c0 36-15 69-39 93l0 0c-23 23-56 38-92 38l0 0 0 0-624 0z m604-100c11 0 21-5 28-12l1 0 0 0c7-8 12-18 12-29l0 0 0-110 0 0c0-11-5-21-12-29-8-7-18-12-29-12l0 0-62 0 0 0c-21 0-39-16-40-37-4-41-31-76-67-93-7-3-15-6-22-8-7-1-14-2-21-2l-3 0-209 0 0-1c-30 1-59 13-79 34l-1 0c-21 21-34 50-34 81l0 0 0 0 0 0 1 218 537 0 0 0z m-82-55l0-96 32 0c22 0 39 17 39 38l0 20c0 21-17 38-39 38l-32 0z m-1131-12c-30 0-55-25-55-55s25-55 55-55l297 0c30 0 54 25 54 55s-24 55-54 55l-297 0z" horiz-adv-x="1673" />
|
||||
<glyph glyph-name="emo-sunglasses" unicode="" d="m495 745c-154 0-309 0-463 0-18 0-32-15-32-33 3-153 129-306 278-309 84-2 164 36 218 95 55-59 135-97 219-95 149 3 272 156 275 309 0 18-14 33-32 33-155 0-309 0-463 0z m319-510c-18 0-35-9-45-25l0 0c0-1-1-2-1-3-7-12-15-23-24-34-10-12-19-23-29-32-54-51-126-80-203-80l0 0 0 0c-21 0-43 2-64 7-3 0-6 1-10 2-17 5-34 11-51 19-26 12-58 1-70-26-13-27-1-58 25-71 22-10 45-18 69-24 5-1 9-2 14-4 29-6 58-9 87-9l0 0 0 0c104 0 201 39 275 108 15 14 28 29 40 43 11 15 22 31 32 48 0 0 1 1 1 1 15 25 7 58-18 73-9 5-18 7-28 7z" horiz-adv-x="990" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
Binary file not shown.
@@ -79,7 +79,7 @@
|
||||
$(self.block.header).addClass('header').adopt(
|
||||
self.block.navigation = new BlockHeader(self, {}),
|
||||
self.block.search = new BlockSearch(self, {}),
|
||||
self.block.more = new BlockMenu(self, {'button_class': 'icon2.cog'})
|
||||
self.block.more = new BlockMenu(self, {'button_class': 'icon-settings'})
|
||||
),
|
||||
self.content = new Element('div.content').adopt(
|
||||
self.pages_container = new Element('div.pages'),
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
/* Fonts */
|
||||
@font-face {
|
||||
font-family: 'icons';
|
||||
src: url('../fonts/icons.eot?74719532');
|
||||
src: url('../fonts/icons.eot?74719532#iefix') format('embedded-opentype'),
|
||||
url('../fonts/icons.woff?74719532') format('woff'),
|
||||
url('../fonts/icons.ttf?74719532') format('truetype'),
|
||||
url('../fonts/icons.svg?74719532#icons') format('svg');
|
||||
src: url('../fonts/icons.eot?74719534');
|
||||
src: url('../fonts/icons.eot?74719534#iefix') format('embedded-opentype'),
|
||||
url('../fonts/icons.woff?74719534') format('woff'),
|
||||
url('../fonts/icons.ttf?74719534') format('truetype'),
|
||||
url('../fonts/icons.svg?74719534#icons') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@@ -15,6 +15,9 @@
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.icon-left-arrow:before { content: '\e800'; }
|
||||
.icon-settings:before { content: '\e801'; }
|
||||
@@ -23,6 +26,10 @@
|
||||
.icon-filter:before { content: '\e804'; }
|
||||
.icon-thumb:before { content: '\e805'; }
|
||||
.icon-list:before { content: '\e806'; }
|
||||
.icon-notifications:before { content: '\e807'; }
|
||||
.icon-emo-cry:before { content: '\e808'; }
|
||||
.icon-emo-coffee:before { content: '\e809'; }
|
||||
.icon-emo-sunglasses:before { content: '\e80a'; }
|
||||
|
||||
@font-face {
|
||||
font-family: 'OpenSans';
|
||||
|
||||
@@ -25,11 +25,16 @@ a {
|
||||
input, textarea, select {
|
||||
font-size: 1em;
|
||||
font-weight: 300;
|
||||
padding: $padding/2;
|
||||
background: $background_color;
|
||||
border: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
width: $header-width;
|
||||
min-width: $header-width;
|
||||
width: $header_width;
|
||||
min-width: $header_width;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
color: #FFF;
|
||||
@@ -39,6 +44,7 @@ input, textarea, select {
|
||||
.navigation {
|
||||
|
||||
.logo {
|
||||
opacity: .05;
|
||||
background: $couch_color;
|
||||
display: block;
|
||||
text-align: center;
|
||||
@@ -46,8 +52,8 @@ input, textarea, select {
|
||||
font-family: Lobster, serif;
|
||||
color: #FFF;
|
||||
font-size: 38px;
|
||||
line-height: $header-height;
|
||||
height: $header-height;
|
||||
line-height: $header_height;
|
||||
height: $header_height;
|
||||
|
||||
span:nth-child(odd){
|
||||
display: block;
|
||||
@@ -69,8 +75,80 @@ input, textarea, select {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.menu, .search_form, .notification_menu {
|
||||
position: absolute;
|
||||
bottom: $padding / 3;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
|
||||
> a {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification_menu {
|
||||
left: 50%;
|
||||
@include translateX(-50%);
|
||||
|
||||
.button:before {
|
||||
font-size: 20px;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
ul {
|
||||
min-height: 60px;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
|
||||
&:empty:after {
|
||||
content: 'No notifications (yet)';
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
padding: 18px 0;
|
||||
font-size: 15px;
|
||||
font-style: italic;
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
&:empty:before {
|
||||
content: '\e808';
|
||||
font-family: "icons";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
left: $padding / 3;
|
||||
|
||||
.button:before {
|
||||
font-size: 20px;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.search_form {
|
||||
right: $padding / 3;
|
||||
}
|
||||
|
||||
.more_menu {
|
||||
|
||||
.wrapper {
|
||||
bottom: 0;
|
||||
left: 44px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.content {
|
||||
@include flex(1 auto);
|
||||
|
||||
@@ -98,6 +176,7 @@ input, textarea, select {
|
||||
}
|
||||
}
|
||||
|
||||
/* Page */
|
||||
.page {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -116,8 +195,8 @@ input, textarea, select {
|
||||
@include flexbox();
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: $header-height;
|
||||
left: $header-width;
|
||||
height: $header_height;
|
||||
left: $header_width;
|
||||
right: 0;
|
||||
background: $background_color;
|
||||
border-radius: 3px 0 0 3px;
|
||||
@@ -132,7 +211,7 @@ input, textarea, select {
|
||||
|
||||
a {
|
||||
font-size: 24px;
|
||||
line-height: $header-height;
|
||||
line-height: $header_height;
|
||||
padding: $padding;
|
||||
color: rgba(0,0,0,.5);
|
||||
}
|
||||
@@ -147,8 +226,85 @@ input, textarea, select {
|
||||
|
||||
}
|
||||
|
||||
/* Page levels */
|
||||
@for $i from 1 through 4 {
|
||||
.level_#{$i} {
|
||||
z-index: #{$i * 10};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Menu basis */
|
||||
.more_menu {
|
||||
position: relative;
|
||||
line-height: 1em;
|
||||
|
||||
.button {
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
||||
&:before {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
right: 0;
|
||||
background: $background_color;
|
||||
z-index: 5000;
|
||||
|
||||
&:before {
|
||||
@include transform(rotate(45deg) translateY(-60%));
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background: $background_color;
|
||||
left: -10px;
|
||||
bottom: 2px;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
line-height: 1em;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: $text_color;
|
||||
padding: $padding/4 $padding/2;
|
||||
}
|
||||
|
||||
&:first-child a {
|
||||
padding-top: $padding/2;
|
||||
}
|
||||
|
||||
&:last-child a {
|
||||
padding-bottom: $padding/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
|
||||
.wrapper {
|
||||
display: block;
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,11 @@
|
||||
$couch_color: #ac0000;
|
||||
$background_color: #FFF;
|
||||
$menu_color: #111;
|
||||
$theme_off: #f2f2f2;
|
||||
$theme_off: #eaeaea;
|
||||
$text_color: #000;
|
||||
|
||||
$header-height: 80px;
|
||||
$header-width: 130px;
|
||||
$header_height: 80px;
|
||||
$header_width: 132px;
|
||||
$padding: 20px;
|
||||
|
||||
@import "susy";
|
||||
|
||||
Reference in New Issue
Block a user