| .documentation { |
| padding-top: 0; |
| |
| h2 { |
| text-align: center; |
| text-transform: uppercase; |
| font-weight: 400; |
| font-size: 24px; |
| margin-top: 4em; |
| margin-bottom: 1em; |
| } |
| |
| h2:after { |
| content: " "; |
| display: block; |
| width: 200px; |
| border-bottom: 1px solid #dddddd; |
| border-top: 1px solid #dddddd; |
| margin: 1.5em auto 0; |
| height: 7px; |
| } |
| |
| p.intro { |
| text-align: center; |
| padding: 0 3em; |
| font-size: 16px; |
| margin-bottom: 2em; |
| } |
| |
| |
| .icons-list { |
| padding-left: 0; |
| |
| li { |
| list-style: none; |
| |
| |
| a { |
| color: #000; |
| text-align: center; |
| display: block; |
| width: 100%; |
| min-height: 8em; |
| font-size: 16px; |
| line-height: 1.6em; |
| margin-bottom: 4em;; |
| transition: all 0.4s ease-out; |
| |
| |
| svg { |
| margin: 0 auto; |
| display: block; |
| width: 3.5em; |
| height: 5em; |
| fill: #c8c8c8; |
| transition: all 0.4s ease-out; |
| } |
| |
| |
| } |
| a:after { |
| content:""; |
| border-right: 1px solid #cccccc; |
| height: 6em; |
| width: 1px; |
| float: right; |
| display: block; |
| position: absolute; right: 0; |
| top: calc(50% - 4em); |
| } |
| |
| a:hover { |
| color: theme-color('secondary'); |
| text-decoration: none; |
| > svg { |
| width: 4em; |
| fill: theme-color('secondary'); |
| } |
| } |
| } |
| |
| li:last-child, li:nth-child(4n) { |
| a:after { |
| display: none; |
| } |
| } |
| } |
| } |
| |
| |
| |
| /*** |
| * Styles for internal pages |
| */ |
| article { |
| |
| padding: 0px 0 80px; |
| font-size: 16px; |
| line-height: 2em; |
| |
| min-height: calc(100vh - 380px); // viewport height minus footer+header height |
| |
| header { |
| |
| background: -moz-linear-gradient(45deg, rgba(242,242,242,0) 91%, rgba(10,90,154,1) 91%, rgba(24,124,204,1) 100%); |
| background: -webkit-linear-gradient(45deg, rgba(242,242,242,0) 91%, rgba(10,90,154,1) 91%, rgba(24,124,204,1) 100%); |
| background: linear-gradient(45deg, rgba(242,242,242,0) 91%, rgba(10,90,154,1) 91%, rgba(24,124,204,1) 100%); |
| filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#187ccc",endColorstr="#187ccc",GradientType=1); |
| background-color: theme-color('gray'); |
| box-shadow: 0px 14px 30px 10px theme-color('gray'); |
| // color: #000000; |
| padding: 4rem 0 1rem; |
| margin-bottom: 5rem; |
| |
| h1 { |
| color: #000000; |
| } |
| } |
| |
| h1, h2 { |
| font-size: 36px; |
| font-weight: 300; |
| text-transform: uppercase; |
| margin-bottom: 0; |
| |
| strong { |
| font-weight: bold; |
| color: theme-color('primary') |
| } |
| } |
| |
| h2 { |
| font-size: 26px; |
| margin-top: 50px; |
| margin-bottom: 30px; |
| // clear: both; |
| } |
| |
| h3 { |
| font-size: 26px; |
| font-weight: 500; |
| margin-top: 40px; |
| margin-bottom: 20px; |
| } |
| |
| |
| |
| .fa-anchor { |
| font-size: 14px; |
| } |
| |
| p { |
| |
| } |
| |
| ul { |
| li { |
| margin-bottom: 1em; |
| } |
| } |
| |
| .tab-content { |
| margin-top: 30px; |
| margin-bottom: 40px; |
| } |
| |
| .jumbotron { |
| margin-top: 80px; |
| padding: 2rem; |
| clear: both; |
| |
| .title { |
| font-size: 26px; |
| font-weight: 500;; |
| } |
| } |
| |
| img.diagram-right { |
| max-width: 50%; |
| float: right; |
| height: auto; |
| margin: 0 0 2rem 2rem; |
| max-height: 600px; |
| |
| } |
| |
| .fact-question { |
| padding-bottom: 35px; |
| } |
| .nav-tabs > li > a { |
| margin-right: 2px; |
| line-height: 1.42857; |
| border: 1px solid transparent; |
| border-radius: 4px 4px 0 0; |
| } |
| .nav > li > a { |
| position: relative; |
| display: block; |
| padding: 10px 15px; |
| overflow: hidden; |
| } |
| .nav-tabs > li { |
| float: left; |
| margin-bottom: -1px; |
| } |
| .nav-tabs > li > a.active, .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { |
| color: #555555; |
| background-color: #fff; |
| border: 1px solid #ddd; |
| border-bottom-color: transparent; |
| cursor: default; |
| } |
| .nav-tabs { |
| border-bottom: 1px solid #ddd; |
| } |
| |
| #events { |
| .row-event { |
| margin-bottom: 4rem; |
| border-bottom: 2px #e1e1e1 dotted; |
| padding-bottom: 2rem; |
| |
| .round-icon-block { |
| background-color: theme-color('gray'); |
| border-radius: 10px; |
| padding: 1rem; |
| |
| img { |
| margin: 0 auto; |
| max-width: 75%; |
| |
| display: block; |
| } |
| p { |
| text-align: center; |
| margin-top: 10px; |
| font-weight: 300; |
| strong { |
| color: theme-color('primary') !important; |
| font-weight: bold; |
| } |
| } |
| } |
| |
| h3 { |
| margin-top: 0; |
| margin-bottom: 10px; |
| } |
| |
| |
| p { |
| margin-top: 1rem; |
| |
| } |
| |
| .event-date { |
| font-size: 16px; |
| color: #666; |
| margin-bottom: 0px; |
| line-height: 1.5em; |
| } |
| .event-date:before { |
| content: "•"; |
| font-size: 22px; |
| color: theme-color('secondary'); |
| display: inline-block; |
| margin-right: 5px; |
| line-height: 1.5em; |
| vertical-align: middle; |
| } |
| } |
| |
| |
| } |
| |
| #meetups-groups { |
| |
| #meetups-tabs { |
| .round-icon-block-tab { |
| background-color: theme-color('gray'); |
| border-radius: 10px; |
| padding: 5px; |
| display: block; |
| float: left; |
| margin-right: 8px; |
| |
| img { |
| margin: 0px auto; |
| max-width: 20px; |
| width: 20px; |
| display: block; |
| } |
| } |
| .continent { |
| display: block; |
| float: left; |
| } |
| .active .continent { |
| font-weight: bold; |
| padding-top: 1px; |
| } |
| } |
| .meet-groups { |
| h4 { |
| font-size: 1.2rem; |
| font-weight: 600; |
| |
| } |
| |
| ul { |
| padding-bottom: 25px; |
| } |
| } |
| } |
| |
| #screencasts { |
| a.video { |
| display: block; |
| background-color: theme-color('gray'); |
| background-size: 100%; |
| width: 90%; |
| padding: 1rem 0; |
| text-align: center; |
| font-size: 18px; |
| margin: 0 auto; |
| border-top: 5px solid #000; |
| border-bottom: 5px solid #000; |
| |
| p { |
| line-height: 1.8em; |
| font-weight: 300; |
| color: theme-color('secondary'); |
| text-transform: uppercase; |
| |
| margin-bottom: 0; |
| } |
| span { |
| font-size: 15px; |
| color: #666666; |
| } |
| } |
| a:after { |
| content: "\f16a"; |
| font-family: FontAwesome; |
| font-size: 32px; |
| color: theme-color('secondary'); |
| display: block; |
| } |
| a:hover { |
| text-decoration: none;; |
| } |
| } |
| |
| .btn-group-export { |
| float: right; |
| |
| .table-export-options { |
| padding: 1rem; |
| |
| li { |
| text-align: center; |
| a { |
| display: block; |
| width: 100%; |
| transition: background-color 500ms ease-out; |
| } |
| a:hover { |
| background-color: theme-color('gray'); |
| text-decoration: none; |
| } |
| } |
| li:last-child { |
| margin-bottom: 0; |
| } |
| } |
| } |
| } |
| |
| |
| .modal-dialog { |
| |
| .modal-content { |
| button.close { |
| width: 40px; |
| position: absolute; |
| right: 10px; |
| top: 10px; |
| } |
| |
| } |
| } |
| |
| #diagramModal { |
| .modal-dialog { |
| max-width: 90vw !important; |
| |
| .modal-content { |
| height: 95vh; |
| |
| |
| |
| img { |
| height: 95vh; |
| max-width: 60vw; |
| margin: 0 auto; |
| } |
| } |
| } |
| } |
| |
| #videoModal { |
| .modal-dialog { |
| max-width: 68vw; |
| |
| .modal-content { |
| .modal-header { |
| h4 { |
| font-weight: 300; |
| } |
| } |
| .modal-body { |
| iframe { |
| width: 100% !important; |
| height: 40vw !important; |
| } |
| } |
| } |
| } |
| } |
| |
| // Medium devices (tablets, less than 992px) |
| // @media (max-width: 991.98px) { ... } |
| @include media-breakpoint-down(md) { |
| |
| |
| |
| article { |
| header { |
| padding-top: 3rem; |
| h1 { |
| font-size: 32px; |
| } |
| } |
| |
| #screencasts { |
| a.video { |
| font-size: 16px; |
| width: 100%; |
| |
| p { |
| |
| } |
| span { |
| font-size: 13px; |
| } |
| } |
| a:after { |
| |
| font-size: 28px; |
| } |
| |
| } |
| |
| #videoModal { |
| .modal-dialog { |
| max-width: 96vw; |
| |
| .modal-content { |
| |
| .modal-body { |
| iframe { |
| |
| height: 60vw !important; |
| } |
| } |
| } |
| } |
| } |
| } |
| |
| } |
| |
| |
| |
| |
| // Small devices (landscape phones, less than 768px) |
| // @media (max-width: 767.98px) { ... } |
| @include media-breakpoint-down(sm) { |
| |
| article { |
| img.diagram-right { |
| max-width: 100%; |
| float: right; |
| margin: 1rem; |
| } |
| |
| |
| #screencasts { |
| a.video { |
| font-size: 19px; |
| max-width: 50vw; |
| height: 28vw; |
| margin-bottom: 2em; |
| |
| span { |
| font-size: 15px; |
| } |
| } |
| a:after { |
| |
| font-size: 34px; |
| } |
| |
| } |
| } |
| |
| |
| |
| } |
| |
| |
| |
| // Extra small devices (portrait phones, less than 576px) |
| // @media (max-width: 575.98px) { ... } |
| @include media-breakpoint-down(xs) { |
| |
| |
| article { |
| header { |
| margin-bottom: 2rem; |
| padding-top: 2.5rem; |
| h1 { |
| font-size: 28px; |
| } |
| } |
| |
| img.diagram-right { |
| float: none; |
| margin: 1rem auto; |
| max-width: 100% !important; |
| } |
| |
| .jumbotron { |
| padding: 1rem; |
| .title { |
| font-size: 24px; |
| |
| } |
| .my-4 { |
| margin-bottom: 1rem !important; |
| margin-top: 1rem !important; |
| } |
| } |
| .fact-question { |
| padding-bottom: 1rem; |
| |
| h3 { |
| font-size: 22px; |
| margin-top: 1rem; |
| |
| } |
| } |
| .usecase-video { |
| iframe { |
| width: 100% !important; |
| |
| } |
| } |
| .documentation { |
| h2 { |
| margin-top: 2em; |
| } |
| .icons-list { |
| li { |
| a { |
| margin-bottom: 2em; |
| } |
| } |
| li:last-child, li:nth-child(2n) { |
| a:after { |
| display: none; |
| } |
| } |
| } |
| } |
| #screencasts { |
| a.video { |
| max-width: 100%; |
| height: 10em; |
| margin-bottom: 1em; |
| |
| |
| } |
| |
| |
| } |
| } |
| |
| } |
| |
| |
