nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Using mixins for aspects css style

Browse source
This commit is contained in:
Thorsten Claus 2022-09-02 22:30:29 +02:00
parent 8e01a66cb5
commit 65456c7f5e
5 changed files with 30 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/assets/stylesheets/_mixins.scss
View file

@ -1,7 +1,7 @@
/* Mixin file for sass. Here is where we define our variables and /* Mixin file for sass. Here is where we define our variables and
browser compatability functions used in all scss/sass files */ browser compatability functions used in all scss/sass files */
/* Transision defaults */ // Transition defaults
$speed: 0.1s; $speed: 0.1s;
$easing: linear; $easing: linear;
@ -138,3 +138,21 @@ $default-border-radius: 3px;
.glyphicon-ok { display: none;} .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;
}
}
}

15
app/assets/stylesheets/aspects.scss
View file

@ -1,26 +1,19 @@
@import 'mixins';
.aspect-dropdown { .aspect-dropdown {
li { li {
@include selectable-list; @include selectable-list;
@include aspect-dropdown-link(1em);
.status_indicator { .status_indicator {
width: 19px; width: 19px;
height: 14px; height: 14px;
display: inline-block; display: inline-block;
} }
a {
.text {
color: #333333;
}
&:hover {
background: $background-grey;
}
cursor: pointer;
padding-left: 10px;
}
} }
} }
.aspect-membership { .aspect-membership {
max-height: 300px; max-height: 300px;
overflow: auto; overflow: auto;

20
app/assets/stylesheets/mobile/mobile.scss
View file

@ -676,28 +676,10 @@ input#q.search {
margin-bottom: 20px; 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 { .aspect-dropdown {
li { li {
@include selectable-list; @include selectable-list;
@include aspect-dropdown-link; @include aspect-dropdown-link(128%);
.status-indicator { .status-indicator {
display: inline-block; display: inline-block;

8
app/assets/stylesheets/mobile/settings.scss
View file

@ -56,10 +56,8 @@
width: 50px; width: 50px;
} }
} }
}
.user-language, select {
.user-color-theme, padding: 3px;
.aspect-id { }
padding: 3px;
} }

6
app/views/users/_edit.haml
View file

@ -62,7 +62,7 @@
%h3= t(".change_language") %h3= t(".change_language")
= form_for "user", url: edit_user_path, html: {method: :put} do |f| = form_for "user", url: edit_user_path, html: {method: :put} do |f|
.form-inline.clearfix .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" = f.submit t(".change_language"), class: "btn btn-primary pull-right"
%hr %hr
@ -71,7 +71,7 @@
%h3= t(".change_color_theme") %h3= t(".change_color_theme")
= form_for "user", url: edit_user_path, html: {method: :put} do |f| = form_for "user", url: edit_user_path, html: {method: :put} do |f|
.form-inline.clearfix .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" = f.submit t(".change_color_theme"), class: "btn btn-primary pull-right"
%hr %hr
@ -110,7 +110,7 @@
= f.select :auto_follow_back_aspect_id, = f.select :auto_follow_back_aspect_id,
aspect_options_for_select(current_user.aspects), aspect_options_for_select(current_user.aspects),
{}, {},
class: "form-control aspect-id" class: "form-control"
.small-horizontal-spacer .small-horizontal-spacer
.clearfix= f.submit t(".change"), class: "btn btn-primary pull-right" .clearfix= f.submit t(".change"), class: "btn btn-primary pull-right"