[tor-commits] [lego/master] Merge commit 'e9e737e0c6ed288af07efc179f488ddf2eb504ce' into vertical
hiro at torproject.org
hiro at torproject.org
Tue Apr 7 16:02:15 UTC 2020
commit e444c3eef0b65982916f0dd017f14f4427bd2c16
Merge: 7ff2abb e9e737e
Author: hiro <hiro at torproject.org>
Date: Tue Apr 7 18:01:03 2020 +0200
Merge commit 'e9e737e0c6ed288af07efc179f488ddf2eb504ce' into vertical
Fix the alignment of the toggles #16
From https://github.com/nicoleiocana/lego/tree/vertically-align-the-toggles-in-the-middle-along-adjacent-text#9
assets/scss/_tor.scss | 1 +
1 file changed, 1 insertion(+)
diff --cc assets/scss/_tor.scss
index a127234,0000000..380b798
mode 100644,000000..100644
--- a/assets/scss/_tor.scss
+++ b/assets/scss/_tor.scss
@@@ -1,864 -1,0 +1,865 @@@
+/*
+ * Base structure
+ */
+
+/* Move down content because we have a fixed navbar that is 10rem tall */
+.page {
+ padding-top: 2em;
+}
+
+/* Reset */
+
+.no-border {
+ border: none;
+}
+
+.no-background {
+ background-image: none !important;
+}
+
+.content-scroll {
+ position: relative;
+}
+
+.dropdown-select select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none; /* remove default arrow */
+}
+
+.dropdown-select:after {
+ content: '⏷';
+ position: absolute;
+ left: 85%;
+ right: 0;
+ top: 15%;
+ bottom: 0;
+ color: $white;
+}
+
+// toggle buttons for animations
+
+.toggle {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ width: 62px;
+ height: 32px;
+ display: inline-block;
+ position: relative;
+ border-radius: 50px;
+ overflow: hidden;
+ outline: none;
+ border: none;
+ cursor: pointer;
+ background-color: #707070;
+ transition: background-color ease 0.3s;
++ vertical-align:middle;
+}
+
+.toggle:before {
+ content: "on off";
+ display: block;
+ position: absolute;
+ z-index: 2;
+ width: 28px;
+ height: 28px;
+ background: #fff;
+ left: 2px;
+ top: 2px;
+ border-radius: 50%;
+ font: 10px/28px Helvetica;
+
+ font-weight: bold;
+ text-indent: -22px;
+ word-spacing: 37px;
+ color: #fff;
+ text-shadow: -1px -1px rgba(0,0,0,0.15);
+ white-space: nowrap;
+ box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+ transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
+}
+
+.toggle:checked {
+ background-color: #4CD964;
+}
+
+.toggle:checked:before {
+ left: 32px;
+}
+
+
+#https-switch:checked ~ #https-content {
+ display: inline;
+}
+
+#https-switch:checked ~ #http-content {
+ display: none;
+}
+
+#tor-switch:checked ~ #http-content {
+ display: none;
+}
+
+#tor-switch:checked ~ #tor-content {
+ display: inline;
+}
+
+#https-switch:checked ~ #tor-switch:checked ~ .switch-on {
+ display: inline;
+}
+
+#https-switch:checked ~ #tor-switch:checked ~ .switch-off {
+ display: none;
+}
+
+#https-content {
+ display: none;
+}
+
+#tor-content {
+ display: none;
+}
+
+#https-tor-content {
+ display: none;
+}
+
+// Define darker background
+.bg-darker{
+ background-color: $purple-darker;
+}
+
+/*
+ * Typography
+ */
+
+ at font-face {
+ font-family: Source Sans Pro;
+ src: url('fonts/SourceSansPro/SourceSansPro-Regular.ttf');
+}
+
+ at font-face {
+ font-family: Source Sans Pro Light;
+ src: url('fonts/SourceSansPro/SourceSansPro-Light.ttf');
+}
+
+ at font-face {
+ font-family: Source Sans Pro Bold;
+ src: url('fonts/SourceSansPro/SourceSansPro-Bold.ttf');
+}
+
+ at font-face {
+ font-family: Source Serif Pro;
+ src: url('fonts/SourceSerifPro/SourceSerifPro-Regular.ttf');
+}
+
+ at font-face {
+ font-family: Source Code Pro;
+ src: url('fonts/SourceCodePro/SourceCodePro-Regular.ttf');
+}
+
+ at font-face {
+ font-family: Tor Icons;
+ src: url('fonts/TorIcons/tor-icons.eot?#iefix') format('embedded-opentype'),
+ url('fonts/TorIcons/tor-icons.woff2') format('woff2'),
+ url('fonsts/TorIcons/tor-icons.woff') format('woff'),
+ url('fonts/TorIcons/tor-icons.ttf') format('truetype'),
+ url('fonts/TorIcons/tor-icons.svg?#tor-icons') format('svg');
+}
+
+.ti:before {
+ font-family: Tor Icons !important;
+ font-style: normal;
+ font-weight: normal !important;
+ vertical-align: top;
+}
+
+.ti-authority:before {
+ content: "\f101";
+}
+.ti-badexit:before {
+ content: "\f102";
+}
+.ti-bridge:before {
+ content: "\f103";
+}
+.ti-country:before {
+ content: "\f104";
+}
+.ti-directory:before {
+ content: "\f105";
+}
+.ti-exit:before {
+ content: "\f106";
+}
+.ti-fallbackdir:before {
+ content: "\f107";
+}
+.ti-fast:before {
+ content: "\f108";
+}
+.ti-fingerprint:before {
+ content: "\f109";
+}
+.ti-guard:before {
+ content: "\f10a";
+}
+.ti-hibernating:before {
+ content: "\f10b";
+}
+.ti-hsdir:before {
+ content: "\f10c";
+}
+.ti-ipv4:before {
+ content: "\f10d";
+}
+.ti-ipv6:before {
+ content: "\f10e";
+}
+.ti-ipv6exit:before {
+ content: "\f10f";
+}
+.ti-noedconsensus:before {
+ content: "\f110";
+}
+.ti-notrecommended:before {
+ content: "\f111";
+}
+.ti-onion-alt:before {
+ content: "\f112";
+}
+.ti-onion:before {
+ content: "\f113";
+}
+.ti-reachableipv4:before {
+ content: "\f114";
+}
+.ti-reachableipv6:before {
+ content: "\f115";
+}
+.ti-relay:before {
+ content: "\f116";
+}
+.ti-running:before {
+ content: "\f117";
+}
+.ti-stable:before {
+ content: "\f118";
+}
+.ti-tshirt:before {
+ content: "\f119";
+}
+.ti-unmeasured:before {
+ content: "\f11a";
+}
+.ti-unreachableipv4:before {
+ content: "\f11b";
+}
+.ti-unreachableipv6:before {
+ content: "\f11c";
+}
+.ti-v2dir:before {
+ content: "\f11d";
+}
+.ti-valid:before {
+ content: "\f11e";
+}
+
+.display-1,
+.display-2,
+.display-3,
+.display-4 {
+ font-family: Source Sans Pro Light;
+}
+
+.font-family-serif {
+ font-family: $font-family-serif !important;
+}
+.font-weight-light {
+ font-family: Source Sans Pro Light
+}
+.font-weight-bold {
+ font-family: Source Sans Pro Bold
+ }
+
+small, .small{
+ font-size: 90%;
+}
+
+h6 {
+
+ font-weight: bold;
+ color: $purple;
+}
+p {
+ font-size: 1.3rem; // We need at least 18px minuim +_+
+ color: $gray-900;
+ line-height: 2rem;
+}
+.display-5 {
+ font-size: 1.5em;
+}
+.display-6 {
+ font-size: 1.3em
+}
+mark, .mark {
+ color: $purple;
+}
+
+.bd-sidebar{
+ border: 0 !important;
+}
+.bd-toc{
+ order: 0 !important;
+}
+
+#components-nav .nav-pills .nav-link,
+#visuals-nav .nav-pills .nav-link{
+ border-radius: 0;
+}
+#components-nav .nav-pills .nav-link.active,
+#visuals-nav .nav-pills .nav-link.active{
+ background-color: $white;
+ color: $purple;
+ border-left: 2px solid $purple;
+ font-weight: bold;
+}
+
+/*
+ * Nav
+ */
+.navbar {
+ background-image: url('./images/onion-bg.svg');
+ background-repeat: no-repeat;
+ background-position: 10px 12px;
+}
+
+.navbar-brand {
+ span {
+ font-size: 0.6em;
+ display: flex;
+ }
+}
+
+.nav-link {
+ display: block;
+ padding: 1rem;
+}
+
+/*
+ * Sidebar
+ */
+
+.sidetopics {
+ z-index: 1000;
+ padding: 20px 0;
+ border-right: 1px solid #eee;
+}
+
+.sidetopics .nav {
+ margin-bottom: 20px;
+}
+
+.sidetopics .nav-item {
+ width: 100%;
+}
+
+.sidetopics .nav-item + .nav-item {
+ margin-left: 0;
+}
+
+.sidetopics .nav-link {
+ border-radius: 0;
+}
+
+.toc-h4 {
+ padding-left: 0.8em;
+ font-size: 0.9em;
+}
+
+// Styleguide Nav Update
+
+// All levels of nav
+.bd-sidebar .nav > li > a {
+ font-size: 100%;
+ color: rgba(0, 0, 0, .85);
+}
+
+.bd-sidebar .nav > li > a:hover {
+ color: $purple !important;
+ text-decoration: none;
+}
+
+#bd-docs-nav{
+ padding-top: 2rem;
+}
+
+.dropdown{
+ display: block;
+}
+
+.dropdown-menu {
+ margin: 0;
+ display: none;
+}
+
+.dropdown:hover .dropdown-menu {
+ display: block;
+ overflow-y: scroll;
+ max-height: 350px;
+}
+
+.dropdown .btn {
+ border-radius: 0;
+}
+
+.btn {text-transform: none;}
+
+label {
+ cursor: pointer;
+}
+
+#menu-toggle {
+ display: none; /* hide the checkbox */
+}
+
+#nav-toggle {
+ display: none; /* hide the checkbox */
+}
+
+.side-toggler {
+ float:right !important;
+}
+
+#menu-toggle:checked + .burger-menu {
+ display: block;
+}
+
+#nav-toggle:checked + .hamburger-menu {
+ display: block;
+}
+
+.navbar-toggler:hover .chevron-up {
+ display: block !important;
+}
+
+.navbar-toggler:hover .chevron-down {
+ display: none;
+}
+
+a.side-nav.active {
+ color: $primary !important;
+}
+
+.smalltopics {
+ display: none;
+}
+
+.chevron {
+ height: 50px;
+ width: 50px;
+ margin: -10px -1px 1px -1px;
+}
+
+.chevron-up {
+ display: none !important;
+ top: 10px !important;
+}
+
+.chevron-down {
+ display: block;
+ top: 10px !important;
+}
+
+/*
+ * Dashboard
+ */
+
+/* Placeholders */
+.placeholders {
+ padding-bottom: 3rem;
+}
+
+.placeholder img {
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+}
+
+/*
+ * Forms
+ */
+.form-wide {
+ width: 100% !important;
+
+ input {
+ padding: 20px !important;
+ }
+}
+
+//
+// Text variations
+//
+
+.text-tpo {
+ font-family: $font-family-sans;
+ font-size: 1.1rem;
+ font-weight: 400;
+ line-height: 1.7rem;
+}
+
+
+//
+// Badges
+//
+.badge{
+
+}
+
+//
+// Breadcrumbs
+//
+.breadcrumb{
+ background-color: $white;
+}
+
+//
+// Cards
+//
+.card-body p{
+ font-size: 1.1rem;
+ line-height: 1.7rem;
+}
+
+//
+// Tables
+//
+
+table {
+ width: 100%;
+ max-width: 100%;
+ margin-bottom: $spacer;
+ background-color: $table-bg; // Reset for nesting within parents with `background-color`.
+
+ th,
+ td {
+ padding: $table-cell-padding;
+ vertical-align: top;
+ border-top: $table-border-width solid $table-border-color;
+ }
+
+ thead th {
+ vertical-align: bottom;
+ border-bottom: (2 * $table-border-width) solid $table-border-color;
+ }
+
+ tbody + tbody {
+ border-top: (2 * $table-border-width) solid $table-border-color;
+ }
+
+ .table {
+ background-color: $body-bg;
+ }
+
+ tbody tr:nth-of-type(odd) {
+ background-color: $table-accent-bg;
+ }
+}
+
+.table-striped td{
+ border: 0 !important;
+}
+
+//
+// Callouts
+//
+.bd-callout {
+ padding: 1.25rem;
+ margin-top: 1.25rem;
+ margin-bottom: 1.25rem;
+ border: 1px solid #eee;
+ border-left-width: .25rem;
+ border-radius: .25rem;
+}
+
+.bd-callout h4 {
+ margin-top: 0;
+ margin-bottom: .25rem;
+}
+
+.bd-callout p:last-child {
+ margin-bottom: 0;
+}
+
+.bd-callout code {
+ border-radius: .25rem;
+}
+
+.bd-callout + .bd-callout {
+ margin-top: -.25rem;
+}
+
+// Images
+
+.image-thumb {
+ object-fit: cover;
+ width: 100px;
+ height: 100px;
+}
+
+// Variations
+ at mixin bs-callout-variant($color) {
+ border-left-color: $color;
+
+ h4 { color: $color; }
+}
+
+.bd-callout-info { @include bs-callout-variant($bd-info); }
+.bd-callout-warning { @include bs-callout-variant($bd-warning); }
+.bd-callout-danger { @include bs-callout-variant($bd-danger); }
+
+// Styleguide Nav Update
+
+// All levels of nav
+.bd-sidebar .nav > li > a {
+ color: rgba(0, 0, 0, .85);
+}
+
+.bd-sidebar .nav > li > a:hover {
+ color: $purple !important;
+ text-decoration: none;
+}
+
+#bd-docs-nav{
+ padding-top: 2rem;
+}
+
+// stylelint-disable declaration-block-single-line-max-declarations
+
+.hll { background-color: #ffc; }
+.c { color: #999; }
+.k { color: #069; }
+.o { color: #555; }
+.cm { color: #999; }
+.cp { color: #099; }
+.c1 { color: #999; }
+.cs { color: #999; }
+.gd { background-color: #fcc; border: 1px solid #c00; }
+.ge { font-style: italic; }
+.gr { color: #f00; }
+.gh { color: #030; }
+.gi { background-color: #cfc; border: 1px solid #0c0; }
+.go { color: #aaa; }
+.gp { color: #009; }
+.gu { color: #030; }
+.gt { color: #9c6; }
+.kc { color: #069; }
+.kd { color: #069; }
+.kn { color: #069; }
+.kp { color: #069; }
+.kr { color: #069; }
+.kt { color: #078; }
+.m { color: #f60; }
+.s { color: #d44950; }
+.na { color: #4f9fcf; }
+.nb { color: #366; }
+.nc { color: #0a8; }size
+.no { color: #360; }
+.nd { color: #99f; }
+.ni { color: #999; }
+.ne { color: #c00; }
+.nf { color: #c0f; }
+.nl { color: #99f; }
+.nn { color: #0cf; }
+.nt { color: #2f6f9f; }
+.nv { color: #033; }
+.ow { color: #000; }
+.w { color: #bbb; }
+.mf { color: #f60; }
+.mh { color: #f60; }
+.mi { color: #f60; }
+.mo { color: #f60; }
+.sb { color: #c30; }
+.sc { color: #c30; }
+.sd { font-style: italic; color: #c30; }
+.s2 { color: #c30; }
+.se { color: #c30; }
+.sh { color: #c30; }
+.si { color: #a00; }
+.sx { color: #c30; }
+.sr { color: #3aa; }
+.s1 { color: #c30; }
+.ss { color: #fc3; }
+.bp { color: #366; }
+.vc { color: #033; }
+.vg { color: #033; }
+.vi { color: #033; }
+.il { color: #f60; }
+
+.css .o,
+.css .o + .nt,
+.css .nt + .nt { color: #999; }
+
+.language-bash::before,
+.language-sh::before {
+ color: #009;
+ content: "$ ";
+ user-select: none;
+}
+
+.language-powershell::before {
+ color: #009;
+ content: "PM> ";
+ user-select: none;
+}
+
+.text-primary-light {
+ color: $bd-purple-light;
+}
+
+.dropdown{
+ display: block;
+}
+
+.dropdown-menu {
+ display: none;
+}
+
+.dropdown:hover .dropdown-menu {
+ display: block;
+}
+
+.mobile {
+ display: none !important;
+}
+
+// Sticky menu
+.sticky {
+ position: sticky;
+ top: 105px;
+ z-index: 999;
+}
+
+// Small devices (landscape phones, less than 768px)
+ at include media-breakpoint-down(sm) {
+ .mobile {
+ display: block !important;
+ padding-top: 50px;
+ }
+
+ .display-1 {
+ font-size: 4rem;
+ }
+
+ .display-2 {
+ font-size: 3.5rem;
+ }
+
+ .display-3{
+ font-size: 2.5rem;
+ }
+
+ .display-4{
+ font-size: 2rem;
+ }
+
+}
+
+// Footer //
+
+.footer a.nav-link {
+ padding: 0.2rem;
+}
+footer .border{
+ border: 0 !important;
+ border-bottom: 1px solid rgba(255,255,255,0.3) !important;
+}
+.footer a.nav-link {
+ padding: 0.2rem;
+}
+
+label {
+ cursor: pointer;
+}
+
+#menu-toggle {
+ display: none; /* hide the checkbox */
+}
+
+#nav-toggle {
+ display: none; /* hide the checkbox */
+}
+
+.side-toggler {
+ float:right !important;
+}
+
+#menu-toggle:checked + .burger-menu {
+ display: block;
+}
+
+#nav-toggle:checked + .hamburger-menu {
+ display: block;
+}
+
+.navbar-toggler:hover .chevron-up {
+ display: block !important;
+}
+
+.navbar-toggler:hover .chevron-down {
+ display: none;
+}
+
+
+a.side-nav.active {
+ color: $primary !important;
+}
+
+.smalltopics {
+ display: none;
+}
+
+.chevron {
+ height: 50px;
+ width: 50px;
+ margin: -10px -1px 1px -1px;
+}
+
+.chevron-up {
+ display: none !important;
+ top: 10px !important;
+}
+.chevron-down {
+ display: block;
+ top: 10px !important;
+}
+
+
+// Small devices (landscape phones, less than 768px)
+ at include media-breakpoint-down(sm) {
+ nav.sidetopics {
+ display: none !important;
+ visibility: hidden !important;
+ }
+
+ nav.smalltopics {
+ display: block;
+ width:100%;
+ position: sticky;
+ padding-top: inherit;
+ }
+}
+
+
+// Tablet and Mobile menu
+ at include media-breakpoint-down(md) {
+ .nav-link {
+ padding-bottom: 1rem;
+ padding-top: 2rem;
+ font-size: 150%;
+ }
+}
+
+.no-gutters {
+ margin-bottom: 0 !important;
+}
More information about the tor-commits
mailing list