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
Download Patch File Download Diff File Expand all files Collapse all files

121
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 {
word-wrap: break-word;
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;
display: block;
margin-bottom: 20px;
.theme-dropdown {
.dropdown-menu {
display: block;
margin-bottom: 20px;
position: static;
}
}
.theme-showcase > p > .btn {
margin: 5px 0;
.theme-showcase {
p > .btn {
margin: 5px 0;
}
.navbar {
.container {
width: auto;
}
}
}
.theme-showcase .navbar .container {
width: auto;
}
.anchor:target {
padding-top: 4rem;
margin-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;
opacity: .9;
outline: none;
padding: 1em;
width: 8em;
opacity: 0.9;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
outline: none;
text-align: center;
width: 8em;
&:hover {
color: $share-btn-hover;
}
&:active {
box-shadow: none;
color: $share-btn-active;
outline: none;
position: relative;
top: 2px;
}
}
.share-btn:hover {
color: #eeeeee;
}
.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; }
.share-btn:active {
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; }