refactor publisher css
This commit is contained in:
Steffen van Bergerem
parent
665f9735d9
commit
d5c3079623
2 changed files with 304 additions and 288 deletions
|
|
@ -12,6 +12,7 @@
|
|||
@import 'opengraph'
|
||||
@import 'help'
|
||||
@import 'profile'
|
||||
@import 'publisher'
|
||||
|
||||
/* ====== media ====== */
|
||||
.media
|
||||
|
|
@ -527,249 +528,11 @@ form p.checkbox_select
|
|||
*:-moz-placeholder
|
||||
@include placeholder_styles
|
||||
|
||||
#publisher
|
||||
:z-index 1
|
||||
:color $text-grey
|
||||
:position relative
|
||||
:margin
|
||||
:top 0
|
||||
:bottom 0
|
||||
:padding 12px
|
||||
:top 0
|
||||
:bottom 22px
|
||||
:top 0
|
||||
|
||||
:border
|
||||
:bottom 1px #eee solid
|
||||
|
||||
form
|
||||
textarea
|
||||
:resize none
|
||||
:height 50px
|
||||
:margin 0
|
||||
|
||||
&.mention_popup
|
||||
:padding 1px 12px
|
||||
:margin
|
||||
:bottom 0
|
||||
:border
|
||||
:bottom none
|
||||
|
||||
&.closed
|
||||
.options_and_submit
|
||||
:display none !important
|
||||
|
||||
.counter
|
||||
:display none
|
||||
|
||||
&:not(.closed)
|
||||
textarea
|
||||
:margin
|
||||
:bottom 30px
|
||||
|
||||
.options_and_submit
|
||||
:min-height 21px
|
||||
:clear both
|
||||
:position relative
|
||||
:padding
|
||||
:top 6px
|
||||
:margin
|
||||
:bottom -2px
|
||||
|
||||
input
|
||||
:display inline
|
||||
|
||||
.public_toggle
|
||||
:text
|
||||
:align right
|
||||
.dropdown
|
||||
:text
|
||||
:align left
|
||||
|
||||
.icons-monotone_wrench_settings
|
||||
:display inline-block
|
||||
:width 16px
|
||||
:height 16px
|
||||
|
||||
a.question_mark
|
||||
:text-decoration none
|
||||
|
||||
#publisher_service_icons
|
||||
:position relative
|
||||
:top 3px
|
||||
:margin
|
||||
:right 10px
|
||||
|
||||
.social_media_logos-facebook-16x16,
|
||||
.social_media_logos-twitter-16x16,
|
||||
.social_media_logos-tumblr-16x16,
|
||||
.social_media_logos-wordpress-16x16,
|
||||
.social_media_logos-email-16x16,
|
||||
.social_media_logos-feed-16x16,
|
||||
.social_media_logos-website-16x16
|
||||
:display inline-block
|
||||
:height 16px
|
||||
:width 16px
|
||||
|
||||
#fileInfo
|
||||
:display inline
|
||||
:position relative
|
||||
:top -2px
|
||||
|
||||
#status_message_fake_text
|
||||
:min-height 20px
|
||||
|
||||
|
||||
.content_creation
|
||||
:margin
|
||||
:top 1em
|
||||
|
||||
#file-upload
|
||||
:bottom 1px !important
|
||||
:display inline-block
|
||||
:margin 0
|
||||
:padding .3em .3em 3px
|
||||
:position absolute !important
|
||||
:right 6px
|
||||
:cursor pointer
|
||||
|
||||
|
||||
input[type='file']
|
||||
:cursor pointer
|
||||
:right initial !important
|
||||
:height 100%
|
||||
:width 100%
|
||||
&::-webkit-file-upload-button
|
||||
:cursor pointer
|
||||
|
||||
img
|
||||
@include opacity(0.4)
|
||||
:vertical-align bottom
|
||||
|
||||
&:hover
|
||||
:color $text-dark-grey
|
||||
:cursor pointer
|
||||
|
||||
img
|
||||
@include opacity(0.8)
|
||||
|
||||
&:active
|
||||
:color #444
|
||||
:text-shadow 0 1px 0 #fafafa
|
||||
|
||||
img
|
||||
@include opacity(1)
|
||||
|
||||
&.loading
|
||||
@include opacity(0.5)
|
||||
|
||||
#publisher_textarea_wrapper
|
||||
#hide_publisher
|
||||
@include opacity(0.3)
|
||||
:z-index 5
|
||||
:padding 3px
|
||||
:position absolute
|
||||
:right 6px
|
||||
:margin-top 9px
|
||||
|
||||
.icons-deletelabel
|
||||
:height 14px
|
||||
:width 14px
|
||||
|
||||
&:hover
|
||||
@include opacity(1)
|
||||
|
||||
@include border-radius(2px)
|
||||
|
||||
:border 1px solid #ccc
|
||||
:background #fff
|
||||
|
||||
&.active
|
||||
:border 1px solid $border-dark-grey
|
||||
|
||||
:position relative
|
||||
:padding
|
||||
:right 10px
|
||||
|
||||
textarea
|
||||
:z-index 2
|
||||
:border none
|
||||
|
||||
&:focus
|
||||
:outline 0
|
||||
:background transparent
|
||||
|
||||
&.with_attachments
|
||||
:padding-bottom 38px
|
||||
|
||||
#photodropzone
|
||||
:z-index 3
|
||||
:position absolute
|
||||
:bottom 0
|
||||
:right 35px
|
||||
:width 430px
|
||||
:left 5px
|
||||
:padding 0
|
||||
|
||||
li
|
||||
:display inline-block
|
||||
:margin-right 4px
|
||||
img
|
||||
:width 50px
|
||||
:max-height 55px
|
||||
.circle
|
||||
@include border-radius(20px)
|
||||
|
||||
:display none
|
||||
:z-index 1
|
||||
:position absolute
|
||||
:right -7px
|
||||
:top -5px
|
||||
:background
|
||||
:color #333
|
||||
|
||||
:width 20px
|
||||
:max-width 20px
|
||||
:height 20px
|
||||
:max-height 20px
|
||||
|
||||
:border 1px solid #fff
|
||||
|
||||
.x
|
||||
:display none
|
||||
:z-index 2
|
||||
:position absolute
|
||||
:top -3px
|
||||
:right -1px
|
||||
:font
|
||||
:size small
|
||||
:weight bold
|
||||
|
||||
&:hover
|
||||
:cursor default
|
||||
.circle
|
||||
:display block
|
||||
.x
|
||||
:display block
|
||||
|
||||
.counter
|
||||
:position absolute
|
||||
:font-size 13px
|
||||
:padding 12px 0 0 5px
|
||||
.warning
|
||||
:color orange
|
||||
.exceeded
|
||||
:color red
|
||||
.field_with_submit
|
||||
input[type='text']
|
||||
:width 82%
|
||||
:display inline
|
||||
|
||||
#publisher.closed
|
||||
#publisher_textarea_wrapper
|
||||
#hide_publisher
|
||||
:display none
|
||||
|
||||
.dim
|
||||
@include opacity(0.3)
|
||||
|
||||
|
|
@ -926,36 +689,6 @@ input[type="search"]
|
|||
:height 100px
|
||||
:width 100px
|
||||
|
||||
#publisher_photo_upload
|
||||
:position absolute
|
||||
:display inline
|
||||
:left 600px
|
||||
:top 0
|
||||
:z-index 10
|
||||
|
||||
#profile_photo_upload
|
||||
:margin
|
||||
:top 5px
|
||||
:min-height 100px
|
||||
:position relative
|
||||
|
||||
img
|
||||
@include border-radius(5px)
|
||||
@include box-shadow(0,1px,2px,#666)
|
||||
|
||||
:position absolute
|
||||
:left 0
|
||||
:height 100px
|
||||
:width 100px
|
||||
|
||||
&.avatar
|
||||
@include transition(opacity, 0.5s)
|
||||
&.loading
|
||||
@include opacity(0.3)
|
||||
|
||||
:padding
|
||||
:left 120px
|
||||
|
||||
h3 span.current_gs_step
|
||||
:color #22C910
|
||||
|
||||
|
|
@ -2678,26 +2411,6 @@ body
|
|||
:background
|
||||
:color #e8f7ff
|
||||
|
||||
#publisher-images
|
||||
#locator
|
||||
:bottom 1px !important
|
||||
:display inline-block
|
||||
:margin 0
|
||||
:position absolute !important
|
||||
:right 30px
|
||||
:cursor pointer
|
||||
img
|
||||
:padding-top 2px
|
||||
@include opacity(0.4)
|
||||
&:hover
|
||||
:color $text-dark-grey
|
||||
:cursor pointer
|
||||
img
|
||||
@include opacity(0.8)
|
||||
.btn
|
||||
:height 19px
|
||||
:width 19px
|
||||
|
||||
#location
|
||||
:border 1px solid $border-dark-grey
|
||||
:height 20px
|
||||
|
|
|
|||
303
app/assets/stylesheets/publisher.css.scss
Normal file
303
app/assets/stylesheets/publisher.css.scss
Normal file
|
|
@ -0,0 +1,303 @@
|
|||
#publisher {
|
||||
z-index: 1;
|
||||
color: $text-grey;
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0 12px 22px 12px;
|
||||
top: 0;
|
||||
border-bottom: 1px #eee solid;
|
||||
|
||||
form {
|
||||
textarea {
|
||||
resize: none;
|
||||
height: 50px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.mention_popup {
|
||||
padding: 1px 12px;
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.closed {
|
||||
.options_and_submit {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.closed) {
|
||||
textarea {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.options_and_submit {
|
||||
min-height: 21px;
|
||||
clear: both;
|
||||
position: relative;
|
||||
padding-top: 6px;
|
||||
margin-bottom: -2px;
|
||||
|
||||
input {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.public_toggle {
|
||||
text-align: right;
|
||||
.dropdown {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.icons-monotone_wrench_settings {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
a.question_mark {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
#publisher_service_icons {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
margin-right: 10px;
|
||||
|
||||
.social_media_logos-facebook-16x16,
|
||||
.social_media_logos-twitter-16x16,
|
||||
.social_media_logos-tumblr-16x16,
|
||||
.social_media_logos-wordpress-16x16,
|
||||
.social_media_logos-email-16x16,
|
||||
.social_media_logos-feed-16x16,
|
||||
.social_media_logos-website-16x16 {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
#fileInfo {
|
||||
display: inline;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
#status_message_fake_text {
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.content_creation {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#file-upload {
|
||||
bottom: 1px !important;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: .3em .3em 3px;
|
||||
position: absolute !important;
|
||||
right: 6px;
|
||||
cursor: pointer;
|
||||
|
||||
input[type='file'] {
|
||||
cursor: pointer;
|
||||
right: initial !important;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
&::-webkit-file-upload-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
@include opacity(0.4);
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $text-dark-grey;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
@include opacity(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: #444;
|
||||
text-shadow: 0 1px 0 #fafafa;
|
||||
|
||||
img {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.loading {
|
||||
@include opacity(0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#publisher_textarea_wrapper {
|
||||
#hide_publisher {
|
||||
@include opacity(0.3);
|
||||
z-index: 5;
|
||||
padding: 3px;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
margin-top: 9px;
|
||||
|
||||
.icons-deletelabel {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
@include border-radius(2px);
|
||||
|
||||
border: 1px solid #ccc;
|
||||
background: #fff;
|
||||
|
||||
&.active {
|
||||
border: 1px solid $border-dark-grey;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
padding-right: 10px;
|
||||
|
||||
textarea {
|
||||
z-index: 2;
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.with_attachments {
|
||||
padding-bottom: 38px;
|
||||
}
|
||||
|
||||
#photodropzone {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 35px;
|
||||
width: 430px;
|
||||
left: 5px;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
img {
|
||||
width: 50px;
|
||||
max-height: 55px;
|
||||
}
|
||||
.circle {
|
||||
@include border-radius(20px);
|
||||
|
||||
display: none;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: -7px;
|
||||
top: -5px;
|
||||
background-color: #333;
|
||||
|
||||
width: 20px;
|
||||
max-width: 20px;
|
||||
height: 20px;
|
||||
max-height: 20px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.x {
|
||||
display: none;
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -1px;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: default;
|
||||
.circle {
|
||||
display: block;
|
||||
}
|
||||
.x {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.counter {
|
||||
position: absolute;
|
||||
font-size: 13px;
|
||||
padding: 12px 0 0 5px;
|
||||
}
|
||||
.warning {
|
||||
color: orange;
|
||||
}
|
||||
.exceeded {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
#publisher.closed {
|
||||
#publisher_textarea_wrapper {
|
||||
#hide_publisher {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#publisher_photo_upload {
|
||||
position: absolute;
|
||||
display: inline;
|
||||
left: 600px;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#publisher-images {
|
||||
#locator {
|
||||
bottom: 1px !important;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
position: absolute !important;
|
||||
right: 30px;
|
||||
cursor: pointer;
|
||||
img {
|
||||
padding-top: 2px;
|
||||
@include opacity(0.4);
|
||||
}
|
||||
&:hover {
|
||||
color: $text-dark-grey;
|
||||
cursor: pointer;
|
||||
img {
|
||||
@include opacity(0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue