Convert some stylesheets to SCSS #3796
This commit is contained in:
Bruno Machado
parent
0149dbf9ad
commit
1e50d1465a
11 changed files with 838 additions and 696 deletions
|
|
@ -1,5 +1,5 @@
|
|||
@import 'compass'
|
||||
@import 'ui.css.sass'
|
||||
@import 'ui.css.scss'
|
||||
@import '_mixins.css.scss'
|
||||
@import '_flash_messages.scss'
|
||||
@import 'new_styles/_spinner'
|
||||
|
|
|
|||
|
|
@ -1,64 +0,0 @@
|
|||
.ac_results
|
||||
:border 1px solid #999
|
||||
:background-color transparent
|
||||
:overflow hidden
|
||||
:z-index 99999
|
||||
:min-width 247px !important
|
||||
:width 100%
|
||||
|
||||
:-webkit-border-radius 3px
|
||||
:-moz-border-radius 3px
|
||||
:border-radius 3px
|
||||
|
||||
:-webkit-box-shadow 0 1px 3px #999
|
||||
:-moz-box-shadow 0 1px 3px #999
|
||||
:box-shadow 0 1px 3px #999
|
||||
|
||||
.ac_results ul
|
||||
:width 100%
|
||||
:list-style-position outside
|
||||
:list-style none
|
||||
:padding 0
|
||||
:margin 0
|
||||
|
||||
.ac_results li
|
||||
:margin 0px
|
||||
:padding 2px 5px
|
||||
:left 50px
|
||||
:top 6px
|
||||
:cursor default
|
||||
:display block
|
||||
:height 37px
|
||||
:position relative
|
||||
// if width will be 100% horizontal scrollbar will apear
|
||||
// when scroll mode will be used
|
||||
// width 100%
|
||||
:font menu
|
||||
:font-size 1em
|
||||
// it is very important, if line-height not setted or setted
|
||||
// in relative units scroll will be broken in firefox
|
||||
//:line-height 16px
|
||||
:overflow hidden
|
||||
|
||||
.ac_loading
|
||||
:background white image-url('ajax-loader.gif') right center no-repeat
|
||||
|
||||
.ac_odd
|
||||
:background-color #fafafa
|
||||
:background-color rgba(250,250,250,0.95)
|
||||
|
||||
.ac_even
|
||||
:background-color #fff
|
||||
:background-color rgba(255,255,255,0.95)
|
||||
|
||||
.ac_over
|
||||
:background-color #3F8FBA
|
||||
:color white
|
||||
|
||||
.ac_results
|
||||
.avatar
|
||||
:height 35px
|
||||
:width 35px
|
||||
:position absolute
|
||||
:left 5px
|
||||
:top 5px
|
||||
74
app/assets/stylesheets/autocomplete.css.scss
Normal file
74
app/assets/stylesheets/autocomplete.css.scss
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
.ac_results {
|
||||
border: 1px solid #999;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
z-index: 99999;
|
||||
min-width: 247px !important;
|
||||
width: 100%;
|
||||
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
|
||||
-webkit-box-shadow: 0 1px 3px #999;
|
||||
-moz-box-shadow: 0 1px 3px #999;
|
||||
box-shadow: 0 1px 3px #999;
|
||||
}
|
||||
|
||||
.ac_results ul {
|
||||
width: 100%;
|
||||
list-style-position: outside;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ac_results li {
|
||||
margin: 0px;
|
||||
padding: 2px 5px {
|
||||
left: 50px;
|
||||
top: 6px;
|
||||
}
|
||||
cursor: default;
|
||||
display: block;
|
||||
height: 37px;
|
||||
position: relative;
|
||||
// if width will be 100% horizontal scrollbar will apear
|
||||
// when scroll mode will be used
|
||||
// width 100%
|
||||
font: menu;
|
||||
font-size: 1em;
|
||||
// it is very important, if line-height not setted or setted
|
||||
// in relative units scroll will be broken in firefox
|
||||
//:line-height 16px
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ac_loading {
|
||||
background: white image-url('ajax-loader.gif') right center no-repeat;
|
||||
}
|
||||
|
||||
.ac_odd {
|
||||
background-color: #fafafa;
|
||||
background-color: rgba(250,250,250,0.95);
|
||||
}
|
||||
|
||||
.ac_even {
|
||||
background-color: #fff;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
}
|
||||
|
||||
.ac_over {
|
||||
background-color: #3F8FBA;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ac_results {
|
||||
.avatar {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,259 +0,0 @@
|
|||
body
|
||||
:direction rtl
|
||||
:text-align right
|
||||
|
||||
#user_menu
|
||||
:left 0
|
||||
:right auto
|
||||
|
||||
.diaspora_header_logo
|
||||
:float right
|
||||
:margin-left 1em
|
||||
:margin-right 0
|
||||
|
||||
#global_search
|
||||
:float right
|
||||
|
||||
#notification_badge, #message_inbox_badge
|
||||
:margin 0 10px 0 -5px
|
||||
|
||||
#nav_badges
|
||||
:left auto
|
||||
:right 460px
|
||||
:margin-right -20px
|
||||
|
||||
|
||||
#notification_dropdown
|
||||
:left auto
|
||||
:right 507px
|
||||
|
||||
#view_all_notifications
|
||||
:float left
|
||||
:margin-right 0
|
||||
:margin-left 3px
|
||||
|
||||
#notification_badge, #message_inbox_badge
|
||||
:margin 0 10px 0 -5px
|
||||
|
||||
#notification_badge a, #message_inbox_badge a
|
||||
:right 0
|
||||
|
||||
.append-2
|
||||
:padding-left 80px
|
||||
:padding-right 0px
|
||||
:float right
|
||||
|
||||
footer ul#footer_nav
|
||||
:float left
|
||||
|
||||
.right
|
||||
:left 0
|
||||
:right auto
|
||||
|
||||
.rightBar .right
|
||||
:margin-right 70px
|
||||
|
||||
.stream .avatar
|
||||
:float right
|
||||
|
||||
.stream_element .content
|
||||
:padding-right 60px
|
||||
:padding-left 0
|
||||
|
||||
#publisher_textarea_wrapper textarea
|
||||
:left auto
|
||||
|
||||
#publisher_textarea_wrapper #file-upload, #publisher_textarea_wrapper #hide_publisher, #facebox .close
|
||||
:right auto
|
||||
:left 0
|
||||
:margin-left 3px
|
||||
|
||||
#publisher .options_and_submit .public_toggle
|
||||
:text-align left
|
||||
|
||||
#publisher #click_to_share img
|
||||
:right 0
|
||||
:left auto
|
||||
|
||||
#publisher #click_to_share span
|
||||
:margin-right 12px
|
||||
:margin-left 0
|
||||
|
||||
#publisher_textarea_wrapper #photodropzone
|
||||
:right 5px
|
||||
:left auto
|
||||
|
||||
#publisher_textarea_wrapper #photodropzone li .circle
|
||||
:left -7px
|
||||
:right auto
|
||||
|
||||
#publisher_textarea_wrapper #photodropzone li .x
|
||||
:left -1px
|
||||
:right auto
|
||||
|
||||
#webSocketContainer
|
||||
:left auto !important
|
||||
:right -100px
|
||||
|
||||
header ul#user_menu
|
||||
:padding 5px 30px 5px 5px
|
||||
:right auto
|
||||
:margin -2px 0 0 -5px
|
||||
|
||||
header ul#user_menu .avatar
|
||||
:left auto
|
||||
:right 2px
|
||||
|
||||
header ul#user_menu a
|
||||
:padding-left 15px
|
||||
|
||||
header ul#user_menu .right
|
||||
:right auto
|
||||
:left 5px
|
||||
|
||||
#sort_by
|
||||
:float left
|
||||
|
||||
.stream_element .right
|
||||
:left 12px
|
||||
:right auto
|
||||
|
||||
ul.as-selections li
|
||||
:float right
|
||||
|
||||
ul.as-selections li.as-selection-item a.as-close
|
||||
:float left
|
||||
:margin 0 0 0 3px
|
||||
|
||||
ul.as-selections li.as-selection-item
|
||||
:padding 3px 6px 3px 0
|
||||
|
||||
#profile_photo_upload img
|
||||
:left auto
|
||||
:right 0
|
||||
|
||||
#profile_photo_upload
|
||||
:padding-left 0
|
||||
:padding-right 120px
|
||||
|
||||
form p.checkbox_select label
|
||||
:right 20px
|
||||
:left auto
|
||||
|
||||
.prepend-5
|
||||
:float right
|
||||
:padding-right 200px
|
||||
:padding-left 0
|
||||
|
||||
#update_profile_form h4 textarea[placeholder]
|
||||
:right -9999px
|
||||
:left auto
|
||||
|
||||
.prepend-8
|
||||
:padding-right 320px
|
||||
:padding-left 0
|
||||
|
||||
.span-2
|
||||
:float right
|
||||
:text-align right
|
||||
:margin-left 0
|
||||
:margin-right 10px
|
||||
|
||||
#facebox_header h3, #facebox_header h4
|
||||
:text-align right
|
||||
|
||||
textarea.comment_box
|
||||
:left auto
|
||||
:right -9999px
|
||||
|
||||
label
|
||||
:right 0.48em
|
||||
:left auto
|
||||
|
||||
ul#settings_nav
|
||||
:right 198px
|
||||
:left auto
|
||||
|
||||
ul, ol
|
||||
:margin 0 0 1.5em 1.5em
|
||||
:padding-right 3.333em
|
||||
|
||||
ul#settings_nav > li
|
||||
:margin-left 1em
|
||||
:margin-right 0
|
||||
|
||||
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24
|
||||
:float right
|
||||
:margin-left 10px
|
||||
:margin-right 0
|
||||
|
||||
.last
|
||||
:margin-left 0
|
||||
|
||||
ul.comments li .content, ul.show_comments li .content, div.likes li .content, div.dislikes li .content
|
||||
:padding-left 10px
|
||||
:padding-right 36px
|
||||
|
||||
ul.comments li form p, ul.show_comments li form p, div.likes li form p, div.dislikes li form p
|
||||
:left auto
|
||||
:right 35px
|
||||
|
||||
ul.comments li.posted .controls .delete
|
||||
:float left
|
||||
|
||||
.stream .stream_element time
|
||||
:right auto
|
||||
:left 20px
|
||||
|
||||
.aspect_list .name
|
||||
:right 1em
|
||||
:left auto
|
||||
|
||||
.aspect_list ul > li .right
|
||||
:left 1em
|
||||
:right auto
|
||||
|
||||
.share_with .add_aspect .right
|
||||
:right auto
|
||||
:left 1em
|
||||
|
||||
.share_with .done .right
|
||||
:right auto
|
||||
:left 1em
|
||||
|
||||
.share_with .add_aspect p
|
||||
:padding-right 1em
|
||||
:padding-left 0
|
||||
|
||||
#facebox
|
||||
:text-align right
|
||||
|
||||
.stream_element.conversation .message_count
|
||||
:right auto
|
||||
:left 10px
|
||||
|
||||
.stream_element.conversation .timestamp
|
||||
:right auto
|
||||
:left 10px
|
||||
|
||||
ul.left_nav .contact_count, ul.left_nav .edit
|
||||
:float left
|
||||
|
||||
.conversation_participants .right, .stream .new_message .right
|
||||
:right auto
|
||||
:left 0
|
||||
|
||||
.prepend-9
|
||||
:padding-left 0
|
||||
:padding-right 361px
|
||||
|
||||
.stream_container
|
||||
:border-left 0
|
||||
:border-right 1px solid #DDDDDD
|
||||
|
||||
.stream .new_message .right input[type=reset]
|
||||
:float left
|
||||
:margin-right 10px
|
||||
|
||||
div.content span.rtl
|
||||
:display block
|
||||
326
app/assets/stylesheets/rtl.css.scss
Normal file
326
app/assets/stylesheets/rtl.css.scss
Normal file
|
|
@ -0,0 +1,326 @@
|
|||
body {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#user_menu {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.diaspora_header_logo {
|
||||
float: right;
|
||||
margin-left: 1em;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#global_search {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#notification_badge, #message_inbox_badge {
|
||||
margin: 0 10px 0 -5px;
|
||||
}
|
||||
|
||||
#nav_badges {
|
||||
left: auto;
|
||||
right: 460px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
|
||||
#notification_dropdown {
|
||||
left: auto;
|
||||
right: 507px;
|
||||
}
|
||||
|
||||
#view_all_notifications {
|
||||
float: left;
|
||||
margin-right: 0;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
#notification_badge, #message_inbox_badge {
|
||||
margin: 0 10px 0 -5px;
|
||||
}
|
||||
|
||||
#notification_badge a, #message_inbox_badge a {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.append-2 {
|
||||
padding-left: 80px;
|
||||
padding-right: 0px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
footer ul#footer_nav {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.rightBar .right {
|
||||
margin-right: 70px;
|
||||
}
|
||||
|
||||
.stream .avatar {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.stream_element .content {
|
||||
padding-right: 60px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#publisher_textarea_wrapper textarea {
|
||||
left: auto;
|
||||
}
|
||||
|
||||
#publisher_textarea_wrapper #file-upload, #publisher_textarea_wrapper #hide_publisher, #facebox .close {
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
#publisher .options_and_submit .public_toggle {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#publisher #click_to_share img {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
#publisher #click_to_share span {
|
||||
margin-right: 12px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#publisher_textarea_wrapper #photodropzone {
|
||||
right: 5px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
#publisher_textarea_wrapper #photodropzone li .circle {
|
||||
left: -7px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
#publisher_textarea_wrapper #photodropzone li .x {
|
||||
left: -1px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
#webSocketContainer {
|
||||
left: auto !important;
|
||||
right: -100px;
|
||||
}
|
||||
|
||||
header ul#user_menu {
|
||||
padding: 5px 30px 5px 5px;
|
||||
right: auto;
|
||||
margin: -2px 0 0 -5px;
|
||||
}
|
||||
|
||||
header ul#user_menu .avatar {
|
||||
left: auto;
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
header ul#user_menu a {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
header ul#user_menu .right {
|
||||
right: auto;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
#sort_by {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.stream_element .right {
|
||||
left: 12px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
ul.as-selections li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
ul.as-selections li.as-selection-item a.as-close {
|
||||
float: left;
|
||||
margin: 0 0 0 3px;
|
||||
}
|
||||
|
||||
ul.as-selections li.as-selection-item {
|
||||
padding: 3px 6px 3px 0;
|
||||
}
|
||||
|
||||
#profile_photo_upload img {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#profile_photo_upload {
|
||||
padding-left: 0;
|
||||
padding-right: 120px;
|
||||
}
|
||||
|
||||
form p.checkbox_select label {
|
||||
right: 20px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.prepend-5 {
|
||||
float: right;
|
||||
padding-right: 200px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#update_profile_form h4 textarea[placeholder] {
|
||||
right: -9999px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.prepend-8 {
|
||||
padding-right: 320px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.span-2 {
|
||||
float: right;
|
||||
text-align: right;
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#facebox_header h3, #facebox_header h4 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
textarea.comment_box {
|
||||
left: auto;
|
||||
right: -9999px;
|
||||
}
|
||||
|
||||
label {
|
||||
right: 0.48em;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
ul#settings_nav {
|
||||
right: 198px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin: 0 0 1.5em 1.5em;
|
||||
padding-right: 3.333em;
|
||||
}
|
||||
|
||||
ul#settings_nav > li {
|
||||
margin-left: 1em;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.column, .span-1, .span-2, .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-9, .span-10, .span-11, .span-12, .span-13, .span-14, .span-15, .span-16, .span-17, .span-18, .span-19, .span-20, .span-21, .span-22, .span-23, .span-24 {
|
||||
float: right;
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.last {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
ul.comments li .content, ul.show_comments li .content, div.likes li .content, div.dislikes li .content {
|
||||
padding-left: 10px;
|
||||
padding-right: 36px;
|
||||
}
|
||||
|
||||
ul.comments li form p, ul.show_comments li form p, div.likes li form p, div.dislikes li form p {
|
||||
left: auto;
|
||||
right: 35px;
|
||||
}
|
||||
|
||||
ul.comments li.posted .controls .delete {
|
||||
float: left
|
||||
}
|
||||
|
||||
.stream .stream_element time {
|
||||
right: auto;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.aspect_list .name {
|
||||
right: 1em;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.aspect_list ul > li .right {
|
||||
left: 1em;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.share_with .add_aspect .right {
|
||||
right: auto;
|
||||
left: 1em;
|
||||
}
|
||||
|
||||
.share_with .done .right {
|
||||
right: auto;
|
||||
left: 1em;
|
||||
}
|
||||
|
||||
.share_with .add_aspect p {
|
||||
padding-right: 1em;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#facebox {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.stream_element.conversation .message_count {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.stream_element.conversation .timestamp {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
ul.left_nav .contact_count, ul.left_nav .edit {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.conversation_participants .right, .stream .new_message .right {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.prepend-9 {
|
||||
padding-left: 0;
|
||||
padding-right: 361px;
|
||||
}
|
||||
|
||||
.stream_container {
|
||||
border-left: 0;
|
||||
border-right: 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
.stream .new_message .right input[type=reset] {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
div.content span.rtl {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
// Copyright (c) 2010-2011, Diaspora Inc. This file is
|
||||
// licensed under the Affero General Public License version 3 or later. See
|
||||
// the COPYRIGHT file.
|
||||
|
||||
@font-face
|
||||
:font-family 'BrandonGrotesqueLightRegular'
|
||||
:src url('brandongrotesque_light/Brandon_light-webfont.eot')
|
||||
:src local('☺'), url('brandongrotesque_light/Brandon_light-webfont.woff') format('woff'), url('brandongrotesque_light/Brandon_light-webfont.ttf') format('truetype'), url('brandongrotesque_light/Brandon_light-webfont.svg#webfont') format('svg')
|
||||
font
|
||||
:weight normal
|
||||
:style normal
|
||||
|
||||
#flash_notice,
|
||||
#flash_error,
|
||||
#flash_alert
|
||||
:z-index 100
|
||||
:top 32px
|
||||
:position absolute
|
||||
:color #000
|
||||
:width 400px
|
||||
:margin 0 0 0 -200px
|
||||
:left 50%
|
||||
:text
|
||||
:align center
|
||||
:font
|
||||
:size 14px
|
||||
:padding 3px 0
|
||||
|
||||
#flash_notice
|
||||
:background-color #CFC
|
||||
:border solid 1px #6C6
|
||||
|
||||
#flash_error,
|
||||
#flash_alert
|
||||
:background-color #FCC
|
||||
:border solid 1px #C66
|
||||
|
||||
.fieldWithErrors
|
||||
:display inline
|
||||
|
||||
.error_messages
|
||||
:width 400px
|
||||
:border 2px solid #CF0000
|
||||
:padding 0
|
||||
:padding-bottom 12px
|
||||
:margin-bottom 20px
|
||||
:background-color #f0f0f0
|
||||
:font
|
||||
:size 12px
|
||||
h2
|
||||
:text-align left
|
||||
:padding 5px 5px 5px 15px
|
||||
:margin 0
|
||||
:font
|
||||
:weight bold
|
||||
:size 12px
|
||||
:background-color #c00
|
||||
p
|
||||
:margin 8px 10px
|
||||
ul
|
||||
:margin 0
|
||||
|
||||
/* via blueprint */
|
||||
html
|
||||
:font
|
||||
:size 100.01%
|
||||
|
||||
/* via blueprint */
|
||||
body
|
||||
:font
|
||||
:size 75%
|
||||
:family "Helvetica Neue", Arial, Helvetica, sans-serif
|
||||
:color #222
|
||||
:background #fff
|
||||
|
||||
:margin
|
||||
:left 100px
|
||||
|
||||
/* via blueprint */
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
textarea, select
|
||||
:background
|
||||
:color #fff
|
||||
:border 1px solid #bbb
|
||||
|
||||
/* via blueprint */
|
||||
input[type=text]:focus,
|
||||
input[type=password]:focus,
|
||||
input.text:focus,
|
||||
input.title:focus,
|
||||
textarea:focus, select:focus
|
||||
:border
|
||||
:color #666
|
||||
|
||||
#huge_text
|
||||
:font
|
||||
:size 40px
|
||||
:family 'BrandonGrotesqueLightRegular'
|
||||
:line-height 120px
|
||||
:color #333
|
||||
:text-shadow 0 1px 1px #999
|
||||
|
||||
input
|
||||
:font
|
||||
:size 14px
|
||||
|
||||
form p
|
||||
:position relative
|
||||
:padding 0
|
||||
|
||||
label
|
||||
:color #999
|
||||
:position absolute
|
||||
:padding
|
||||
:top 7px
|
||||
:left 8px
|
||||
:font
|
||||
:size 14px
|
||||
:weight normal
|
||||
|
||||
input[type='text'],
|
||||
input[type='password']
|
||||
:font
|
||||
:family "Helvetica Neue", Arial, Helvetica, sans-serif
|
||||
:padding 0.3em
|
||||
:width 395px
|
||||
:border-top 1px solid #999
|
||||
|
||||
#user
|
||||
:display inline
|
||||
:width 500px
|
||||
.username
|
||||
:width 200px
|
||||
:display inline
|
||||
|
||||
input
|
||||
:display inline
|
||||
:width 200px
|
||||
|
||||
.user_network
|
||||
:width 200px
|
||||
:display inline
|
||||
:font
|
||||
:size 18px
|
||||
|
||||
162
app/assets/stylesheets/sessions.css.scss
Normal file
162
app/assets/stylesheets/sessions.css.scss
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
// Copyright (c) 2010-2011, Diaspora Inc. This file is
|
||||
// licensed under the Affero General Public License version 3 or later. See
|
||||
// the COPYRIGHT file.
|
||||
|
||||
@font-face {
|
||||
font-family: 'BrandonGrotesqueLightRegular';
|
||||
src: url('brandongrotesque_light/Brandon_light-webfont.eot');
|
||||
src: local('☺'), url('brandongrotesque_light/Brandon_light-webfont.woff') format('woff'), url('brandongrotesque_light/Brandon_light-webfont.ttf') format('truetype'), url('brandongrotesque_light/Brandon_light-webfont.svg#webfont') format('svg');
|
||||
font: {
|
||||
weight: normal;
|
||||
style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
#flash_notice,
|
||||
#flash_error,
|
||||
#flash_alert {
|
||||
z-index: 100;
|
||||
top: 32px;
|
||||
position: absolute;
|
||||
color: #000;
|
||||
width: 400px;
|
||||
margin: 0 0 0 -200px;
|
||||
left: 50%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
#flash_notice {
|
||||
background-color: #CFC;
|
||||
border: solid 1px #6C6;
|
||||
}
|
||||
|
||||
#flash_error,
|
||||
#flash_alert {
|
||||
background-color: #FCC;
|
||||
border: solid 1px #C66;
|
||||
}
|
||||
|
||||
.fieldWithErrors {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.error_messages {
|
||||
width: 400px;
|
||||
border: 2px solid #CF0000;
|
||||
padding: 0;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #f0f0f0;
|
||||
font-size: 12px;
|
||||
h2 {
|
||||
text-align: left;
|
||||
padding: 5px 5px 5px 15px;
|
||||
margin: 0;
|
||||
font: {
|
||||
weight: bold;
|
||||
size: 12px;
|
||||
}
|
||||
background-color: #c00;
|
||||
}
|
||||
p {
|
||||
margin: 8px 10px;
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* via blueprint */
|
||||
html {
|
||||
font-size: 100.01%;
|
||||
}
|
||||
|
||||
/* via blueprint */
|
||||
body {
|
||||
font: {
|
||||
size: 75%;
|
||||
family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
}
|
||||
color: #222;
|
||||
background: #fff;
|
||||
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
/* via blueprint */
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
textarea, select {
|
||||
background-color: #fff;
|
||||
border: 1px solid #bbb;
|
||||
}
|
||||
|
||||
/* via blueprint */
|
||||
input[type=text]:focus,
|
||||
input[type=password]:focus,
|
||||
input.text:focus,
|
||||
input.title:focus,
|
||||
textarea:focus, select:focus {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
#huge_text {
|
||||
font: {
|
||||
size: 40px;
|
||||
family: 'BrandonGrotesqueLightRegular';
|
||||
}
|
||||
line-height: 120px;
|
||||
color: #333;
|
||||
text-shadow: 0 1px 1px #999;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
form p {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #999;
|
||||
position: absolute;
|
||||
padding-top: 7px;
|
||||
left: 8px;
|
||||
font: {
|
||||
size: 14px;
|
||||
weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='password'] {
|
||||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
padding: 0.3em;
|
||||
width: 395px;
|
||||
border-top: 1px solid #999;
|
||||
}
|
||||
|
||||
#user {
|
||||
display: inline;
|
||||
width: 500px;
|
||||
.username {
|
||||
width: 200px;
|
||||
display: inline;
|
||||
|
||||
input {
|
||||
display: inline;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.user_network {
|
||||
width: 200px;
|
||||
display: inline;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
// Copyright (c) 2010-2011, Diaspora Inc. This file is
|
||||
// licensed under the Affero General Public License version 3 or later. See
|
||||
// the COPYRIGHT file.
|
||||
|
||||
.tags_show
|
||||
.side_stream
|
||||
.stream_element
|
||||
.add_contact
|
||||
:display inline
|
||||
:float right
|
||||
:font-size 10px
|
||||
.button
|
||||
:padding 5px 1px 4px 1px
|
||||
:margin-right 3px
|
||||
:font-size 10px
|
||||
20
app/assets/stylesheets/tags.css.scss
Normal file
20
app/assets/stylesheets/tags.css.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
// Copyright (c) 2010-2011, Diaspora Inc. This file is
|
||||
// licensed under the Affero General Public License version 3 or later. See
|
||||
// the COPYRIGHT file.
|
||||
|
||||
.tags_show {
|
||||
.side_stream {
|
||||
.stream_element {
|
||||
.add_contact {
|
||||
display: inline;
|
||||
float: right;
|
||||
font-size: 10px;
|
||||
.button {
|
||||
padding: 5px 1px 4px 1px;
|
||||
margin-right: 3px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,211 +0,0 @@
|
|||
// Copyright (c) 2010-2011, Diaspora Inc. This file is
|
||||
// licensed under the Affero General Public License version 3 or later. See
|
||||
// the COPYRIGHT file.
|
||||
|
||||
@import '_mixins.css.scss'
|
||||
|
||||
$button-border-color: #aaa
|
||||
|
||||
.ui-autocomplete
|
||||
:left -11px
|
||||
|
||||
.button
|
||||
@include border-radius(3px)
|
||||
@include button-gradient($light-grey)
|
||||
@include box-shadow(0,1px,1px,#cfcfcf)
|
||||
@include transition(border)
|
||||
|
||||
:display inline
|
||||
|
||||
:font
|
||||
:style normal
|
||||
:size 12px
|
||||
:color #505050
|
||||
|
||||
:padding 4px 9px
|
||||
|
||||
:min-width 90px
|
||||
:min-height 10px
|
||||
|
||||
:border 1px solid $button-border-color
|
||||
|
||||
:cursor pointer
|
||||
:white-space nowrap
|
||||
|
||||
&:hover
|
||||
@include button-gradient-hover-no-saturation($light-grey)
|
||||
:color #505050
|
||||
:text-decoration none
|
||||
:border 1px solid darken($button-border-color,15%)
|
||||
|
||||
&:active
|
||||
@include linear-gradient(#acacac,#808080)
|
||||
|
||||
img
|
||||
:position relative
|
||||
:height 20px
|
||||
:width 20px
|
||||
:top 6px
|
||||
|
||||
/* fix for input height */
|
||||
input.button
|
||||
:padding 3px 9px
|
||||
:bottom 4px
|
||||
|
||||
.button .selected
|
||||
@include linear-gradient(#f0f0f0,#fafafa,29%,85%)
|
||||
|
||||
:border
|
||||
:top 1px solid #aaa
|
||||
|
||||
.button
|
||||
&.delete
|
||||
:color desaturate($red,10%)
|
||||
|
||||
&.in_aspects
|
||||
@include button-gradient($green)
|
||||
&:hover
|
||||
@include button-gradient-hover($green)
|
||||
|
||||
&.creation
|
||||
@include button-gradient($creation-blue)
|
||||
:color #fff
|
||||
|
||||
:border 1px solid darken($button-border-color,20%)
|
||||
|
||||
&:hover
|
||||
@include button-gradient-hover($creation-blue)
|
||||
:border 1px solid darken($button-border-color,35%)
|
||||
|
||||
&.red_on_hover
|
||||
&:hover
|
||||
@include button-gradient(#F74427)
|
||||
:color #222
|
||||
|
||||
.right
|
||||
:position absolute
|
||||
:right 0
|
||||
|
||||
.dropdown
|
||||
:position relative
|
||||
:display inline-block
|
||||
|
||||
.button
|
||||
:width 240px
|
||||
|
||||
.wrapper
|
||||
@include box-shadow(0, 2px, 5px, #666)
|
||||
//@include opacity(0)
|
||||
@include transition(opacity)
|
||||
|
||||
:display none
|
||||
:z-index 20
|
||||
:position absolute
|
||||
:width 140px
|
||||
:padding 4px 0
|
||||
:margin-top 2px
|
||||
:background
|
||||
:color #fff
|
||||
:border 1px solid #999
|
||||
|
||||
ul
|
||||
@include user-select(none)
|
||||
:font
|
||||
:size normal
|
||||
|
||||
:padding 0 !important
|
||||
:margin 0 !important
|
||||
:color #000
|
||||
|
||||
> li
|
||||
:font-size 11px !important
|
||||
:padding 6px 2px
|
||||
:left 24px
|
||||
:position relative
|
||||
:color #222
|
||||
:list-style none !important
|
||||
|
||||
&.selected
|
||||
:background
|
||||
:image image-url('icons/check_yes_ok.png')
|
||||
:position 3px 1px
|
||||
:repeat no-repeat
|
||||
|
||||
&.selected:hover
|
||||
:background
|
||||
:image image-url('icons/check_yes_ok_white.png')
|
||||
/* bump top position up 1px to compensate for the 1px added top border */
|
||||
:position 3px 0px
|
||||
|
||||
&.loading
|
||||
:background
|
||||
:image image-url('ajax-loader.gif')
|
||||
:repeat no-repeat
|
||||
:position 4px 2px
|
||||
|
||||
&.loading:hover
|
||||
:background
|
||||
:image image-url('ajax-loader_inverted.gif')
|
||||
/* bump top position up 1px to compensate for the 1px added top border */
|
||||
:position 4px 1px
|
||||
|
||||
&.newItem
|
||||
a
|
||||
:color #999
|
||||
:font-style italic
|
||||
|
||||
&:hover
|
||||
:text-decoration none
|
||||
|
||||
&.hang_right
|
||||
.wrapper
|
||||
@include border-radius(3px, 0, 3px, 3px)
|
||||
:right 3px
|
||||
|
||||
&.hang_left
|
||||
.wrapper
|
||||
@include border-radius(0, 3px, 3px, 3px)
|
||||
:left 0px
|
||||
|
||||
.selected
|
||||
:font-weight bold
|
||||
|
||||
&.active
|
||||
.wrapper
|
||||
//@include opacity(1)
|
||||
:display block
|
||||
|
||||
.button
|
||||
@include border-radius(3px, 3px, 0, 0)
|
||||
:border 1px solid #444
|
||||
|
||||
.button
|
||||
:background #666
|
||||
|
||||
.button,
|
||||
.wrapper ul > li:hover
|
||||
:background
|
||||
:color #666
|
||||
:color #fff
|
||||
:text-shadow none
|
||||
|
||||
|
||||
.wrapper ul > li:hover
|
||||
:border
|
||||
:top 1px solid #444
|
||||
:bottom 1px solid #444
|
||||
:padding
|
||||
:top 5px
|
||||
:bottom 5px
|
||||
|
||||
&.divider
|
||||
:padding
|
||||
:bottom 3px
|
||||
|
||||
a
|
||||
:color #ccc
|
||||
|
||||
.wrapper ul > li,
|
||||
.wrapper ul > li *
|
||||
:cursor pointer
|
||||
|
||||
255
app/assets/stylesheets/ui.css.scss
Normal file
255
app/assets/stylesheets/ui.css.scss
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
// Copyright (c) 2010-2011, Diaspora Inc. This file is
|
||||
// licensed under the Affero General Public License version 3 or later. See
|
||||
// the COPYRIGHT file.
|
||||
|
||||
@import "_mixins.css.scss";
|
||||
|
||||
$button-border-color: #aaa;
|
||||
|
||||
.ui-autocomplete {
|
||||
left: -11px
|
||||
}
|
||||
|
||||
.button {
|
||||
@include border-radius(3px);
|
||||
@include button-gradient($light-grey);
|
||||
@include box-shadow(0,1px,1px,#cfcfcf);
|
||||
@include transition(border);
|
||||
|
||||
display: inline;
|
||||
|
||||
font: {
|
||||
style: normal;
|
||||
size: 12px;
|
||||
}
|
||||
color: #505050;
|
||||
|
||||
padding: 4px 9px;
|
||||
|
||||
min-width: 90px;
|
||||
min-height: 10px;
|
||||
|
||||
border: 1px solid $button-border-color;
|
||||
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
@include button-gradient-hover-no-saturation($light-grey);
|
||||
color: #505050;
|
||||
text-decoration: none;
|
||||
border: 1px solid darken($button-border-color,15%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include linear-gradient(#acacac,#808080);
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* fix for input height */
|
||||
input.button {
|
||||
padding: 3px 9px {
|
||||
bottom: 4px
|
||||
}
|
||||
}
|
||||
|
||||
.button .selected {
|
||||
@include linear-gradient(#f0f0f0,#fafafa,29%,85%);
|
||||
|
||||
border-top: 1px solid #aaa;
|
||||
}
|
||||
|
||||
.button {
|
||||
&.delete {
|
||||
color: desaturate($red,10%);
|
||||
}
|
||||
|
||||
&.in_aspects {
|
||||
@include button-gradient($green);
|
||||
&:hover {
|
||||
@include button-gradient-hover($green);
|
||||
}
|
||||
}
|
||||
|
||||
&.creation {
|
||||
@include button-gradient($creation-blue);
|
||||
color: #fff;
|
||||
|
||||
border: 1px solid darken($button-border-color,20%);
|
||||
|
||||
&:hover {
|
||||
@include button-gradient-hover($creation-blue);
|
||||
border: 1px solid darken($button-border-color,35%);
|
||||
}
|
||||
}
|
||||
|
||||
&.red_on_hover {
|
||||
&:hover {
|
||||
@include button-gradient(#F74427);
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.button {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
@include box-shadow(0, 2px, 5px, #666);
|
||||
//@include opacity(0)
|
||||
@include transition(opacity);
|
||||
|
||||
display: none;
|
||||
z-index: 20;
|
||||
position: absolute;
|
||||
width: 140px;
|
||||
padding: 4px 0;
|
||||
margin-top: 2px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #999;
|
||||
|
||||
ul {
|
||||
@include user-select(none);
|
||||
font-size: normal;
|
||||
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
color: #000;
|
||||
|
||||
> li {
|
||||
font-size: 11px !important;
|
||||
padding: 6px 2px {
|
||||
left: 24px; }
|
||||
position: relative;
|
||||
color: #222;
|
||||
list-style: none !important;
|
||||
|
||||
&.selected {
|
||||
background: {
|
||||
image: image-url('icons/check_yes_ok.png');
|
||||
position: 3px 1px;
|
||||
repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background: {
|
||||
image: image-url('icons/check_yes_ok_white.png');
|
||||
/* bump top position up 1px to compensate for the 1px added top border */
|
||||
position: 3px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&.loading {
|
||||
background: {
|
||||
image: image-url('ajax-loader.gif');
|
||||
repeat: no-repeat;
|
||||
position: 4px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.loading:hover {
|
||||
background: {
|
||||
image: image-url('ajax-loader_inverted.gif');
|
||||
/* bump top position up 1px to compensate for the 1px added top border */
|
||||
position: 4px 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.newItem {
|
||||
a {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hang_right {
|
||||
.wrapper {
|
||||
@include border-radius(3px, 0, 3px, 3px);
|
||||
right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&.hang_left {
|
||||
.wrapper {
|
||||
@include border-radius(0, 3px, 3px, 3px);
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.wrapper {
|
||||
//@include opacity(1)
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button {
|
||||
@include border-radius(3px, 3px, 0, 0);
|
||||
border: 1px solid #444;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #666;
|
||||
}
|
||||
|
||||
.button,
|
||||
.wrapper ul > li:hover {
|
||||
background-color: #666;
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.wrapper ul > li:hover {
|
||||
border: {
|
||||
top: 1px solid #444;
|
||||
bottom: 1px solid #444;
|
||||
}
|
||||
padding: {
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
&.divider {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper ul > li,
|
||||
.wrapper ul > li * {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue