Using mixins for aspects css style
This commit is contained in:
parent
8e01a66cb5
commit
65456c7f5e
5 changed files with 30 additions and 39 deletions
|
|
@ -1,7 +1,7 @@
|
|||
/* Mixin file for sass. Here is where we define our variables and
|
||||
browser compatability functions used in all scss/sass files */
|
||||
|
||||
/* Transision defaults */
|
||||
// Transition defaults
|
||||
$speed: 0.1s;
|
||||
$easing: linear;
|
||||
|
||||
|
|
@ -138,3 +138,21 @@ $default-border-radius: 3px;
|
|||
.glyphicon-ok { display: none;}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin aspect-dropdown-link($anchor-size) {
|
||||
$link-text-color: #333;
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
|
||||
.text {
|
||||
color: $link-text-color;
|
||||
font-size: $anchor-size;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $background-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,19 @@
|
|||
@import 'mixins';
|
||||
|
||||
.aspect-dropdown {
|
||||
|
||||
li {
|
||||
@include selectable-list;
|
||||
@include aspect-dropdown-link(1em);
|
||||
|
||||
.status_indicator {
|
||||
width: 19px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
.text {
|
||||
color: #333333;
|
||||
}
|
||||
&:hover {
|
||||
background: $background-grey;
|
||||
}
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aspect-membership {
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -676,28 +676,10 @@ input#q.search {
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@mixin aspect-dropdown-link() {
|
||||
$link-text-color: #333;
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
|
||||
.text {
|
||||
color: $link-text-color;
|
||||
font-size: 128%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $background-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aspect-dropdown {
|
||||
li {
|
||||
@include selectable-list;
|
||||
@include aspect-dropdown-link;
|
||||
@include aspect-dropdown-link(128%);
|
||||
|
||||
.status-indicator {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -56,10 +56,8 @@
|
|||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-language,
|
||||
.user-color-theme,
|
||||
.aspect-id {
|
||||
padding: 3px;
|
||||
select {
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
%h3= t(".change_language")
|
||||
= form_for "user", url: edit_user_path, html: {method: :put} do |f|
|
||||
.form-inline.clearfix
|
||||
= f.select :language, available_language_options, {}, class: "form-control form-group user-language"
|
||||
= f.select :language, available_language_options, {}, class: "form-control form-group"
|
||||
= f.submit t(".change_language"), class: "btn btn-primary pull-right"
|
||||
%hr
|
||||
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
%h3= t(".change_color_theme")
|
||||
= form_for "user", url: edit_user_path, html: {method: :put} do |f|
|
||||
.form-inline.clearfix
|
||||
= f.select :color_theme, available_color_themes, {}, class: "form-control form-group color-theme"
|
||||
= f.select :color_theme, available_color_themes, {}, class: "form-control form-group"
|
||||
= f.submit t(".change_color_theme"), class: "btn btn-primary pull-right"
|
||||
%hr
|
||||
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
= f.select :auto_follow_back_aspect_id,
|
||||
aspect_options_for_select(current_user.aspects),
|
||||
{},
|
||||
class: "form-control aspect-id"
|
||||
class: "form-control"
|
||||
|
||||
.small-horizontal-spacer
|
||||
.clearfix= f.submit t(".change"), class: "btn btn-primary pull-right"
|
||||
|
|
|
|||
Loading…
Reference in a new issue