privacyguides/privacytools.io
Archived
1
0
Fork 0
Code Issues 304 Pull Requests 47 Activity

Rewrite custom css to sass and add variables

Browse Source
This commit is contained in:
Vincevrp 2018-11-07 19:15:02 +01:00
parent c5c26cbbf7
commit ee255a3f13
2 changed files with 98 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
_sass/_vars.scss Normal file
View File

@ -0,0 +1,26 @@
/* Variables */
/* Cards */
$card-shadow: 0 3px 10px 0 rgba(150, 150, 150, .2);
$card-succes-border: rgba(40, 167, 69, .5);
$card-primary-border: rgba(0, 123, 255, .5);
$card-warning-border: rgba(255, 193, 7, .5);
/* Blockquote */
$blockquote-border: #eee;
/* Share button */
$share-btn: #fff;
$share-btn-shadow: 0 2px 0 0 rgba(0, 0, 0, .2);
$share-btn-hover: #eee;
$share-btn-active: #e2e2e2;
/* Social */
$twitter: #55acee;
$google: #dd4b39;
$facebook: #3b5998;
$stumbleupon: #eb4823;
$reddit: #ff5700;
$linkedin: #4875b4;
$email: #444;
$diaspora: #2f3537;

103
assets/css/style.scss
View File

@ -1,6 +1,7 @@
--- ---
--- ---
@import '_vars';
@import 'bootstrap'; @import 'bootstrap';
@import 'flag-icon'; @import 'flag-icon';
@import 'fontawesome'; @import 'fontawesome';
@ -9,54 +10,75 @@
/* BS4 */ /* BS4 */
.card { .card {
box-shadow: 0 3px 10px 0 rgba(150,150,150,0.2) !important; box-shadow: $card-shadow !important;
} }
/* Make links and long strings responsive */ /* Make links and long strings responsive */
a, .long-string-list li { a,
.long-string-list {
li {
word-wrap: break-word; word-wrap: break-word;
}
} }
/*.card-success, */ .card-success .card-header { /*.card-success, */
border-color: rgba(40, 167, 69, 0.5) !important; .card-success {
.card-header {
border-color: $card-succes-border !important;
}
} }
/*.card-primary, */ .card-primary .card-header { /*.card-primary, */
border-color: rgba(0, 123, 255, 0.5) !important; .card-primary {
.card-header {
border-color: $card-primary-border !important;
}
} }
/*.card-warning, */ .card-warning .card-header { /*.card-warning, */
border-color: rgba(255, 193, 7, 0.5) !important; .card-warning {
.card-header {
border-color: $card-warning-border !important;
}
} }
.blockquote { .blockquote {
border-left: 5px solid #eee; border-left: 5px solid $blockquote-border;
padding: 10px 20px;
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1.35; line-height: 1.35;
padding: 10px 20px;
} }
.theme-dropdown .dropdown-menu { .theme-dropdown {
position: static; .dropdown-menu {
display: block; display: block;
margin-bottom: 20px; margin-bottom: 20px;
position: static;
}
} }
.theme-showcase > p > .btn { .theme-showcase {
p > .btn {
margin: 5px 0; margin: 5px 0;
} }
.theme-showcase .navbar .container { .navbar {
.container {
width: auto; width: auto;
}
}
} }
.anchor:target {
padding-top: 4rem; .anchor {
&:target {
margin-top: -4rem; margin-top: -4rem;
padding-top: 4rem;
}
} }
.anchor-icon { .anchor-icon {
font-size: 0.8em; font-size: .8em;
} }
.panel-item { .panel-item {
@ -65,34 +87,35 @@ a, .long-string-list li {
} }
.share-btn { .share-btn {
border: 0;
box-shadow: $share-btn-shadow;
color: $share-btn;
display: inline-block; display: inline-block;
color: #ffffff; opacity: .9;
border: none;
padding: 1em;
width: 8em;
opacity: 0.9;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
outline: none; outline: none;
padding: 1em;
text-align: center; text-align: center;
} width: 8em;
.share-btn:hover { &:hover {
color: #eeeeee; color: $share-btn-hover;
} }
.share-btn:active { &:active {
box-shadow: none;
color: $share-btn-active;
outline: none;
position: relative; position: relative;
top: 2px; top: 2px;
box-shadow: none; }
color: #e2e2e2;
outline: none;
} }
.share-btn.twitter { background: #55acee; } .twitter { background: $twitter; }
.share-btn.google-plus { background: #dd4b39; } .google-plus { background: $google; }
.share-btn.facebook { background: #3B5998; } .facebook { background: $facebook; }
.share-btn.stumbleupon { background: #EB4823; } .stumbleupon { background: $stumbleupon; }
.share-btn.reddit { background: #ff5700; } .reddit { background: $reddit; }
.share-btn.linkedin { background: #4875B4; } .linkedin { background: $linkedin; }
.share-btn.email { background: #444444; } .email { background: $email; }
.share-btn.diaspora { background: #2f3537; } .diaspora { background: $diaspora; }