twisterarmy
/
theme_nin
mirror of https://github.com/twisterarmy/theme_nin.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

clean sass

nin-v2
Mylene 9 years ago
parent
346c59afef
commit
8e41c4558b
17 changed files with 3131 additions and 3091 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      README.md
  2. 1
      css/fonts/OpenSans-Bold.ttf
  3. 1
      css/fonts/OpenSans-Regular.ttf
  4. 1
      css/fonts/Symbola.ttf
  5. 2722
      css/style.css
  6. 5
      js/theme_option.js
  7. 86
      sass/_commons.sass
  8. 50
      sass/_grid.sass
  9. 41
      sass/_login.sass
  10. 34
      sass/_menu.sass
  11. 408
      sass/_modal.sass
  12. 70
      sass/_network.sass
  13. 116
      sass/_postboard.sass
  14. 39
      sass/_profile.sass
  15. 57
      sass/_utils.sass
  16. 28
      sass/_var.sass
  17. 446
      sass/style.sass

9
README.md
Unescape View File

@ -1,7 +1,14 @@ @@ -1,7 +1,14 @@
Theme Nin v2 for twister-html
=============================
Nin is a clean and flat theme for [Twister](http://twister.net.co) [(twister-core on github)](https://github.com/miguelfreitas/twister-core) based on [twister-html](https://github.com/miguelfreitas/twister-html)
Nin is a clean and flat theme [Twister](http://twister.net.co) [(twister-core on github)](https://github.com/miguelfreitas/twister-core) based on the html client [twister-html](https://github.com/miguelfreitas/twister-html)
This is experimental by now.
Maproad
-- cleaning sass
--

1
css/fonts/OpenSans-Bold.ttf
Unescape View File

@ -1 +0,0 @@ @@ -1 +0,0 @@
../../../css/OpenSans-Bold.ttf

1
css/fonts/OpenSans-Regular.ttf
Unescape View File

@ -1 +0,0 @@ @@ -1 +0,0 @@
../../../css/OpenSans-Regular.ttf

1
css/fonts/Symbola.ttf
Unescape View File

@ -1 +0,0 @@ @@ -1 +0,0 @@
../../../css/Symbola.ttf

2722
css/style.css
View File

File diff suppressed because it is too large Load Diff

5
js/theme_option.js
Unescape View File

@ -5,7 +5,6 @@ $(document).ready(function() @@ -5,7 +5,6 @@ $(document).ready(function()
$('.right').css('height', windowHeight - 100);
$('.module.who-to-follow').detach().appendTo($('.dashboard.left'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.left'));
});
@ -112,8 +111,8 @@ function openModal(modal) { @@ -112,8 +111,8 @@ function openModal(modal) {
.append(modal.content);
else
modal.content = modal.self.find('.modal-content');
modal.self.prependTo('.right').fadeIn('fast');
$('html, body').animate({scrollTop:0},300);
modal.self.prependTo('body').fadeIn('fast');
if (modal.classBase === '.modal-wrapper') {
modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());

86
sass/_commons.sass
Unescape View File

@ -2,23 +2,27 @@ @@ -2,23 +2,27 @@
outline: none!important
+box-sizing(border-box)
li
list-style: none
html, body
height: 100%
min-height: 100%
background: $main-background-color
color: $defaut-font-color
font: .95em/1.3em $main-font-family
position: absolute
width: 100%
html
font-size: $global-font-size
background-color: $main-background-color
+background-image(linear-gradient(to top right, #aaa, $main-background-color,$main-background-color,$main-background-color, #aaa) )
background-attachment: fixed
body
font-size: $main-font-size
line-height : $main-line-height
font-family : $main-font-family
font-weight: 400
br
display: block
img
background: $main-background-color
+border-radius(2px)
a
text-decoration: none
@ -28,34 +32,47 @@ a @@ -28,34 +32,47 @@ a
text-decoration: none
i
text-decoration: underline
font-style: normal
i, em
font-style: italic
p
padding: 5px 0
strong, b
font-weight: 600
h1
font-size: 1.1em
text-transform: uppercase
letter-spacing: 0.07em
font-weight: 700
line-height: 1.1em
h2, h3
h2
font-size: 1.1em
text-transform: uppercase
letter-spacing: 0.07em
font-weight: 400
line-height: 1.8em
margin-bottom: 10px
line-height: 1.1em
h3
font-weight: 700
font-size: 1em
textarea, input[type=text]
font: .95em/1.3em $main-font-family
font-size: 1.1em
font-weight: 400
line-height: 1.1em
br
display: block
textarea, input
background: white
display: block
border: none
/* isFollowing */
.isFollowing:after
color: $main-color-color
content: '\e806'
font-family: 'fontello'
font-family: $symbol-font-family
padding-left: 2px
display: inline
font-size: 10px
@ -66,32 +83,3 @@ textarea, input[type=text] @@ -66,32 +83,3 @@ textarea, input[type=text]
h3 &
display: none
/************** BUTTONS ************/
button, a.button
padding: 6px 8px
font-size: 13px
display: inline-block
line-height: 1em
font-weight: 500
margin: 0
float: none
text-shadow: 2px 2px 0 rgba(black,0)
+transition-property(background)
+transition-duration(.1s)
color: white
background-color: #6F8E97
+border-radius(2px)
border: none
font-family: 'fontello', 'Roboto'
cursor: pointer
&:hover
background: $main-color-color
text-shadow: 2px 2px 0 rgba(black,.1)
&.disabled
opacity: .5
background-color: #999
&:hover
color: $bloc-background-color

50
sass/_grid.sass
Unescape View File

@ -1,50 +0,0 @@ @@ -1,50 +0,0 @@
.clear-fix:after
content: ''
display: table
clear: both
// grille ultra-simple pour projets ultra-simples
$grid_width : 100% // largeur de la grille en %
$grid_max_width : 1080px // largeur max. en px
$grid_cols : 12 // nombre de colonnes
$grid_gut : 0 // largeur de la goutière en %
$grid_col : ($grid_width - ($grid_gut * ($grid_cols - 1))) / $grid_cols
$grid_col_push : $grid_width/$grid_cols
$class-col : col !default
$class-push : push !default
// contenant
.wrap
width: $grid_width
max-width: $grid_max_width
margin: 0 auto
background : transparent
position: relative
z-index: 10
+box-sizing(border-box)
@extend .clear-fix
.col
float: left
margin: 0 $grid_gut 0 0
+box-sizing(border-box)
@extend .clear-fix
@for $i from 1 through $grid_cols
$j: $i - 1
.#{$class-col}-#{$i}
width: ($i * $grid_col) + ($j * $grid_gut)
.#{$class-col}-#{$i}-full
width: ($i * $grid_col_push)
float: left
margin: 0
+box-sizing(border-box)
@extend .clear-fix
.#{$class-push}-#{$i}
margin-left: ($i * $grid_col) + ($i * $grid_gut)
.col.last, .#{$class-col}-#{$grid_cols}
margin-right: 0
.col.first
clear : left

41
sass/_login.sass
Unescape View File

@ -1,55 +1,56 @@ @@ -1,55 +1,56 @@
.login .header-bold
.login
.header-bold
display: block
width: 720px
margin: 0px auto 12px auto
.login .module
display: block
width: 720px
padding: 32px 40px
margin: 8px auto
.module
background: white
@extend .col
@extend .col-6
padding: $space
.login .module p
p
margin-bottom: 5px
.login .module input
input
padding: 5px 10px
background: #f3f3f3
border: solid 1px #dcdcdc
transition: box-shadow 0.3s, border 0.3s
font-size: 14px
.login .module input:focus,
.login .module select:focus
input:focus, select:focus
background: white
transition: background-color 100ms linear
border-bottom: solid 2px $color-green
.login .module select
select
height: 30px
padding: 3px 30px 3px 10px
margin: 0
border: 1px solid #ccc
font-size: 14px
.login .module span.availability
span.availability
margin-left: 10px
color: #45474d
.with-nickname, .import-secret-key, .create-user
margin-top: 10px
.login .module:nth-child(2) div,
.login .module:nth-child(3) div:nth-child(2),
.login .secret-key-import,
.login .username-import
.module:nth-child(2) div,
.module:nth-child(3) div:nth-child(2),
.secret-key-import,
.username-import
margin-top: 20px
margin-bottom: 20px
margin-left: 16px
.login .create-user,
.login .import-secret-key
.create-user,
.import-secret-key
display: block
margin-left: auto
margin-right: 16px
.with-nickname, .import-secret-key, .create-user
margin-top: 10px

34
sass/_menu.sass
Unescape View File

@ -1,18 +1,24 @@ @@ -1,18 +1,24 @@
// vars for the menu
$menu-height : 50px
$menu-font-color: $defaut-font-color
.userMenu
width: 100%
position: fixed
height: $menu-height
left: 0
margin: 0
//+background-image(radial-gradient(at top , $color-green, #6F8E97,$color-blue) )
background: $main-color-dark
background-color: #F5F5F5
//+background-image(radial-gradient(at top , $color-green,$color-blue) )
z-index: 2
ul
@extend .clear-fix
+box-sizing(border-box)
width: $site-width
max-width: 100%
margin: auto
width: 100%
max-width: 75%
margin: 0
background: image-url("logo.png") no-repeat 50% 50%
background-size: 20px
li
@ -21,19 +27,19 @@ @@ -21,19 +27,19 @@
position: relative
display: block
> a
line-height: 50px
line-height: $menu-height
padding: 0 .5em
display: inline-block
color: rgba(white, 0.7)!important
font-size: 1.2em
color: rgba($menu-font-color, 0.7)!important
font-size: 1em
position: relative
font-weight: 400
font-weight: 500
+box-sizing(border-box)
&:hover
color: white!important
color: $menu-font-color!important
&.current a
color: white!important
+text-shadow(1px 1px 0 rgba(#000,.2))
color: $menu-font-color!important
//+text-shadow(1px 1px 0 rgba(#000,.2))
/* Menu specific entries */
@ -71,7 +77,7 @@ @@ -71,7 +77,7 @@
float: right
position: relative
margin-right: 0
color: white
color: $menu-font-color
+ a
color: $main-color-dark
&.userMenu-search
@ -86,5 +92,5 @@ @@ -86,5 +92,5 @@
&.userMenu-config > a
@extend .icon-cog
@extend .extend-icon
font-size: 1.5em
font-size: 1.5rem

408
sass/_modal.sass
Unescape View File

@ -0,0 +1,408 @@ @@ -0,0 +1,408 @@
/*********** POPUP MODAL **************/
// vars modal
$header-modal-height : $menu-height
.modal-wrapper
background: white
z-index: 3000
width: 25%
position: fixed
+box-sizing(border-box)
@extend .box-shadow
height: 100%
right: 0
bottom: 0
overflow: hidden
.post-area-new
padding: 10px
.modal-blackout
background: rgba(0, 0, 0, 0)
z-index: -1
position: fixed
left: 0
top: 0
width: 0
height: 0
.modal-content
@extend .clear-fix
background: $background-light
overflow-y: auto
.postboard-news
position: absolute
display: block
right: 0
z-index: 20
@extend .color-1
h2 span
display: none
.modal-header
position: relative
background: $color-blue
height: $header-modal-height
+box-sizing(border-box)
@extend .clear-fix
border-bottom: 1px solid $background-light
h3
padding-left: 20px
line-height: $header-modal-height
font-weight: 500
font-size: 1rem
color: white
.modal-close
@extend .extend-icon
@extend .icon-cancel
position: absolute
right: 10px
top: 0
font-size: 14px
line-height: $header-modal-height
cursor: pointer
color: rgba(white , 0.7)
&:hover
color: white
b
display: none
.mark-all-as-read
float: right
cursor: pointer
font-size: 1.3em
line-height: $header-modal-height
padding: 0 5px
color: white
transition: all .1s linear
display: none
.modal-back:hover, .mark-all-as-read:hover
color: white
.mark-all-as-read
@extend .extend-icon
@extend .icon-ok
.modal-back
@extend .extend-icon
@extend .icon-left
position: absolute
right: 35px
top: 0
font-size: 14px
line-height: $header-modal-height
cursor: pointer
color: rgba(white , 0.7)
&:hover
color: white
b
display: none
/* MODAL */
.modal-content
width: 100%
.postboard
padding: 0
clear: none!important
position: relative
width: 100%
margin: auto
h2
display: block
.post-text
margin: 0 0 0 40px
.post-photo
width: 30px
height: 30px
img
width: 100%
height: 100%
//+border-radius(50%)
/*********** POPUP PROMPT *************/
.prompt-wrapper
background: rgba( 255, 255,255, 1.0 )
z-index: 5
position: fixed
top: 50%
left: 50%
width: 600px
margin-left: -300px
@extend .box-shadow
.modal-buttons
padding: 10px
text-align: right
button:last-child
padding: 5px 20px
/************ FOLLOWING-CONFIG MODAL **********/
.prompt-wrapper.following-config-modal
margin-top: -100px
.modal-content
padding: 10px
text-align: center
.modal-buttons
display: none
h2
text-transform: none
.following-config-method-buttons
.public-following
background-color: $color-green
margin: 0px 2px
padding: 6px 16px
/************ RETWIST POSTS MODAL **********/
.prompt-wrapper.reTwist
&.prompt-wrapper
margin-top: -110px
.modal-content
padding: 20px 15px
.modal-buttons
.modal-propagate
background-color: $color-green
.post-expand, .post-interactions
display: none
/********* REPLY POSTS MODAL***************/
.prompt-wrapper.reply
&.prompt-wrapper
margin-top: -110px
.modal-buttons, .post-expand, .post-interactions
display: none
.post-area
padding-bottom: 6px
/****** DIRECT MESSAGES MODAL**********/
.modal-wrapper.directMessages
.post-area-new
display: none
z-index: 5
background: $main-background-color
position: absolute
bottom: 0
width: 100%
padding: 0!important
.modal-header
h3 span
display: inline!important
.modal-content
+box-sizing(border-box)
width: 100%
.post-photo
height: 48px
width: 48px
.post-text
margin-left: 58px
font-size: .9em
.post-info-name
float: none
.post-info-tag
line-height: 1em
padding: 0
display: inline
font-size: 80%
margin: 0 0 0 1em
.post-info-sent
position: absolute
left: 50%
top: 10px
display: none
.direct-messages-list .post
padding: 20px
cursor: pointer
&:after
content: ""
font-family: $symbol-font-family
position: absolute
right: 5px
top: 50%
font-size: 1.1em
margin: -6px 0 0 0
color: rgba(0, 0, 0, 0.4)
display: none
.direct-messages-list
.post:hover:after
display: block
.direct-messages-thread
padding-bottom: 150px
.post
@extend .clear-fix
background: none
left: 0
margin: 0px 10px 20px 10px
cursor: default
.post-info-time
float: none
display: block
text-align: center
font-size: 10px
margin: 10px 0
cursor: default
&:hover
color: $main-color-light
.post-text:after, .post-text:nth-child(2n):after
content: ""
width: 1px
background: transparent
position: absolute
top: 10px
white-space: normal
.post-text:after
border-top: solid 7px transparent
border-bottom: solid 7px transparent
border-right: solid 7px white
left: -7px
.post-text
background: white
margin-right: 60px
margin-left: 60px
position: relative
display: inline-block
max-width: 300px
font-size: .9em
padding: 5px 10px
z-index: 4
float: left
word-wrap: break-word
max-width: 60%
min-height: 15px
.post-photo
position: absolute
left: 0
top: 10px
.post.sent
.post-text:after
border-top: solid 7px transparent
border-bottom: solid 7px transparent
border-right: none
border-left: solid 7px white
right: -7px
left: auto
.post-text
float: right
.post-photo
position: absolute
right: 0
left: auto
/********* NEW USER MODAL**************/
.modal-wrapper.new-user
.modal-content
padding: 25px
.modal-close
display: none
.text
margin: 0 0 15px 0
.emphasis
text-align: center
.secret-key
display: block
margin-top: 8px
color: rgba(0.5, 0, 0, 1)
font-weight: bold
font-size: 110%
/******** HASHTAG MODAL***********/
.modal-wrapper.hashtag-modal
.postboard
padding: 0
/****** CONVERSATION MODAL***********/
.modal-wrapper.conversation-modal
.postboard
padding: 0
/****** FOLLOWING MODAL*******/
.modal-wrapper.following-modal
.modal-content
padding: 0
ol
margin: 5px
.open-profile-modal
&:hover
text-decoration: none
.postboard
h2
display: none
/******* WHO TO FOLLOW MODAL*******/
.modal-wrapper.who-to-follow-modal
.modal-content
padding: 15px
+box-sizing(border-box)
ol
margin: 5px
.open-profile-modal
&:hover
text-decoration: none
.twister-user
position: relative
padding: 5px
.twister-user-info
text-align: left
font-size: .8rem
line-height: 1rem
width: 80%
button
position: absolute
right: 0
top: 5%
@extend .small
.bio
color: rgba(0, 0, 0, 0.6)
font-style: italic
padding: .5rem

70
sass/_network.sass
Unescape View File

@ -1,53 +1,44 @@ @@ -1,53 +1,44 @@
/********** LOGIN AND NETWORK PAGES *******/
.network.singleBlock
.network
&.singleBlock
@extend .clear-fix
ul
padding-left: 20px
li
line-height: 36px
font-size: 13px
line-height: 2rem
padding: 2rem
.module
@extend .col
@extend .col-6
padding: 1.5%
background: $bloc-background-color
+box-shadow(0 1px 1px rgba(#555, .1))
margin-bottom: 50px
&:last-child
@extend .last
h2
display: block
+background-image(linear-gradient(to right , $color-green, #5E80A2) )
h3
font-weight: 500
text-transform: none
border-bottom: 1px solid rgba(black, 0.2)
margin: 20px 0 10px 0
.singleBlock .spam-msg
.spam-msg
resize: none
width: 100%
display: block
border-radius: 3px
padding: 4px
font-size: 13px
height: 80px
padding: $space
height: 180px
border: solid 1px rgba(0, 0, 0, 0.1)
line-height: 20px
position: relative
margin-left: -20px
margin-bottom: 10px
margin: $space 0
font-family: $main-font-family
.highlight
background: $bloc-background-color
padding: 5px 8px
line-height: 1.7
display: inline-block
font-size: 1.2rem
display: block
margin: $space 0
span.connection-status
line-height: 1em
font-weight: 500
font-size: 1em
&:before
content: ""
display: inline-block
@ -61,9 +52,30 @@ span.connection-status @@ -61,9 +52,30 @@ span.connection-status
.character-limit
float: right
margin-right: 18px
margin-right: $space
.connections span, .known-peers, .dht-nodes, .blocks, .last-block-time, .mining-difficulty
color: #333
color: $main-color-color
font-weight: 700
font-family: Arial
font-size: 95%
h2
font-weight: 400
+background-image(linear-gradient(to left , $color-green, #5E80A2) )
padding: 1rem 2rem
color: white
h3
font-weight: 600
margin-top: 2*$space
padding: 0 1.5rem
+box-sizing(content-box)
&:after
display: block
content: ''
height: 1px
width: 100%
background: rgba(#5F81A1,.5)
margin-top: $space

116
sass/_postboard.sass
Unescape View File

@ -1,10 +1,17 @@ @@ -1,10 +1,17 @@
/************* POST BOARD *************/
.postboard
@extend .col
@extend .col-5
// vars for postboard
$avatar-width : 48px
.postboard
float: left
width: 50%
padding: 20px
h2
display: none
.postboard-posts
position: relative
z-index: 1
@ -12,53 +19,41 @@ @@ -12,53 +19,41 @@
.postboard-news
display: none
.modal-content &
line-height: 30px
position: absolute
right: 0
top: 40px
font-weight: 900
display: block
padding: 0 20px
color: white
+text-shadow(1px 1px 1px rgba(black, .1))
background: $main-color-color
display: block
.post
background: $bloc-background-color
box-sizing: border-box
position: relative
margin-bottom: 1px
transition: margin .4s ease-out
-moz-transition: margin .4s ease-out
+transition-property(margin)
+transition-duration(.4s)
+transition-timing-function(ease-out)
.post, .original.post, .post.open
background: $bloc-background-color
position: relative
.module.open
.post
color: darken($defaut-font-color, 15%)
.post:hover
color: darken($defaut-font-color, 15%)
.post-data
padding: 15px
padding: $space
.post.open
.original, .related
margin-bottom: 1px
.postboard-posts > .post
+box-shadow(0 1px 1px rgba(#555, .1))
&.open
margin-top: 20px
margin-bottom: 20px
margin-top: $space
margin-bottom: $space
&:after
content: ""
position: absolute
@ -77,6 +72,8 @@ @@ -77,6 +72,8 @@
.open
background: none
@extend .box-shadow
&:hover
background: none
@ -85,8 +82,8 @@ @@ -85,8 +82,8 @@
display: inline-block
float: left
vertical-align: middle
width: 48px
height: 48px
width: $avatar-width
height: $avatar-width
overflow: hidden
img
width: 100%
@ -94,17 +91,13 @@ @@ -94,17 +91,13 @@
//+border-radius(50%)
.post-info-name
font-weight: 700
font-size: 1em
line-height: 14px
font-weight: 600
color: inherit
text-decoration: none
display: inline-block
padding-left: 10px
float: left
margin-left: 10px
.post-info-name:hover
@ -129,12 +122,20 @@ @@ -129,12 +122,20 @@
color: lighten($dark-grey,5%)
.post-text
margin: 0 0 0 68px
margin: 0 0 0 ($avatar-width +10)
word-wrap: break-word
min-height: 30px
min-height: $avatar-width
padding: 0
samp
background: #eee
background: $background-light
font-size: .9rem
line-height: .9rem
display: inline-block
padding: 5px 8px
+border-radius(2px)
color: #333
font-weight: 500
font-family: monospace
.post-context
@ -161,7 +162,6 @@ @@ -161,7 +162,6 @@
font-size: 13px
color: $dark-grey
.post-retransmited-icon
display: none
@ -186,20 +186,25 @@ @@ -186,20 +186,25 @@
&:hover
color: lighten($dark-grey,5%)
.post-reply
.post-reply, .post-propagate, .post-favorite
@extend .extend-icon
padding-left: 10px
display: none
&:hover
color: lighten($dark-grey,5%)
.post-reply
@extend .icon-comment
.post-propagate
@extend .extend-icon
@extend .icon-twistagain
.post-favorite
display: none!important
@extend .extend-icon
@extend .icon-star
.post .show-more
.post
.show-more
display: inline-block
float: right
font-size: 12px
@ -214,6 +219,7 @@ @@ -214,6 +219,7 @@
display: block
.expanded-post
.post-expand, .post-reply, .post-propagate, .post-favorite
color: lighten($dark-grey,30%)
&:hover
@ -223,9 +229,6 @@ @@ -223,9 +229,6 @@
display: none
margin: 0
.post-reply, .post-propagate, .post-favorite
padding-left: 10px
display: none
.post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover
.post-reply, .post-propagate, .post-favorite
@ -238,8 +241,7 @@ @@ -238,8 +241,7 @@
.post-reply, .post-propagate/*, .post-favorite*/
display: inline-block!important
.post-reply:hover, .post-propagate:hover, .post-favorite:hover
color: lighten($dark-grey,5%)
.expanded-content
display: none
@ -309,25 +311,3 @@ @@ -309,25 +311,3 @@
border-left: solid 3px $main-color-color
margin-left: 1px
/* MODAL */
.modal-content
width: 100%
.postboard
padding: 0
clear: none!important
position: relative
width: 100%
margin: auto
.post-text
margin: 0 0 0 40px
.post-photo
width: 30px
height: 30px
img
width: 100%
height: 100%
//+border-radius(50%)

39
sass/_profile.sass
Unescape View File

@ -14,22 +14,7 @@ $modal-postboard-post-height: 100% @@ -14,22 +14,7 @@ $modal-postboard-post-height: 100%
***************************************/
.profile-modal
.profile-data
display: block
margin: auto
padding-top: 0
@extend .clear-fix
li
display: inline
margin: 0 5px
float: none
a
display: inline
span
&.posts-count, &.following-count, &.followers-count
display: inline-block
padding-right: 5px
.modal-content
overflow: hidden
@ -85,11 +70,6 @@ $modal-postboard-post-height: 100% @@ -85,11 +70,6 @@ $modal-postboard-post-height: 100%
padding: 10px
h1
font-size: 22px
font-weight: bold
display: inline-block
padding-top: 10px
&:before
content: ""
@ -123,19 +103,25 @@ $modal-postboard-post-height: 100% @@ -123,19 +103,25 @@ $modal-postboard-post-height: 100%
padding: 10px
font-style: italic
text-align: center
font-size: .8em
.profile-card-buttons
text-align: center
padding: 0 0 $space 0
.direct-messages-with-user, .follow, .unfollow
display: inline-block
position: static
.isFollowing:after
font-size: 15px
position: absolute
.follow
@extend .color-1
.unfollow
background: $main-color-light
@extend .color-2
.twister-user-info
@extend .clear-fix
@ -143,8 +129,7 @@ $modal-postboard-post-height: 100% @@ -143,8 +129,7 @@ $modal-postboard-post-height: 100%
width: 100%
padding: 0
.follow
background: $main-color-color
.known-followers
text-align: center

57
sass/_utils.sass
Unescape View File

@ -1,5 +1,62 @@ @@ -1,5 +1,62 @@
.box-shadow
+box-shadow(0 8px 13px rgba(#333, .1))
.clear-fix
&:after // clearfix
content: ""
display: table
clear: both
/************** BUTTONS ************/
button, a.button
padding: .6rem 1rem
display: inline-block
line-height: .75rem
letter-spacing: 0.07rem
font-size: .75rem
position: relative
z-index: 10
font-weight: 300
margin: 2px
text-transform: uppercase
+transition-property(background, border-color)
+transition-duration(.1s)
color: #444
background: #F8F8F8
border: 1px solid darken( #F8F8F8 , 5%)
font-family: $symbol-font-family, $main-font-family
cursor: pointer
&:hover
border-color: darken( #F8F8F8 , 15%)
&.disabled
opacity: .5
color: #999
background-color: $bloc-background-color
&:hover
color: #666
+box-shadow(1px 1px 0 rgba(#444, .3))
&.color-1
background: $color-blue
border-color: darken($color-blue, 5%)
color: white
font-weight: 500
&:hover
border-color: darken($color-blue, 15%)
&.color-2
background: #C3C3C3
border-color: darken(#C3C3C3, 5%)
color: white
font-weight: 500
&:hover
border-color: darken(#C3C3C3, 15%)
&.small
padding: .3rem .5rem
font-weight: 700
font-size: .6rem
line-height: .6rem

28
sass/_var.sass
Unescape View File

@ -1,10 +1,13 @@ @@ -1,10 +1,13 @@
//these are the main variables used in the sass file
$grid_width : 100% // largeur de la grille en %
$grid_max_width : 96% // largeur max. en px
$grid_cols : 12 // nombre de colonnes
$grid_gut : 2% // largeur de la goutière en %
// G R I D
$grid_width : 100% // grid width %
$grid_max_width : 100% // max width
$grid_cols : 12 // cols number
$grid_gut : 2.5% // gut width %
$grid_col : ($grid_width - ($grid_gut * ($grid_cols - 1))) / $grid_cols
$class-col : col !default
@ -21,12 +24,12 @@ $class-col : col !default @@ -21,12 +24,12 @@ $class-col : col !default
width: ($i * $grid_col) + ($j * $grid_gut)
// vars used for the website
$site-width : $grid_max_width
$gut-width : $grid_gut
$indicators-width : 55px
$postboard-modal-width : auto
$space : 1rem
// colors
$light-grey: #e9e9e9
$dark-blue: #38434E
@ -34,8 +37,8 @@ $color-yellow: #E6953C @@ -34,8 +37,8 @@ $color-yellow: #E6953C
$color-pink: #BF6B6C
$color-green: #B4C669
$color-red: #EF5D43
$color-blue: #446CB3
$dark-grey : #66686B
$color-blue: #00AA8B
$dark-grey : #444
$main-color-light: #aaa
$main-color-dark: #596073
@ -47,10 +50,13 @@ $background-light: lighten($main-background-color, 4% ) @@ -47,10 +50,13 @@ $background-light: lighten($main-background-color, 4% )
$defaut-font-color: $dark-grey
$global-font-size : 15px
$main-font-size : 1rem
$main-line-height : 1.4rem
/* FONTS */
$main-font-family: "Roboto", sans-serif
$symbol-font-family: "fontello"
$serif-font-family: "Droid"
$alt-font-family : "Laranja", serif
$serif-font-family: "Droid", serif

446
sass/style.sass
Unescape View File

@ -2,15 +2,22 @@ @@ -2,15 +2,22 @@
@import compass
@import 'compass/reset'
@import 'compass/utilities'
// utils
@import _var
@import _commons
@import _utils
// layout
@import _menu
@import _modal
@import _profile
@import _postboard
@import _following
@import _login
@import _network
@import _commons
@import _tabs
@ -48,22 +55,21 @@ @@ -48,22 +55,21 @@
.wrapper
width: $site-width
max-width: 100%
margin: 0 auto
padding-top: 70px
margin: 0
padding-top: $menu-height
position: relative
z-index: 1
min-height: 100%
.dashboard
&.left, &.right
@extend .col
@extend .col-3
float: left
width: 25%
position: relative
&.right
@extend .last
height: 0
background: #ededed
@extend .col-4
@ -81,8 +87,7 @@ @@ -81,8 +87,7 @@
right: -10px
width: 250px
overflow: hidden
border-bottom: solid 2px $main-color-color
box-shadow: 8px 10px 15px 0px rgba(0,0,0, .3)
@extend .box-shadow
.userMenu-search .dialog-modal:after
right: auto
@ -153,42 +158,20 @@ ul.userMenu-search-profiles @@ -153,42 +158,20 @@ ul.userMenu-search-profiles
clear: both
.follow-suggestions
button
.follow .unfollow
position: absolute
bottom: 10px
right: 10px
&:hover
background-color: $main-color-light
.follow
background-color: $main-color-color
.unfollow
background-color: $main-color-dark
li
position: relative
box-sizing: border-box
background: $bloc-background-color
@extend .clear-fix
@extend .col
@extend .col-3
min-height: 100px
margin-bottom: 20px
&:nth-child(4n)
@extend .last
&:nth-child(4n+1)
clear: left
/***************** MINI PROFILE *******************************/
.mini-profile
@extend .box-shadow
.mini-profile-info
position: relative
text-align: center
background: $bloc-background-color
padding: 20px 0
a.button
background: $main-color-light
margin: 1em auto
@ -200,6 +183,7 @@ ul.userMenu-search-profiles @@ -200,6 +183,7 @@ ul.userMenu-search-profiles
@extend .clear-fix
.post-area-new
@extend .open
+box-shadow(none)
padding: 0
margin: 0
textarea
@ -289,14 +273,9 @@ ul.userMenu-search-profiles @@ -289,14 +273,9 @@ ul.userMenu-search-profiles
background: $bloc-background-color
li
display: block
@extend .col
@extend .col-4
+box-sizing(border-box)
&.current a
border-bottom: 3px solid $main-color-color
&:last-child
@extend .last
display: inline
margin: 0 5px
float: none
a
color: $dark-grey
display: inline-block
@ -306,12 +285,10 @@ ul.userMenu-search-profiles @@ -306,12 +285,10 @@ ul.userMenu-search-profiles
color: $main-color-light
span
&.posts-count, &.following-count, &.followers-count
font-weight: 900
display: block
line-height: 15px
display: inline-block
padding-right: 5px
&:last-child
display: none
.mini-profile-info a:hover
text-decoration: none
@ -353,7 +330,6 @@ ul.userMenu-search-profiles @@ -353,7 +330,6 @@ ul.userMenu-search-profiles
.post-area-new
textarea
resize: none
box-shadow: none!important
+box-sizing(border-box)
width: 100%
display: block
@ -369,7 +345,7 @@ ul.userMenu-search-profiles @@ -369,7 +345,7 @@ ul.userMenu-search-profiles
padding: 3px
margin: 5px 0
&:focus
border-bottom: solid 2px $color-green
border-bottom: solid 1px $main-color-color
#postboard-top
clear: both
@ -406,8 +382,9 @@ ul.userMenu-search-profiles @@ -406,8 +382,9 @@ ul.userMenu-search-profiles
float: right
.post-area-new
@extend .open
+box-shadow(none)
textarea
margin: 0 0 5px 0
margin: 0 0 10px 0
@ -445,27 +422,6 @@ textarea.splited-post @@ -445,27 +422,6 @@ textarea.splited-post
/******* WHO TO FOLLOW MODAL*******/
.modal-wrapper.who-to-follow-modal
.modal-content
padding: 15px
+box-sizing(border-box)
ol
margin: 5px
.open-profile-modal
&:hover
text-decoration: none
.twister-user
position: relative
padding: 5px
.bio
color: rgba(0, 0, 0, 0.6)
font-style: italic
/******** WHO TO FOLLOW ********/
@ -475,6 +431,7 @@ textarea.splited-post @@ -475,6 +431,7 @@ textarea.splited-post
background: white
padding: 20px
width: 100%
@extend .box-shadow
li
width: 100%
min-height: auto
@ -511,12 +468,7 @@ textarea.splited-post @@ -511,12 +468,7 @@ textarea.splited-post
border-bottom: 1px solid $background-light
&:nth-child(4n)
@extend .last
.twister-user-info
width: 80%
button
position: absolute
right: 0
top: 5%
img.twister-user-photo
@ -618,6 +570,7 @@ img.twister-user-photo @@ -618,6 +570,7 @@ img.twister-user-photo
margin: 0 0 20px 0
background: white
padding: 20px
@extend .box-shadow
small
display: none
h3
@ -650,346 +603,13 @@ ol.toptrends-list @@ -650,346 +603,13 @@ ol.toptrends-list
.twistday-reminder
width: 100%
background: white
@extend .box-shadow
@extend .clear-fix
padding: 20px
small
display: none
/*********** POPUP MODAL **************/
.modal-wrapper
background: white
z-index: 3000
width: 100%
position: absolute
+box-sizing(border-box)
height: 100%
left: 0
top: 0
overflow: hidden
.post-area-new
padding: 10px
.modal-blackout
background: rgba(0, 0, 0, 0)
z-index: -1
position: fixed
left: 0
top: 0
width: 0
height: 0
.modal-content
@extend .clear-fix
background: $background-light
overflow-y: auto
.postboard h2
position: fixed
z-index: 2
margin-top: -60px
margin-left: -60px
span
display: none
.modal-header
position: relative
background: $main-color-dark
height: 40px
+box-sizing(border-box)
@extend .clear-fix
border-bottom: 1px solid $background-light
h3
padding-left: 20px
color: white
line-height: 40px
.modal-close
@extend .extend-icon
@extend .icon-cancel
position: absolute
right: 10px
top: 0
font-size: 14px
line-height: 40px
cursor: pointer
color: rgba(white , 0.7)
&:hover
color: white
b
display: none
.mark-all-as-read
float: right
cursor: pointer
font-size: 1.3em
line-height: 40px
padding: 0 5px
color: white
transition: all .1s linear
display: none
.modal-back:hover, .mark-all-as-read:hover
color: white
.mark-all-as-read
@extend .extend-icon
@extend .icon-ok
.modal-back
@extend .extend-icon
@extend .icon-left
position: absolute
right: 35px
top: 0
font-size: 14px
line-height: 40px
cursor: pointer
color: rgba(white , 0.7)
&:hover
color: white
b
display: none
/*********** POPUP PROMPT *************/
.prompt-wrapper
background: rgba( 255, 255,255, 1.0 )
z-index: 5
position: fixed
top: 50%
left: 50%
width: 600px
margin-left: -300px
box-shadow: 0 0 30px rgba( 0, 0, 0, .6 )
.modal-buttons
padding: 10px
text-align: right
button:last-child
padding: 5px 20px
/************ FOLLOWING-CONFIG MODAL **********/
.prompt-wrapper.following-config-modal
margin-top: -100px
.modal-content
padding: 10px
text-align: center
.modal-buttons
display: none
h2
text-transform: none
.following-config-method-buttons
.public-following
background-color: $color-green
margin: 0px 2px
padding: 6px 16px
/************ RETWIST POSTS MODAL **********/
.prompt-wrapper.reTwist
&.prompt-wrapper
margin-top: -110px
.modal-content
padding: 20px 15px
.modal-buttons
.modal-propagate
background-color: $color-green
.post-expand, .post-interactions
display: none
/********* REPLY POSTS MODAL***************/
.prompt-wrapper.reply
&.prompt-wrapper
margin-top: -110px
.modal-buttons, .post-expand, .post-interactions
display: none
.post-area
padding-bottom: 6px
/****** DIRECT MESSAGES MODAL**********/
.modal-wrapper.directMessages
.post-area-new
display: none
z-index: 5
background: $main-background-color
position: absolute
bottom: 0
width: 100%
padding: 0!important
.modal-header
h3 span
display: inline!important
.modal-content
+box-sizing(border-box)
width: 100%
.post-photo
height: 48px
width: 48px
.post-text
margin-left: 58px
font-size: .9em
.post-info-name
float: none
.post-info-tag
line-height: 1em
padding: 0
display: inline
font-size: 80%
margin: 0 0 0 1em
.post-info-sent
position: absolute
left: 50%
top: 10px
display: none
.direct-messages-list .post
padding: 20px
cursor: pointer
&:after
content: ""
font-family: $symbol-font-family
position: absolute
right: 5px
top: 50%
font-size: 1.1em
margin: -6px 0 0 0
color: rgba(0, 0, 0, 0.4)
display: none
.direct-messages-list
.post:hover:after
display: block
.direct-messages-thread
padding-bottom: 150px
.post
@extend .clear-fix
background: none
left: 0
margin: 0px 10px 20px 10px
cursor: default
.post-info-time
float: none
display: block
text-align: center
font-size: 10px
margin: 10px 0
cursor: default
&:hover
color: $main-color-light
.post-text:after, .post-text:nth-child(2n):after
content: ""
width: 1px
background: transparent
position: absolute
top: 10px
white-space: normal
.post-text:after
border-top: solid 7px transparent
border-bottom: solid 7px transparent
border-right: solid 7px white
left: -7px
.post-text
background: white
margin-right: 60px
margin-left: 60px
position: relative
display: inline-block
max-width: 300px
font-size: .9em
padding: 5px 10px
z-index: 4
float: left
word-wrap: break-word
max-width: 60%
min-height: 15px
.post-photo
position: absolute
left: 0
top: 10px
.post.sent
.post-text:after
border-top: solid 7px transparent
border-bottom: solid 7px transparent
border-right: none
border-left: solid 7px white
right: -7px
left: auto
.post-text
float: right
.post-photo
position: absolute
right: 0
left: auto
/********* NEW USER MODAL**************/
.modal-wrapper.new-user
.modal-content
padding: 25px
.modal-close
display: none
.text
margin: 0 0 15px 0
.emphasis
text-align: center
.secret-key
display: block
margin-top: 8px
color: rgba(0.5, 0, 0, 1)
font-weight: bold
font-size: 110%
/******** HASHTAG MODAL***********/
.modal-wrapper.hashtag-modal
.postboard
padding: 0
/****** CONVERSATION MODAL***********/
.modal-wrapper.conversation-modal
.postboard
padding: 0
/****** FOLLOWING MODAL*******/
.modal-wrapper.following-modal
.modal-content
padding: 0
ol
margin: 5px
.open-profile-modal
&:hover
text-decoration: none
.postboard
h2
display: none
@ -1126,7 +746,7 @@ ul.dropdown-menu @@ -1126,7 +746,7 @@ ul.dropdown-menu
background-color: #fff
border: 1px solid rgba(0, 0, 0, 0.2)
border-bottom: solid 2px #B4C669
box-shadow: 8px 10px 10px 0px rgba(0,0,0, .2)
@extend .box-shadow
li
> li > a
padding: 3px 20px

Write Preview
Loading…
Cancel
Save