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