Convert sass to scss
This commit is contained in:
Pixelastic
parent
545cffa009
commit
d37e176c7f
@ -1,24 +0,0 @@
|
||||
.btn-static-theme,
|
||||
.btn-cta
|
||||
border: none
|
||||
color: #fff
|
||||
background-image: linear-gradient(80deg, $theme-color, #00A7FF)
|
||||
&:hover, &:focus
|
||||
color: #fff
|
||||
background-image: linear-gradient(80deg, $theme-color, #00A7FF)
|
||||
&:active, &.active
|
||||
background-image: linear-gradient(80deg, darken($theme-color, 4%), darken(#00A7FF, 4%))
|
||||
&.btn-shadow,
|
||||
&.btn-cta
|
||||
box-shadow: 0 2px 6px 0 rgba($theme-color, 0.4)
|
||||
&:hover, &:focus
|
||||
box-shadow: 0 4px 12px rgba($theme-color, 0.4)
|
||||
|
||||
svg
|
||||
width: 16px
|
||||
height: 16px
|
||||
vertical-align: middle
|
||||
margin-left: 0.5em
|
||||
|
||||
use
|
||||
fill: #fff
|
||||
24
docs-src/src/stylesheets/components/_buttons.scss
Normal file
24
docs-src/src/stylesheets/components/_buttons.scss
Normal file
@ -0,0 +1,24 @@
|
||||
.btn-static-theme,
|
||||
.btn-cta {
|
||||
border: none;
|
||||
color: #fff;
|
||||
background-image: linear-gradient(80deg, $theme-color, #00A7FF);
|
||||
&:hover, &:focus {
|
||||
color: #fff;
|
||||
background-image: linear-gradient(80deg, $theme-color, #00A7FF); }
|
||||
&:active, &.active {
|
||||
background-image: linear-gradient(80deg, darken($theme-color, 4%), darken(#00A7FF, 4%)); }
|
||||
&.btn-shadow,
|
||||
&.btn-cta {
|
||||
box-shadow: 0 2px 6px 0 rgba($theme-color, 0.4);
|
||||
&:hover, &:focus {
|
||||
box-shadow: 0 4px 12px rgba($theme-color, 0.4); } }
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.5em;
|
||||
|
||||
use {
|
||||
fill: #fff; } } }
|
||||
@ -1,498 +0,0 @@
|
||||
$sidebar-width: 260px
|
||||
$offset-height: 60px
|
||||
|
||||
.documentation-section,
|
||||
.examples-section
|
||||
padding-bottom: 300px
|
||||
|
||||
.container
|
||||
article
|
||||
width: 100%
|
||||
position: relative
|
||||
margin-top: 60px
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol
|
||||
font-size: 16px
|
||||
line-height: 22px
|
||||
|
||||
ul
|
||||
margin: 0
|
||||
position: relative
|
||||
|
||||
li
|
||||
padding: 0
|
||||
|
||||
ul
|
||||
padding: 0 1em
|
||||
|
||||
h2,h3,h4
|
||||
color: $bunting
|
||||
|
||||
h2:not(.text-lg)
|
||||
font-size: 28px
|
||||
padding-right: 1em
|
||||
padding-bottom: 8px
|
||||
|
||||
code
|
||||
background: rgba($royal-blue, 0.1)
|
||||
color: $royal-blue
|
||||
line-height: 1.4
|
||||
|
||||
&:first-of-type
|
||||
margin-top: 0
|
||||
|
||||
+small-mq
|
||||
font-size: 22px
|
||||
|
||||
h3
|
||||
font-size: 24px
|
||||
color: #201c38
|
||||
position: relative
|
||||
z-index: 10
|
||||
|
||||
h4
|
||||
font-size: 18px
|
||||
font-weight: normal
|
||||
|
||||
.api
|
||||
position: relative
|
||||
z-index: 2
|
||||
|
||||
tr td:first-child
|
||||
vertical-align: top
|
||||
|
||||
p, ul
|
||||
font-size: 90%
|
||||
margin: .5em 0
|
||||
line-height: 1.5em
|
||||
|
||||
ul
|
||||
padding-left: 1.5em
|
||||
|
||||
em
|
||||
text-decoration: underline
|
||||
font-style: normal
|
||||
|
||||
td.api-entry-name:only-child
|
||||
border-right: 1px solid #D0D0D0
|
||||
|
||||
|
||||
.documentation-container
|
||||
float: left
|
||||
position: relative
|
||||
left: #{$sidebar-width}
|
||||
width: calc(100% - #{$sidebar-width})
|
||||
min-height: 1000px
|
||||
padding-left: 60px
|
||||
padding-top: 60px
|
||||
|
||||
p img
|
||||
max-width: 100%
|
||||
|
||||
p, li
|
||||
color: rgba(32, 28, 56, 0.8)
|
||||
line-height: 2
|
||||
font-size: 16px
|
||||
font-family: 'Open Sans', Helvetica Neue, helvetica, sans-serif
|
||||
clear: both
|
||||
|
||||
ul,
|
||||
ol
|
||||
font-size: 16px
|
||||
line-height: 22px
|
||||
|
||||
li
|
||||
clear: both
|
||||
|
||||
ul
|
||||
font-weight: normal
|
||||
font-size: 14px
|
||||
position: relative
|
||||
|
||||
li
|
||||
line-height: 26px
|
||||
|
||||
&:before
|
||||
content: '-'
|
||||
float: left
|
||||
margin-right: 6px
|
||||
color: $logan
|
||||
|
||||
.content
|
||||
position: relative
|
||||
z-index: 2
|
||||
& p:first-child
|
||||
margin-top: 0
|
||||
& h2:first-child
|
||||
font-size: 35px
|
||||
&:before
|
||||
height: 0
|
||||
a
|
||||
color: #00A7FF
|
||||
|
||||
.heading
|
||||
background: #fff
|
||||
border: 1px solid #d8d8d8
|
||||
border-radius: 2px 2px 0 0
|
||||
margin: -8px 0 0
|
||||
padding: 0.75em 1em
|
||||
font-family: $paragraphs-font-family
|
||||
border-radius: 6px 6px 0 0
|
||||
font-size: 13px
|
||||
color: #8994c6
|
||||
font-weight: 400
|
||||
|
||||
&+ pre
|
||||
border-top: none
|
||||
border-radius: 0 0 6px 6px
|
||||
|
||||
button
|
||||
float: right
|
||||
background: #f1f4fd
|
||||
border: none
|
||||
padding: 2px 8px
|
||||
font-size: 90%
|
||||
border-radius: 2px
|
||||
|
||||
.icon
|
||||
width: 12px
|
||||
|
||||
svg
|
||||
width: 12px
|
||||
height: 12px
|
||||
|
||||
use
|
||||
fill: #8794cb
|
||||
|
||||
pre
|
||||
margin: 0 0 .5em 0
|
||||
line-height: 23px
|
||||
white-space: pre
|
||||
overflow-x: auto
|
||||
word-break: inherit
|
||||
word-wrap: inherit
|
||||
border: 1px solid #d8d8d8
|
||||
border-radius: 0 0 2px 2px
|
||||
padding: .5em 0
|
||||
position: relative
|
||||
z-index: 1
|
||||
background: #fff
|
||||
border-radius: 6px
|
||||
|
||||
// avoid scroll bar being unusable because <code></code><h2></h2> used and headers have :content that will be over
|
||||
|
||||
code
|
||||
display: block
|
||||
width: calc(100% - 2em)
|
||||
margin: auto
|
||||
|
||||
|
||||
p + div.heading
|
||||
margin-top: 1em
|
||||
|
||||
+ pre
|
||||
margin-bottom: 2em
|
||||
|
||||
h2, h3, .api-entry, .css-class, .type
|
||||
&:before
|
||||
content: ""
|
||||
display: block
|
||||
height: $offset-height
|
||||
// margin: (-$offset-height) 0 0
|
||||
|
||||
.anchor
|
||||
margin-left: .2em
|
||||
display: inline
|
||||
visibility: hidden
|
||||
|
||||
h2, h3, .api-entry
|
||||
.anchor
|
||||
text-decoration: none
|
||||
|
||||
.anchor:after
|
||||
content: '#'
|
||||
color: $accent-color
|
||||
|
||||
&:hover
|
||||
.anchor
|
||||
visibility: visible
|
||||
|
||||
&:target
|
||||
.anchor
|
||||
visibility: visible
|
||||
|
||||
.struct-def
|
||||
padding-left: 0
|
||||
margin-top: 24px
|
||||
|
||||
.default-value
|
||||
font-size: 12px
|
||||
line-height: 16px
|
||||
code
|
||||
background: transparent
|
||||
|
||||
.type
|
||||
list-style-type: none
|
||||
|
||||
p
|
||||
margin-top: 0
|
||||
|
||||
|
||||
.editThisPage
|
||||
position: absolute
|
||||
font-size: 12px
|
||||
right: 0
|
||||
top: 12px
|
||||
padding: 3px 6px
|
||||
border: 1px solid darken($accent-color, 20%)
|
||||
color: darken($accent-color, 20%)
|
||||
border-radius: 3px
|
||||
text-transform: uppercase
|
||||
opacity: .7
|
||||
|
||||
&:hover
|
||||
background: $accent-color
|
||||
color: #fff
|
||||
opacity: 1
|
||||
text-decoration: none
|
||||
+small-mq
|
||||
padding-top: 32px
|
||||
|
||||
.container
|
||||
.documentation-container
|
||||
left: 0
|
||||
width: 100%
|
||||
padding: 32px 1em
|
||||
|
||||
article
|
||||
float: left
|
||||
margin-top: 40px
|
||||
|
||||
.documentation .hero-section
|
||||
.fl-left
|
||||
max-width: 300px !important
|
||||
width: 300px !important
|
||||
|
||||
|
||||
.typed-link
|
||||
color: inherit
|
||||
text-decoration: underline
|
||||
|
||||
// remove before element offset when on table
|
||||
table tbody .api-entry:before
|
||||
display: none !important
|
||||
|
||||
|
||||
.examples-section > .container
|
||||
padding-top: 60px
|
||||
|
||||
.storybook-section
|
||||
min-height: 120px
|
||||
text-align: center
|
||||
line-height: 120px
|
||||
|
||||
.img-object
|
||||
padding: 6px
|
||||
border: 1px solid rgba(black, 0.1)
|
||||
margin: 16px 0
|
||||
margin-right: 26px
|
||||
max-width: 100%
|
||||
max-height: 500px
|
||||
margin: auto
|
||||
|
||||
&[align="right"]
|
||||
float: right
|
||||
margin-right: 0
|
||||
margin-left: 26px
|
||||
|
||||
& + p:not(.cb)
|
||||
clear: none !important
|
||||
|
||||
& ~ p:not(.cb)
|
||||
clear: none !important
|
||||
|
||||
&[align="left"]
|
||||
float: left
|
||||
margin: 18px 0 16px
|
||||
margin-right: 26px
|
||||
|
||||
& + p
|
||||
clear: none !important
|
||||
|
||||
& ~ p
|
||||
clear: none !important
|
||||
|
||||
.documentation-container
|
||||
table
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
border: 1px solid #d8d8d8
|
||||
color: darken($logan, 15%)
|
||||
|
||||
td, th
|
||||
padding: 0
|
||||
|
||||
table, th, td
|
||||
|
||||
table
|
||||
width: 100%
|
||||
display: table
|
||||
|
||||
table.bordered > thead > tr, table.bordered > tbody > tr
|
||||
border-bottom: 1px solid #d0d0d0
|
||||
|
||||
table.striped > tbody > tr:nth-child(odd)
|
||||
background-color: #f2f2f2
|
||||
|
||||
table.striped > tbody > tr > td
|
||||
border-radius: 0
|
||||
padding: 0 8px !important
|
||||
|
||||
table.highlight > tbody > tr
|
||||
transition: background-color 0.25s ease
|
||||
|
||||
table.highlight > tbody > tr:hover
|
||||
background-color: #f2f2f2
|
||||
|
||||
table.centered thead tr th, table.centered tbody tr td
|
||||
text-align: center
|
||||
|
||||
thead,
|
||||
tbody > tr:not(:last-child)
|
||||
border-bottom: 1px solid #d0d0d0
|
||||
|
||||
thead th
|
||||
color: darken($logan, 35%)
|
||||
|
||||
td, th
|
||||
padding: 15px 5px
|
||||
display: table-cell
|
||||
text-align: left
|
||||
vertical-align: middle
|
||||
border-radius: 2px
|
||||
|
||||
td,
|
||||
th
|
||||
padding: 15px 16px
|
||||
border-left: 1px solid #d0d0d0
|
||||
|
||||
@media only screen and (max-width: 992px)
|
||||
table.responsive-table
|
||||
width: 100%
|
||||
border-collapse: collapse
|
||||
border-spacing: 0
|
||||
display: block
|
||||
position: relative
|
||||
|
||||
table.responsive-table td:empty:before
|
||||
content: " "
|
||||
|
||||
table.responsive-table th, table.responsive-table td
|
||||
margin: 0
|
||||
vertical-align: top
|
||||
|
||||
table.responsive-table th
|
||||
text-align: left
|
||||
|
||||
table.responsive-table thead
|
||||
display: block
|
||||
float: left
|
||||
|
||||
table.responsive-table thead tr
|
||||
display: block
|
||||
padding: 0 10px 0 0
|
||||
|
||||
table.responsive-table thead tr th::before
|
||||
content: " "
|
||||
|
||||
table.responsive-table tbody
|
||||
display: block
|
||||
width: auto
|
||||
position: relative
|
||||
overflow-x: auto
|
||||
white-space: nowrap
|
||||
|
||||
table.responsive-table tbody tr
|
||||
display: inline-block
|
||||
vertical-align: top
|
||||
|
||||
table.responsive-table th
|
||||
display: block
|
||||
text-align: right
|
||||
|
||||
table.responsive-table td
|
||||
display: block
|
||||
min-height: 1.25em
|
||||
text-align: left
|
||||
|
||||
table.responsive-table tr
|
||||
padding: 0 10px
|
||||
|
||||
table.responsive-table thead
|
||||
border: 0
|
||||
border-right: 1px solid #d0d0d0
|
||||
|
||||
table.responsive-table.bordered th
|
||||
border-bottom: 0
|
||||
border-left: 0
|
||||
|
||||
table.responsive-table.bordered td
|
||||
border-left: 0
|
||||
border-right: 0
|
||||
border-bottom: 0
|
||||
|
||||
table.responsive-table.bordered tr
|
||||
border: 0
|
||||
|
||||
table.responsive-table.bordered tbody tr
|
||||
border-right: 1px solid #d0d0d0
|
||||
|
||||
|
||||
.live-example
|
||||
border: 1px solid #d8d8d8
|
||||
padding: 20px
|
||||
|
||||
h3
|
||||
margin-top: 0
|
||||
margin-bottom: 10px
|
||||
&:before
|
||||
height: 0
|
||||
margin: 0
|
||||
|
||||
.live-example-helpers
|
||||
border-top: 1px solid #d8d8d8
|
||||
padding-top: 10px
|
||||
margin-top: 20px
|
||||
|
||||
|
||||
.highlight-key-part__title
|
||||
font-size: 24px
|
||||
margin-bottom: 8px
|
||||
font-weight: 500
|
||||
color: $bunting
|
||||
|
||||
|
||||
.guide-nav
|
||||
display: flex
|
||||
flex-flow: row wrap
|
||||
padding: 1em 0
|
||||
margin-top: 1em
|
||||
border-top: 1px solid $ghost
|
||||
border-bottom: 1px solid $ghost
|
||||
|
||||
.guide-nav-left,
|
||||
.guide-nav-right
|
||||
flex: 0 1 50%
|
||||
|
||||
a
|
||||
margin-left: 1em
|
||||
.guide-nav-left:only-child
|
||||
flex: 0 1 100%
|
||||
|
||||
.guide-nav-right:only-child
|
||||
flex: 0 1 100%
|
||||
|
||||
.guide-nav-right
|
||||
text-align: right
|
||||
498
docs-src/src/stylesheets/components/_documentation.scss
Normal file
498
docs-src/src/stylesheets/components/_documentation.scss
Normal file
@ -0,0 +1,498 @@
|
||||
$sidebar-width: 260px;
|
||||
$offset-height: 60px;
|
||||
|
||||
.documentation-section,
|
||||
.examples-section {
|
||||
padding-bottom: 300px;
|
||||
|
||||
.container {
|
||||
article {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-top: 60px; } }
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
font-size: 16px;
|
||||
line-height: 22px; }
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
|
||||
li {
|
||||
padding: 0; }
|
||||
|
||||
ul {
|
||||
padding: 0 1em; } }
|
||||
|
||||
h2,h3,h4 {
|
||||
color: $bunting; }
|
||||
|
||||
h2:not(.text-lg) {
|
||||
font-size: 28px;
|
||||
padding-right: 1em;
|
||||
padding-bottom: 8px;
|
||||
|
||||
code {
|
||||
background: rgba($royal-blue, 0.1);
|
||||
color: $royal-blue;
|
||||
line-height: 1.4; }
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0; }
|
||||
|
||||
@include small-mq {
|
||||
font-size: 22px; } }
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
color: #201c38;
|
||||
position: relative;
|
||||
z-index: 10; }
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
font-weight: normal; }
|
||||
|
||||
.api {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
tr td:first-child {
|
||||
vertical-align: top;
|
||||
|
||||
p, ul {
|
||||
font-size: 90%;
|
||||
margin: .5em 0;
|
||||
line-height: 1.5em; }
|
||||
|
||||
ul {
|
||||
padding-left: 1.5em; }
|
||||
|
||||
em {
|
||||
text-decoration: underline;
|
||||
font-style: normal; } } }
|
||||
|
||||
td.api-entry-name:only-child {
|
||||
border-right: 1px solid #D0D0D0; }
|
||||
|
||||
|
||||
.documentation-container {
|
||||
float: left;
|
||||
position: relative;
|
||||
left: #{$sidebar-width};
|
||||
width: calc(100% - #{$sidebar-width});
|
||||
min-height: 1000px;
|
||||
padding-left: 60px;
|
||||
padding-top: 60px;
|
||||
|
||||
p img {
|
||||
max-width: 100%; }
|
||||
|
||||
p, li {
|
||||
color: rgba(32, 28, 56, 0.8);
|
||||
line-height: 2;
|
||||
font-size: 16px;
|
||||
font-family: 'Open Sans', Helvetica Neue, helvetica, sans-serif;
|
||||
clear: both; }
|
||||
|
||||
ul,
|
||||
ol {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
|
||||
li {
|
||||
clear: both; }
|
||||
|
||||
ul {
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
||||
li {
|
||||
line-height: 26px;
|
||||
|
||||
&:before {
|
||||
content: '-';
|
||||
float: left;
|
||||
margin-right: 6px;
|
||||
color: $logan; } } } }
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
& p:first-child {
|
||||
margin-top: 0; }
|
||||
& h2:first-child {
|
||||
font-size: 35px;
|
||||
&:before {
|
||||
height: 0; } }
|
||||
a {
|
||||
color: #00A7FF; } }
|
||||
|
||||
.heading {
|
||||
background: #fff;
|
||||
border: 1px solid #d8d8d8;
|
||||
border-radius: 2px 2px 0 0;
|
||||
margin: -8px 0 0;
|
||||
padding: 0.75em 1em;
|
||||
font-family: $paragraphs-font-family;
|
||||
border-radius: 6px 6px 0 0;
|
||||
font-size: 13px;
|
||||
color: #8994c6;
|
||||
font-weight: 400;
|
||||
|
||||
&+ pre {
|
||||
border-top: none;
|
||||
border-radius: 0 0 6px 6px; }
|
||||
|
||||
button {
|
||||
float: right;
|
||||
background: #f1f4fd;
|
||||
border: none;
|
||||
padding: 2px 8px;
|
||||
font-size: 90%;
|
||||
border-radius: 2px; }
|
||||
|
||||
.icon {
|
||||
width: 12px;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px; }
|
||||
|
||||
use {
|
||||
fill: #8794cb; } } }
|
||||
|
||||
pre {
|
||||
margin: 0 0 .5em 0;
|
||||
line-height: 23px;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
word-break: inherit;
|
||||
word-wrap: inherit;
|
||||
border: 1px solid #d8d8d8;
|
||||
border-radius: 0 0 2px 2px;
|
||||
padding: .5em 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
|
||||
// avoid scroll bar being unusable because <code></code><h2></h2> used and headers have :content that will be over
|
||||
|
||||
code {
|
||||
display: block;
|
||||
width: calc(100% - 2em);
|
||||
margin: auto; } }
|
||||
|
||||
|
||||
p + div.heading {
|
||||
margin-top: 1em;
|
||||
|
||||
+ pre {
|
||||
margin-bottom: 2em; } }
|
||||
|
||||
h2, h3, .api-entry, .css-class, .type {
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
height: $offset-height;
|
||||
} } // margin: (-$offset-height) 0 0
|
||||
|
||||
.anchor {
|
||||
margin-left: .2em;
|
||||
display: inline;
|
||||
visibility: hidden; }
|
||||
|
||||
h2, h3, .api-entry {
|
||||
.anchor {
|
||||
text-decoration: none; }
|
||||
|
||||
.anchor:after {
|
||||
content: '#';
|
||||
color: $accent-color; }
|
||||
|
||||
&:hover {
|
||||
.anchor {
|
||||
visibility: visible; } }
|
||||
|
||||
&:target {
|
||||
.anchor {
|
||||
visibility: visible; } } }
|
||||
|
||||
.struct-def {
|
||||
padding-left: 0;
|
||||
margin-top: 24px;
|
||||
|
||||
.default-value {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
code {
|
||||
background: transparent; } }
|
||||
|
||||
.type {
|
||||
list-style-type: none;
|
||||
|
||||
p {
|
||||
margin-top: 0; } } } }
|
||||
|
||||
|
||||
.editThisPage {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
right: 0;
|
||||
top: 12px;
|
||||
padding: 3px 6px;
|
||||
border: 1px solid darken($accent-color, 20%);
|
||||
color: darken($accent-color, 20%);
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
opacity: .7;
|
||||
|
||||
&:hover {
|
||||
background: $accent-color;
|
||||
color: #fff;
|
||||
opacity: 1;
|
||||
text-decoration: none; } }
|
||||
@include small-mq {
|
||||
padding-top: 32px;
|
||||
|
||||
.container {
|
||||
.documentation-container {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 32px 1em; }
|
||||
|
||||
article {
|
||||
float: left;
|
||||
margin-top: 40px; } }
|
||||
|
||||
.documentation .hero-section {
|
||||
.fl-left {
|
||||
max-width: 300px !important;
|
||||
width: 300px !important; } } }
|
||||
|
||||
|
||||
.typed-link {
|
||||
color: inherit;
|
||||
text-decoration: underline; }
|
||||
|
||||
// remove before element offset when on table
|
||||
table tbody .api-entry:before {
|
||||
display: none !important; } }
|
||||
|
||||
|
||||
.examples-section > .container {
|
||||
padding-top: 60px; }
|
||||
|
||||
.storybook-section {
|
||||
min-height: 120px;
|
||||
text-align: center;
|
||||
line-height: 120px; }
|
||||
|
||||
.img-object {
|
||||
padding: 6px;
|
||||
border: 1px solid rgba(black, 0.1);
|
||||
margin: 16px 0;
|
||||
margin-right: 26px;
|
||||
max-width: 100%;
|
||||
max-height: 500px;
|
||||
margin: auto;
|
||||
|
||||
&[align="right"] {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 26px;
|
||||
|
||||
& + p:not(.cb) {
|
||||
clear: none !important; }
|
||||
|
||||
& ~ p:not(.cb) {
|
||||
clear: none !important; } }
|
||||
|
||||
&[align="left"] {
|
||||
float: left;
|
||||
margin: 18px 0 16px;
|
||||
margin-right: 26px;
|
||||
|
||||
& + p {
|
||||
clear: none !important; }
|
||||
|
||||
& ~ p {
|
||||
clear: none !important; } } }
|
||||
|
||||
.documentation-container {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border: 1px solid #d8d8d8;
|
||||
color: darken($logan, 15%); }
|
||||
|
||||
td, th {
|
||||
padding: 0; }
|
||||
|
||||
table, th, td {}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
display: table; }
|
||||
|
||||
table.bordered > thead > tr, table.bordered > tbody > tr {
|
||||
border-bottom: 1px solid #d0d0d0; }
|
||||
|
||||
table.striped > tbody > tr:nth-child(odd) {
|
||||
background-color: #f2f2f2; }
|
||||
|
||||
table.striped > tbody > tr > td {
|
||||
border-radius: 0;
|
||||
padding: 0 8px !important; }
|
||||
|
||||
table.highlight > tbody > tr {
|
||||
transition: background-color 0.25s ease; }
|
||||
|
||||
table.highlight > tbody > tr:hover {
|
||||
background-color: #f2f2f2; }
|
||||
|
||||
table.centered thead tr th, table.centered tbody tr td {
|
||||
text-align: center; }
|
||||
|
||||
thead,
|
||||
tbody > tr:not(:last-child) {
|
||||
border-bottom: 1px solid #d0d0d0; }
|
||||
|
||||
thead th {
|
||||
color: darken($logan, 35%); }
|
||||
|
||||
td, th {
|
||||
padding: 15px 5px;
|
||||
display: table-cell;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
border-radius: 2px; }
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 15px 16px;
|
||||
border-left: 1px solid #d0d0d0; }
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
table.responsive-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
display: block;
|
||||
position: relative; }
|
||||
|
||||
table.responsive-table td:empty:before {
|
||||
content: " "; }
|
||||
|
||||
table.responsive-table th, table.responsive-table td {
|
||||
margin: 0;
|
||||
vertical-align: top; }
|
||||
|
||||
table.responsive-table th {
|
||||
text-align: left; }
|
||||
|
||||
table.responsive-table thead {
|
||||
display: block;
|
||||
float: left; }
|
||||
|
||||
table.responsive-table thead tr {
|
||||
display: block;
|
||||
padding: 0 10px 0 0; }
|
||||
|
||||
table.responsive-table thead tr th::before {
|
||||
content: " "; }
|
||||
|
||||
table.responsive-table tbody {
|
||||
display: block;
|
||||
width: auto;
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap; }
|
||||
|
||||
table.responsive-table tbody tr {
|
||||
display: inline-block;
|
||||
vertical-align: top; }
|
||||
|
||||
table.responsive-table th {
|
||||
display: block;
|
||||
text-align: right; }
|
||||
|
||||
table.responsive-table td {
|
||||
display: block;
|
||||
min-height: 1.25em;
|
||||
text-align: left; }
|
||||
|
||||
table.responsive-table tr {
|
||||
padding: 0 10px; }
|
||||
|
||||
table.responsive-table thead {
|
||||
border: 0;
|
||||
border-right: 1px solid #d0d0d0; }
|
||||
|
||||
table.responsive-table.bordered th {
|
||||
border-bottom: 0;
|
||||
border-left: 0; }
|
||||
|
||||
table.responsive-table.bordered td {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 0; }
|
||||
|
||||
table.responsive-table.bordered tr {
|
||||
border: 0; }
|
||||
|
||||
table.responsive-table.bordered tbody tr {
|
||||
border-right: 1px solid #d0d0d0; } }
|
||||
|
||||
|
||||
.live-example {
|
||||
border: 1px solid #d8d8d8;
|
||||
padding: 20px;
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
&:before {
|
||||
height: 0;
|
||||
margin: 0; } }
|
||||
|
||||
.live-example-helpers {
|
||||
border-top: 1px solid #d8d8d8;
|
||||
padding-top: 10px;
|
||||
margin-top: 20px; } } }
|
||||
|
||||
|
||||
.highlight-key-part__title {
|
||||
font-size: 24px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: $bunting; }
|
||||
|
||||
|
||||
.guide-nav {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
padding: 1em 0;
|
||||
margin-top: 1em;
|
||||
border-top: 1px solid $ghost;
|
||||
border-bottom: 1px solid $ghost;
|
||||
|
||||
.guide-nav-left,
|
||||
.guide-nav-right {
|
||||
flex: 0 1 50%;
|
||||
|
||||
a {
|
||||
margin-left: 1em; } }
|
||||
.guide-nav-left:only-child {
|
||||
flex: 0 1 100%; }
|
||||
|
||||
.guide-nav-right:only-child {
|
||||
flex: 0 1 100%; }
|
||||
|
||||
.guide-nav-right {
|
||||
text-align: right; } }
|
||||
@ -1,103 +0,0 @@
|
||||
|
||||
$footer-shade-1: #2E2A51
|
||||
$footer-shade-2: #1F1C3F
|
||||
$footer-shade-3: #12102E
|
||||
|
||||
// Footer CTA
|
||||
.footer-new-cta
|
||||
background: url('../assets/images/algolia-fast-bg.svg')no-repeat center center / cover
|
||||
margin-bottom: -90px
|
||||
padding-bottom: 60px
|
||||
height: 750px
|
||||
|
||||
.homepage &
|
||||
height: 940px
|
||||
|
||||
@media (min-width: $screen-md)
|
||||
margin-top: -200px
|
||||
|
||||
@media (max-width: $screen-md)
|
||||
height: 860px
|
||||
text-align: center
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
height: 820px
|
||||
|
||||
.stellar-container
|
||||
width: 100% !important
|
||||
|
||||
@media (max-width: $screen-xs)
|
||||
height: 960px
|
||||
|
||||
@include diagonal(-6deg, $white, 180px, before)
|
||||
top: -80px
|
||||
z-index: 1
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
height: 80px
|
||||
top: -40px
|
||||
|
||||
.button-holder
|
||||
background: url('../assets/images/light-speed.svg')no-repeat center top / contain
|
||||
span.inline
|
||||
float: right
|
||||
|
||||
@media (max-width: $screen-lg)
|
||||
top: 4%
|
||||
|
||||
i.icon-search
|
||||
vertical-align: middle
|
||||
|
||||
|
||||
@media (max-width: ($screen-lg) )
|
||||
background: url('../assets/images/light-speed.svg')no-repeat right top / 92%
|
||||
|
||||
@media (max-width: ($screen-md) )
|
||||
background: transparent
|
||||
span.inline
|
||||
width: 100%
|
||||
text-align: center
|
||||
|
||||
.btn
|
||||
margin: auto
|
||||
|
||||
#footer
|
||||
position: relative
|
||||
|
||||
|
||||
@include diagonal(-4deg, $footer-shade-2, 130px, after)
|
||||
bottom: 64px
|
||||
left: 0
|
||||
|
||||
.credits
|
||||
margin-top: 80px
|
||||
text-align: center
|
||||
position: relative
|
||||
background-color: $footer-shade-3
|
||||
color: $portage
|
||||
z-index: 99
|
||||
line-height: 40px
|
||||
@include diagonal(-2deg, $footer-shade-3, 80px, before)
|
||||
top: -40px
|
||||
left: 0
|
||||
|
||||
@media (max-width: $screen-md)
|
||||
margin-top: 40px
|
||||
|
||||
|
||||
|
||||
.search-icon,
|
||||
.arrow-icon
|
||||
margin-left: 1em
|
||||
width: 22px
|
||||
height: 42px
|
||||
vertical-align: middle
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
display: none
|
||||
|
||||
|
||||
.arrow-icon
|
||||
width: 16px
|
||||
use
|
||||
fill: $bunting
|
||||
104
docs-src/src/stylesheets/components/_footer.scss
Normal file
104
docs-src/src/stylesheets/components/_footer.scss
Normal file
@ -0,0 +1,104 @@
|
||||
|
||||
$footer-shade-1: #2E2A51;
|
||||
$footer-shade-2: #1F1C3F;
|
||||
$footer-shade-3: #12102E;
|
||||
|
||||
// Footer CTA
|
||||
.footer-new-cta {
|
||||
background: url('../assets/images/algolia-fast-bg.svg')no-repeat center center / cover;
|
||||
margin-bottom: -90px;
|
||||
padding-bottom: 60px;
|
||||
height: 750px;
|
||||
|
||||
.homepage & {
|
||||
height: 940px; }
|
||||
|
||||
@media (min-width: $screen-md) {
|
||||
margin-top: -200px; }
|
||||
|
||||
@media (max-width: $screen-md) {
|
||||
height: 860px;
|
||||
text-align: center; }
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
height: 820px;
|
||||
|
||||
.stellar-container {
|
||||
width: 100% !important; } }
|
||||
|
||||
@media (max-width: $screen-xs) {
|
||||
height: 960px; }
|
||||
|
||||
@include diagonal(-6deg, $white, 180px, before) {
|
||||
top: -80px;
|
||||
z-index: 1;
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
height: 80px;
|
||||
top: -40px; } }
|
||||
|
||||
.button-holder {
|
||||
background: url('../assets/images/light-speed.svg')no-repeat center top / contain;
|
||||
span.inline {
|
||||
float: right;
|
||||
|
||||
@media (max-width: $screen-lg) {
|
||||
top: 4%; }
|
||||
|
||||
i.icon-search {
|
||||
vertical-align: middle; } }
|
||||
|
||||
|
||||
@media (max-width: ($screen-lg) ) {
|
||||
background: url('../assets/images/light-speed.svg')no-repeat right top / 92%; }
|
||||
|
||||
@media (max-width: ($screen-md) ) {
|
||||
background: transparent;
|
||||
span.inline {
|
||||
width: 100%;
|
||||
text-align: center; }
|
||||
|
||||
.btn {
|
||||
margin: auto; } } } }
|
||||
|
||||
#footer {
|
||||
position: relative;
|
||||
|
||||
|
||||
@include diagonal(-4deg, $footer-shade-2, 130px, after) {
|
||||
bottom: 64px;
|
||||
left: 0; }
|
||||
|
||||
.credits {
|
||||
margin-top: 80px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background-color: $footer-shade-3;
|
||||
color: $portage;
|
||||
z-index: 99;
|
||||
line-height: 40px;
|
||||
@include diagonal(-2deg, $footer-shade-3, 80px, before) {
|
||||
top: -40px;
|
||||
left: 0; }
|
||||
|
||||
@media (max-width: $screen-md) {
|
||||
margin-top: 40px; } } }
|
||||
|
||||
|
||||
|
||||
.search-icon,
|
||||
.arrow-icon {
|
||||
margin-left: 1em;
|
||||
width: 22px;
|
||||
height: 42px;
|
||||
vertical-align: middle;
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
display: none; } }
|
||||
|
||||
|
||||
.arrow-icon {
|
||||
width: 16px;
|
||||
use {
|
||||
fill: $bunting; } }
|
||||
|
||||
@ -1,64 +0,0 @@
|
||||
.hero
|
||||
padding-top: 56px
|
||||
text-align: center
|
||||
position: relative
|
||||
|
||||
|
||||
h1
|
||||
font-size: 56px !important
|
||||
h2
|
||||
font-size: 20px !important
|
||||
font-weight: 300 !important
|
||||
display: inline-block
|
||||
max-width: 80%
|
||||
line-height: 1.5
|
||||
|
||||
|
||||
img
|
||||
max-width: 334px
|
||||
|
||||
&:not(.hero-doc)
|
||||
@include diagonal(-6deg, $white, 300px, before)
|
||||
bottom: -190px
|
||||
z-index: 1
|
||||
box-shadow: rgba(112, 128, 175, 0.05) 0 -16px 24px
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
height: 100px
|
||||
bottom: -80px
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
.btn
|
||||
width: 100%
|
||||
margin-bottom: 1em
|
||||
|
||||
figure
|
||||
img
|
||||
width: 80%
|
||||
max-width: 320px
|
||||
|
||||
h1
|
||||
font-size: 36px !important
|
||||
font-weight: bold
|
||||
h2
|
||||
font-size: 18px !important
|
||||
|
||||
|
||||
.row
|
||||
background: url(../assets/images/background-hero.svg)no-repeat center left / 80%
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
background: url(../assets/images/background-hero.svg)no-repeat center left / cover
|
||||
|
||||
@media (min-width: 1600px)
|
||||
height: 600px
|
||||
background: url(../assets/images/background-hero.svg)no-repeat center left / 80%
|
||||
|
||||
|
||||
// Hero documentation
|
||||
.hero.hero-doc
|
||||
background:
|
||||
image: url('../assets/images/logo_isjs.svg'), linear-gradient(to right, $purple-heart, $algolia-blue)
|
||||
repeat: no-repeat
|
||||
size: 330px, 100%
|
||||
position: top 90% right 5em, center left
|
||||
65
docs-src/src/stylesheets/components/_hero.scss
Normal file
65
docs-src/src/stylesheets/components/_hero.scss
Normal file
@ -0,0 +1,65 @@
|
||||
.hero {
|
||||
padding-top: 56px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 56px !important; }
|
||||
h2 {
|
||||
font-size: 20px !important;
|
||||
font-weight: 300 !important;
|
||||
display: inline-block;
|
||||
max-width: 80%;
|
||||
line-height: 1.5; }
|
||||
|
||||
|
||||
img {
|
||||
max-width: 334px; }
|
||||
|
||||
&:not(.hero-doc) {
|
||||
@include diagonal(-6deg, $white, 300px, before) {
|
||||
bottom: -190px;
|
||||
z-index: 1;
|
||||
box-shadow: rgba(112, 128, 175, 0.05) 0 -16px 24px;
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
height: 100px;
|
||||
bottom: -80px; } } }
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
.btn {
|
||||
width: 100%;
|
||||
margin-bottom: 1em; }
|
||||
|
||||
figure {
|
||||
img {
|
||||
width: 80%;
|
||||
max-width: 320px; } }
|
||||
|
||||
h1 {
|
||||
font-size: 36px !important;
|
||||
font-weight: bold; }
|
||||
h2 {
|
||||
font-size: 18px !important; } }
|
||||
|
||||
|
||||
.row {
|
||||
background: url(../assets/images/background-hero.svg)no-repeat center left / 80%;
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
background: url(../assets/images/background-hero.svg)no-repeat center left / cover; }
|
||||
|
||||
@media (min-width: 1600px) {
|
||||
height: 600px;
|
||||
background: url(../assets/images/background-hero.svg)no-repeat center left / 80%; } } }
|
||||
|
||||
|
||||
// Hero documentation
|
||||
.hero.hero-doc {
|
||||
background: {
|
||||
image: url('../assets/images/logo_isjs.svg'), linear-gradient(to right, $purple-heart, $algolia-blue);
|
||||
repeat: no-repeat;
|
||||
size: 330px, 100%;
|
||||
position: top 90% right 5em, center left; } }
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
|
||||
figure
|
||||
figcaption
|
||||
visibility: hidden
|
||||
4
docs-src/src/stylesheets/components/_medias.scss
Normal file
4
docs-src/src/stylesheets/components/_medias.scss
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
figure {
|
||||
figcaption {
|
||||
visibility: hidden; } }
|
||||
@ -1,95 +0,0 @@
|
||||
/**
|
||||
* Algolia components - community header
|
||||
* Light theme
|
||||
*/
|
||||
|
||||
// Navigation
|
||||
.algc-navigation
|
||||
background: $white
|
||||
box-shadow: 0 10px 40px 0 rgba($bunting,0.07), 0 2px 9px 0 rgba($bunting,0.06)
|
||||
|
||||
|
||||
.algc-navigation__brands a,
|
||||
.algc-navigation__menu .algc-menu__list a
|
||||
color: $bunting
|
||||
font-weight: 400
|
||||
|
||||
&:hover
|
||||
color: $deep-cove
|
||||
text-decoration: none
|
||||
|
||||
|
||||
.algc-menu__search .algc-search__input button svg path
|
||||
fill: $bunting !important
|
||||
|
||||
|
||||
.algc-menu__search--holder.open input[type="search"]
|
||||
max-width: 240px
|
||||
background: rgba($bunting, 0.1)
|
||||
color: $bunting
|
||||
transform: translate(-240px)
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
transform: translate(-140px)
|
||||
|
||||
&::-webkit-input-placeholder
|
||||
color: $bunting
|
||||
&:-moz-placeholder
|
||||
color: $bunting
|
||||
&::-moz-placeholder
|
||||
color: $bunting
|
||||
&:-ms-input-placeholder
|
||||
color: $bunting
|
||||
|
||||
|
||||
|
||||
|
||||
.algc-menu__search--holder.open button#search
|
||||
transform: translate(calc(-240px + 4em), -50%)
|
||||
@media (max-width: $screen-sm)
|
||||
transform: translate(calc(-140px + 4em), -50%)
|
||||
|
||||
.algc-navigation__brands svg.algc-arrowseparator path
|
||||
fill: $logan
|
||||
|
||||
|
||||
// Dropdown
|
||||
.algc-navigation__menu .algc-menu__sublist:before
|
||||
display: none
|
||||
|
||||
.algc-dropdownroot
|
||||
.algc-dropdownroot__dropdownarrow
|
||||
background: #F7F7FF
|
||||
|
||||
|
||||
&.activeDropdown .algc-dropdownroot__dropdownbg
|
||||
box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1), 0 -4px 16px rgba(50, 50, 93,0.1)
|
||||
|
||||
|
||||
.algc-dropdownroot__widelist li h4
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
width: 70%
|
||||
display: block
|
||||
// Mobile
|
||||
.algc-openmobile
|
||||
background: #332e58
|
||||
border-radius: 6px
|
||||
|
||||
.algc-mobilemenu
|
||||
background: #f8faff
|
||||
&:after
|
||||
display: none
|
||||
|
||||
a
|
||||
color: $bunting
|
||||
.algc-mobilemenu__item:after
|
||||
background: linear-gradient(76deg, rgba(#211e39, 0.01) 0%, rgba(#211e39, 0) 18%, #211e39 46%, rgba(#6a7599, 0.7) 93%, rgba(#6a7599, 0) 100%)
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: $screen-sm)
|
||||
.algc-navigation__brands .algc-navigation__li.algc-navigation__li--community
|
||||
width: 45px !important
|
||||
overflow: hidden !important
|
||||
96
docs-src/src/stylesheets/components/_navigation.scss
Normal file
96
docs-src/src/stylesheets/components/_navigation.scss
Normal file
@ -0,0 +1,96 @@
|
||||
/**
|
||||
* Algolia components - community header
|
||||
* Light theme
|
||||
*/
|
||||
|
||||
// Navigation
|
||||
.algc-navigation {
|
||||
background: $white;
|
||||
box-shadow: 0 10px 40px 0 rgba($bunting,0.07), 0 2px 9px 0 rgba($bunting,0.06); }
|
||||
|
||||
|
||||
.algc-navigation__brands a,
|
||||
.algc-navigation__menu .algc-menu__list a {
|
||||
color: $bunting;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
color: $deep-cove;
|
||||
text-decoration: none; } }
|
||||
|
||||
|
||||
.algc-menu__search .algc-search__input button svg path {
|
||||
fill: $bunting !important; }
|
||||
|
||||
|
||||
.algc-menu__search--holder.open input[type="search"] {
|
||||
max-width: 240px;
|
||||
background: rgba($bunting, 0.1);
|
||||
color: $bunting;
|
||||
transform: translate(-240px);
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
transform: translate(-140px); }
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $bunting; }
|
||||
&:-moz-placeholder {
|
||||
color: $bunting; }
|
||||
&::-moz-placeholder {
|
||||
color: $bunting; }
|
||||
&:-ms-input-placeholder {
|
||||
color: $bunting; } }
|
||||
|
||||
|
||||
|
||||
|
||||
.algc-menu__search--holder.open button#search {
|
||||
transform: translate(calc(-240px + 4em), -50%);
|
||||
@media (max-width: $screen-sm) {
|
||||
transform: translate(calc(-140px + 4em), -50%); } }
|
||||
|
||||
.algc-navigation__brands svg.algc-arrowseparator path {
|
||||
fill: $logan; }
|
||||
|
||||
|
||||
// Dropdown
|
||||
.algc-navigation__menu .algc-menu__sublist:before {
|
||||
display: none; }
|
||||
|
||||
.algc-dropdownroot {
|
||||
.algc-dropdownroot__dropdownarrow {
|
||||
background: #F7F7FF; }
|
||||
|
||||
|
||||
&.activeDropdown .algc-dropdownroot__dropdownbg {
|
||||
box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1), 0 -4px 16px rgba(50, 50, 93,0.1); } }
|
||||
|
||||
|
||||
.algc-dropdownroot__widelist li h4 {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 70%;
|
||||
display: block; }
|
||||
// Mobile
|
||||
.algc-openmobile {
|
||||
background: #332e58;
|
||||
border-radius: 6px; }
|
||||
|
||||
.algc-mobilemenu {
|
||||
background: #f8faff;
|
||||
&:after {
|
||||
display: none; }
|
||||
|
||||
a {
|
||||
color: $bunting; }
|
||||
.algc-mobilemenu__item:after {
|
||||
background: linear-gradient(76deg, rgba(#211e39, 0.01) 0%, rgba(#211e39, 0) 18%, #211e39 46%, rgba(#6a7599, 0.7) 93%, rgba(#6a7599, 0) 100%); } }
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: $screen-sm) {
|
||||
.algc-navigation__brands .algc-navigation__li.algc-navigation__li--community {
|
||||
width: 45px !important;
|
||||
overflow: hidden !important; } }
|
||||
|
||||
@ -1,132 +0,0 @@
|
||||
$sidebarTopOffset: 60px;
|
||||
|
||||
.sidebar
|
||||
width: $sidebar-width
|
||||
height: calc(100vh - #{$sidebarTopOffset})
|
||||
margin-top: 0
|
||||
// margin-top: $sidebarTopOffset
|
||||
padding-top: $sidebarTopOffset
|
||||
padding-bottom: 30px
|
||||
overflow-y: auto
|
||||
overflow-x: visible
|
||||
|
||||
.sidebar-container
|
||||
margin-bottom: 20px
|
||||
|
||||
.sidebar-header
|
||||
font-size: 17px
|
||||
margin-bottom: 0
|
||||
|
||||
&.fixed
|
||||
position: fixed
|
||||
top: $sidebarTopOffset
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
li
|
||||
display: inline-block
|
||||
|
||||
margin: 0
|
||||
padding: 0
|
||||
width: 100%
|
||||
|
||||
&.navItem-active > a
|
||||
color: #00A7FF
|
||||
font-weight: 600
|
||||
|
||||
&.level-h2 > a
|
||||
font-size: 15px
|
||||
|
||||
ul
|
||||
padding-left: 1em !important
|
||||
|
||||
a
|
||||
display: inline-block
|
||||
width: 100%
|
||||
text-decoration: none
|
||||
font-weight: 300
|
||||
color: rgba(32, 28, 56, 0.8)
|
||||
font-family: OpenSans, helvetica, sans-serif
|
||||
transition: transform .2s ease
|
||||
padding: 5px 0
|
||||
font-size: 13px
|
||||
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
&.navItem-active
|
||||
color: #00A7FF
|
||||
font-weight: 600
|
||||
transform: translateX(0px)
|
||||
transition: transform .2s ease
|
||||
|
||||
&:before
|
||||
opacity: 1
|
||||
|
||||
@include small-mq
|
||||
width: calc(100% + 16px)
|
||||
height: calc(100%)
|
||||
max-width: 320px
|
||||
position: fixed
|
||||
overflow: auto
|
||||
left: 0
|
||||
top: -10px !important
|
||||
border: none
|
||||
padding-top: 0
|
||||
background: #fefefe
|
||||
z-index: 150
|
||||
display: block
|
||||
padding: 1em
|
||||
box-shadow: -20px 0 100px rgba(0,0,0,0.25)
|
||||
padding-top: 1em
|
||||
|
||||
transform: translateX(-100%)
|
||||
will-change: transform
|
||||
transition: transform 0.3s ease
|
||||
|
||||
.sidebar-header
|
||||
max-width: calc(100% - 1em)
|
||||
|
||||
&.Showed
|
||||
transform: translateX(0)
|
||||
|
||||
.sidebar-container
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
|
||||
.sidebar-opener
|
||||
position: fixed
|
||||
left: 2em
|
||||
bottom: 2em
|
||||
height: 52px
|
||||
width: 52px
|
||||
background: #39b1de
|
||||
background-image: url(../assets/images/open-doc-menu_icon.svg), linear-gradient(284deg, darken(#211e39, 15%), darken(#6A7599, 15%))
|
||||
background-repeat: no-repeat
|
||||
background-position: 65% center, center center
|
||||
background-size: 60%, 100%
|
||||
z-index: 11
|
||||
border-radius: 50%
|
||||
box-shadow: 0 6px 8px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2)
|
||||
transition: transform 0.2s ease, left 0.2s ease
|
||||
transform-origin: center center
|
||||
cursor: pointer
|
||||
display: none
|
||||
z-index: 99999
|
||||
|
||||
@include small-mq
|
||||
display: block
|
||||
|
||||
|
||||
&:active
|
||||
transform: scale(0.9)
|
||||
|
||||
|
||||
&.Showed
|
||||
transform: rotate(-180deg)
|
||||
transform-origin: center center
|
||||
background-image: url(../assets/images/open-doc-menu_icon.svg), linear-gradient(284deg, darken(#211e39, 15%), darken(#6A7599, 15%))
|
||||
left: 340px
|
||||
133
docs-src/src/stylesheets/components/_sidebar.scss
Normal file
133
docs-src/src/stylesheets/components/_sidebar.scss
Normal file
@ -0,0 +1,133 @@
|
||||
$sidebarTopOffset: 60px;
|
||||
|
||||
.sidebar {
|
||||
width: $sidebar-width;
|
||||
height: calc(100vh - #{$sidebarTopOffset});
|
||||
margin-top: 0;
|
||||
// margin-top: $sidebarTopOffset
|
||||
padding-top: $sidebarTopOffset;
|
||||
padding-bottom: 30px;
|
||||
overflow-y: auto;
|
||||
overflow-x: visible;
|
||||
|
||||
.sidebar-container {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.sidebar-header {
|
||||
font-size: 17px;
|
||||
margin-bottom: 0; } }
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: $sidebarTopOffset; }
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
&.navItem-active > a {
|
||||
color: #00A7FF;
|
||||
font-weight: 600; }
|
||||
|
||||
&.level-h2 > a {
|
||||
font-size: 15px; }
|
||||
|
||||
ul {
|
||||
padding-left: 1em !important; }
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
font-weight: 300;
|
||||
color: rgba(32, 28, 56, 0.8);
|
||||
font-family: OpenSans, helvetica, sans-serif;
|
||||
transition: transform .2s ease;
|
||||
padding: 5px 0;
|
||||
font-size: 13px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline; }
|
||||
|
||||
&.navItem-active {
|
||||
color: #00A7FF;
|
||||
font-weight: 600;
|
||||
transform: translateX(0px);
|
||||
transition: transform .2s ease;
|
||||
|
||||
&:before {
|
||||
opacity: 1; } } } }
|
||||
|
||||
@include small-mq {
|
||||
width: calc(100% + 16px);
|
||||
height: calc(100%);
|
||||
max-width: 320px;
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
left: 0;
|
||||
top: -10px !important;
|
||||
border: none;
|
||||
padding-top: 0;
|
||||
background: #fefefe;
|
||||
z-index: 150;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
box-shadow: -20px 0 100px rgba(0,0,0,0.25);
|
||||
padding-top: 1em;
|
||||
|
||||
transform: translateX(-100%);
|
||||
will-change: transform;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
.sidebar-header {
|
||||
max-width: calc(100% - 1em); }
|
||||
|
||||
&.Showed {
|
||||
transform: translateX(0); }
|
||||
|
||||
.sidebar-container {
|
||||
width: 100%;
|
||||
max-width: 100%; } } }
|
||||
|
||||
.sidebar-opener {
|
||||
position: fixed;
|
||||
left: 2em;
|
||||
bottom: 2em;
|
||||
height: 52px;
|
||||
width: 52px;
|
||||
background: #39b1de;
|
||||
background-image: url(../assets/images/open-doc-menu_icon.svg), linear-gradient(284deg, darken(#211e39, 15%), darken(#6A7599, 15%));
|
||||
background-repeat: no-repeat;
|
||||
background-position: 65% center, center center;
|
||||
background-size: 60%, 100%;
|
||||
z-index: 11;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 6px 8px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
|
||||
transition: transform 0.2s ease, left 0.2s ease;
|
||||
transform-origin: center center;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
z-index: 99999;
|
||||
|
||||
@include small-mq {
|
||||
display: block; }
|
||||
|
||||
|
||||
&:active {
|
||||
transform: scale(0.9); }
|
||||
|
||||
|
||||
&.Showed {
|
||||
transform: rotate(-180deg);
|
||||
transform-origin: center center;
|
||||
background-image: url(../assets/images/open-doc-menu_icon.svg), linear-gradient(284deg, darken(#211e39, 15%), darken(#6A7599, 15%));
|
||||
left: 340px; } }
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
@charset 'utf-8'
|
||||
|
||||
@import 'node_modules/algolia-frontend-components/dist/_communityHeader'
|
||||
// @import 'partials/bootstrap'
|
||||
@import 'node_modules/algolia-aerial/src/stylesheet/aerial'
|
||||
|
||||
@import 'modules/base'
|
||||
@import 'modules/mixins'
|
||||
|
||||
@import 'components/navigation'
|
||||
@import 'components/hero'
|
||||
@import 'components/medias'
|
||||
@import 'components/icons'
|
||||
@import 'components/buttons'
|
||||
@import 'components/footer'
|
||||
@import 'components/documentation'
|
||||
@import 'components/sidebar'
|
||||
@import 'components/code-snippets'
|
||||
@import 'components/code-highlighting'
|
||||
|
||||
|
||||
@import 'pages/home'
|
||||
@import 'pages/examples'
|
||||
|
||||
|
||||
*
|
||||
box-sizing: border-box
|
||||
-webkit-font-smoothing: antialiased
|
||||
-moz-osx-font-smoothing: grayscale
|
||||
30
docs-src/src/stylesheets/index.scss
Normal file
30
docs-src/src/stylesheets/index.scss
Normal file
@ -0,0 +1,30 @@
|
||||
@charset 'utf-8';
|
||||
|
||||
@import 'node_modules/algolia-frontend-components/dist/_communityHeader';
|
||||
// @import 'partials/bootstrap'
|
||||
@import 'node_modules/algolia-aerial/src/stylesheet/aerial';
|
||||
|
||||
@import 'modules/base';
|
||||
@import 'modules/mixins';
|
||||
|
||||
@import 'components/navigation';
|
||||
@import 'components/hero';
|
||||
@import 'components/medias';
|
||||
@import 'components/icons';
|
||||
@import 'components/buttons';
|
||||
@import 'components/footer';
|
||||
@import 'components/documentation';
|
||||
@import 'components/sidebar';
|
||||
@import 'components/code-snippets';
|
||||
@import 'components/code-highlighting';
|
||||
|
||||
|
||||
@import 'pages/home';
|
||||
@import 'pages/examples';
|
||||
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale; }
|
||||
|
||||
@ -1,174 +0,0 @@
|
||||
|
||||
//fonts
|
||||
$light: 300
|
||||
$regular: 400
|
||||
$medium: 500
|
||||
$bold: 600
|
||||
|
||||
//colors
|
||||
$white: white
|
||||
$black: black
|
||||
|
||||
//V2
|
||||
$purple-heart: rgb(142,67,231)
|
||||
$mulberry: rgb(184,69,146)
|
||||
$radical-red: rgb(255,79,129)
|
||||
$bittersweet: rgb(255,108,95)
|
||||
$koromiko: rgb(255,193,104)
|
||||
$shamrock: rgb(45,222,152)
|
||||
$java: rgb(28,199,208)
|
||||
$algolia-blue: rgb(0,174,255)
|
||||
$royal-blue: rgb(51,105,231)
|
||||
|
||||
$bunting: rgb(62,57,107)
|
||||
$titan-white: rgb(248,250,255)
|
||||
$logan: rgb(157,157,189)
|
||||
$deep-cove: rgb(5,15,44)
|
||||
|
||||
$port-gore: rgb(58, 69, 112)
|
||||
$east-bay: rgb(73, 85, 136)
|
||||
$portage: rgb(137, 148, 198)
|
||||
$blue-bell: rgb(166, 176, 216)
|
||||
|
||||
$ghost: rgb(196, 200, 216)
|
||||
$athens-gray: rgb(238, 240, 247)
|
||||
|
||||
$highlight-color: #f6624e
|
||||
$theme-color: #00D8FF
|
||||
$accent-color: $royal-blue
|
||||
//OLD
|
||||
$cabaret: #E7486B
|
||||
$rouge: #9C4274
|
||||
$sea-green: #13C4A5
|
||||
$blue-green: #10A4B8
|
||||
$violet: #8A63B3
|
||||
$chambray: #3B5295
|
||||
$sunset-orange: #F6624E
|
||||
$saffron-mango: #FDBD57
|
||||
$red-pink: #fb366e
|
||||
$plum: #65133a
|
||||
$light-navy: #184a80
|
||||
|
||||
$primary-color: $bunting
|
||||
$secondary-color: $titan-white
|
||||
$tertiary-color: $portage
|
||||
|
||||
$cloudy-blue: #c4c8d7;
|
||||
$cloudy-blue-2: #a6b0d8;
|
||||
$cloudy-blue-3: #8995C7;
|
||||
$summertime: mix($radical-red, $bittersweet, 50%);
|
||||
|
||||
|
||||
//header
|
||||
$header-height: 60px
|
||||
|
||||
//BootStrap
|
||||
$gray-darker: lighten(#000, 13.5%)
|
||||
$gray-dark: lighten(#000, 20%)
|
||||
$gray: lighten(#000, 33.5%)
|
||||
$gray-light: lighten(#000, 46.7%)
|
||||
$gray-lighter: lighten(#000, 93.5%)
|
||||
|
||||
$brand-primary: $algolia-blue
|
||||
$brand-secondary: #FA3870
|
||||
$brand-success: $shamrock
|
||||
|
||||
$brand-info: $algolia-blue
|
||||
$brand-warning: $koromiko
|
||||
$brand-danger: $radical-red
|
||||
|
||||
$font-size-base: 15px
|
||||
$font-size-h1: 36px
|
||||
$font-size-h2: 30px
|
||||
$font-size-h3: 18px
|
||||
$font-size-h4: 12px
|
||||
$font-size-h5: 1em
|
||||
$font-size-h6: 1em
|
||||
$line-height-base: 1.6
|
||||
|
||||
$body-bg: $white
|
||||
$text-color: $bunting
|
||||
|
||||
$text-muted: $portage
|
||||
|
||||
$border-radius-base: 3px
|
||||
$border-radius-large: 3px
|
||||
$border-radius-small: 3px
|
||||
|
||||
$link-color: $brand-primary
|
||||
$link-hover-color: darken($link-color, 15%)
|
||||
|
||||
//fonts
|
||||
$font-family-base: 'Montserrat', Helvetica, Arial, sans-serif
|
||||
$headings-font-family: 'Montserrat', Helvetica, Arial, sans-serif
|
||||
$font-stack: 'Montserrat', Helvetica, Arial, sans-serif
|
||||
$paragraphs-font-family: 'Open Sans', helvetica, sans-serif
|
||||
$headings-small-color: darken($tertiary-color,10%)
|
||||
|
||||
//Buttons
|
||||
$btn-font-weight: normal
|
||||
//default
|
||||
$btn-default-color: #777
|
||||
$btn-default-bg: $white
|
||||
$btn-default-border: #ccc
|
||||
//primary
|
||||
$btn-primary-color: $white
|
||||
$btn-primary-bg: $brand-primary
|
||||
$btn-primary-border: darken($btn-primary-bg, 5%)
|
||||
//success
|
||||
$btn-success-color: $white
|
||||
$btn-success-bg: $brand-success
|
||||
$btn-success-border: darken($btn-success-bg, 5%)
|
||||
//info
|
||||
$btn-info-color: $white
|
||||
$btn-info-bg: $brand-info
|
||||
$btn-info-border: darken($btn-info-bg, 5%)
|
||||
//warning
|
||||
$btn-warning-color: $white
|
||||
$btn-warning-bg: $brand-warning
|
||||
$btn-warning-border: darken($btn-warning-bg, 5%)
|
||||
//danger
|
||||
$btn-danger-color: $white
|
||||
$btn-danger-bg: $brand-danger
|
||||
$btn-danger-border: darken($btn-danger-bg, 5%)
|
||||
//link
|
||||
$btn-link-disabled-color: $gray-light
|
||||
$input-bg-disabled: $gray-lighter
|
||||
|
||||
//Panels
|
||||
$panel-bg: $white
|
||||
|
||||
//** Border color for elements within panels
|
||||
$panel-inner-border: lighten($tertiary-color,20%)
|
||||
$panel-footer-bg: lighten($secondary-color, 10%)
|
||||
|
||||
$panel-default-text: $gray-dark
|
||||
$panel-default-border: $white
|
||||
$panel-default-heading-bg: $white
|
||||
|
||||
//forms
|
||||
$input-group-addon-bg: lighten($secondary-color,3%)
|
||||
$input-border: lighten($gray,30%)
|
||||
|
||||
//tables
|
||||
$table-border-color: $secondary-color
|
||||
$table-bg-accent: $purple-heart
|
||||
|
||||
//tooltip
|
||||
$tooltip-bg: $primary-color
|
||||
$tooltip-opacity: 1
|
||||
|
||||
//popover
|
||||
$popover-max-width: 300px
|
||||
|
||||
//Cards
|
||||
$card-border-transition: all 240ms ease-in-out
|
||||
|
||||
|
||||
//code
|
||||
$pre-bg: $bunting
|
||||
$pre-color: #C2CCCC
|
||||
|
||||
|
||||
// Searchboxes
|
||||
$searchbox-landing: (input-width: 300px, input-height: 50px, border-width: 2px, border-radius: 25px, input-border-color: #cccccc, input-focus-border-color: #ff2e83, input-background: white, input-focus-background: white, font-size: 14px, placeholder-color: #bbbbbb, icon: sbx-icon-search-18, icon-size: 30px, icon-position: left, icon-color: #ff2e83, icon-background: white, icon-background-opacity: 0, icon-clear: sbx-icon-clear-5, icon-clear-size: 18px)
|
||||
175
docs-src/src/stylesheets/modules/_base.scss
Normal file
175
docs-src/src/stylesheets/modules/_base.scss
Normal file
@ -0,0 +1,175 @@
|
||||
|
||||
//fonts
|
||||
$light: 300;
|
||||
$regular: 400;
|
||||
$medium: 500;
|
||||
$bold: 600;
|
||||
|
||||
//colors
|
||||
$white: white;
|
||||
$black: black;
|
||||
|
||||
//V2
|
||||
$purple-heart: rgb(142,67,231);
|
||||
$mulberry: rgb(184,69,146);
|
||||
$radical-red: rgb(255,79,129);
|
||||
$bittersweet: rgb(255,108,95);
|
||||
$koromiko: rgb(255,193,104);
|
||||
$shamrock: rgb(45,222,152);
|
||||
$java: rgb(28,199,208);
|
||||
$algolia-blue: rgb(0,174,255);
|
||||
$royal-blue: rgb(51,105,231);
|
||||
|
||||
$bunting: rgb(62,57,107);
|
||||
$titan-white: rgb(248,250,255);
|
||||
$logan: rgb(157,157,189);
|
||||
$deep-cove: rgb(5,15,44);
|
||||
|
||||
$port-gore: rgb(58, 69, 112);
|
||||
$east-bay: rgb(73, 85, 136);
|
||||
$portage: rgb(137, 148, 198);
|
||||
$blue-bell: rgb(166, 176, 216);
|
||||
|
||||
$ghost: rgb(196, 200, 216);
|
||||
$athens-gray: rgb(238, 240, 247);
|
||||
|
||||
$highlight-color: #f6624e;
|
||||
$theme-color: #00D8FF;
|
||||
$accent-color: $royal-blue;
|
||||
//OLD
|
||||
$cabaret: #E7486B;
|
||||
$rouge: #9C4274;
|
||||
$sea-green: #13C4A5;
|
||||
$blue-green: #10A4B8;
|
||||
$violet: #8A63B3;
|
||||
$chambray: #3B5295;
|
||||
$sunset-orange: #F6624E;
|
||||
$saffron-mango: #FDBD57;
|
||||
$red-pink: #fb366e;
|
||||
$plum: #65133a;
|
||||
$light-navy: #184a80;
|
||||
|
||||
$primary-color: $bunting;
|
||||
$secondary-color: $titan-white;
|
||||
$tertiary-color: $portage;
|
||||
|
||||
$cloudy-blue: #c4c8d7;
|
||||
$cloudy-blue-2: #a6b0d8;
|
||||
$cloudy-blue-3: #8995C7;
|
||||
$summertime: mix($radical-red, $bittersweet, 50%);
|
||||
|
||||
|
||||
//header
|
||||
$header-height: 60px;
|
||||
|
||||
//BootStrap
|
||||
$gray-darker: lighten(#000, 13.5%);
|
||||
$gray-dark: lighten(#000, 20%);
|
||||
$gray: lighten(#000, 33.5%);
|
||||
$gray-light: lighten(#000, 46.7%);
|
||||
$gray-lighter: lighten(#000, 93.5%);
|
||||
|
||||
$brand-primary: $algolia-blue;
|
||||
$brand-secondary: #FA3870;
|
||||
$brand-success: $shamrock;
|
||||
|
||||
$brand-info: $algolia-blue;
|
||||
$brand-warning: $koromiko;
|
||||
$brand-danger: $radical-red;
|
||||
|
||||
$font-size-base: 15px;
|
||||
$font-size-h1: 36px;
|
||||
$font-size-h2: 30px;
|
||||
$font-size-h3: 18px;
|
||||
$font-size-h4: 12px;
|
||||
$font-size-h5: 1em;
|
||||
$font-size-h6: 1em;
|
||||
$line-height-base: 1.6;
|
||||
|
||||
$body-bg: $white;
|
||||
$text-color: $bunting;
|
||||
|
||||
$text-muted: $portage;
|
||||
|
||||
$border-radius-base: 3px;
|
||||
$border-radius-large: 3px;
|
||||
$border-radius-small: 3px;
|
||||
|
||||
$link-color: $brand-primary;
|
||||
$link-hover-color: darken($link-color, 15%);
|
||||
|
||||
//fonts
|
||||
$font-family-base: 'Montserrat', Helvetica, Arial, sans-serif;
|
||||
$headings-font-family: 'Montserrat', Helvetica, Arial, sans-serif;
|
||||
$font-stack: 'Montserrat', Helvetica, Arial, sans-serif;
|
||||
$paragraphs-font-family: 'Open Sans', helvetica, sans-serif;
|
||||
$headings-small-color: darken($tertiary-color,10%);
|
||||
|
||||
//Buttons
|
||||
$btn-font-weight: normal;
|
||||
//default
|
||||
$btn-default-color: #777;
|
||||
$btn-default-bg: $white;
|
||||
$btn-default-border: #ccc;
|
||||
//primary
|
||||
$btn-primary-color: $white;
|
||||
$btn-primary-bg: $brand-primary;
|
||||
$btn-primary-border: darken($btn-primary-bg, 5%);
|
||||
//success
|
||||
$btn-success-color: $white;
|
||||
$btn-success-bg: $brand-success;
|
||||
$btn-success-border: darken($btn-success-bg, 5%);
|
||||
//info
|
||||
$btn-info-color: $white;
|
||||
$btn-info-bg: $brand-info;
|
||||
$btn-info-border: darken($btn-info-bg, 5%);
|
||||
//warning
|
||||
$btn-warning-color: $white;
|
||||
$btn-warning-bg: $brand-warning;
|
||||
$btn-warning-border: darken($btn-warning-bg, 5%);
|
||||
//danger
|
||||
$btn-danger-color: $white;
|
||||
$btn-danger-bg: $brand-danger;
|
||||
$btn-danger-border: darken($btn-danger-bg, 5%);
|
||||
//link
|
||||
$btn-link-disabled-color: $gray-light;
|
||||
$input-bg-disabled: $gray-lighter;
|
||||
|
||||
//Panels
|
||||
$panel-bg: $white;
|
||||
|
||||
//** Border color for elements within panels
|
||||
$panel-inner-border: lighten($tertiary-color,20%);
|
||||
$panel-footer-bg: lighten($secondary-color, 10%);
|
||||
|
||||
$panel-default-text: $gray-dark;
|
||||
$panel-default-border: $white;
|
||||
$panel-default-heading-bg: $white;
|
||||
|
||||
//forms
|
||||
$input-group-addon-bg: lighten($secondary-color,3%);
|
||||
$input-border: lighten($gray,30%);
|
||||
|
||||
//tables
|
||||
$table-border-color: $secondary-color;
|
||||
$table-bg-accent: $purple-heart;
|
||||
|
||||
//tooltip
|
||||
$tooltip-bg: $primary-color;
|
||||
$tooltip-opacity: 1;
|
||||
|
||||
//popover
|
||||
$popover-max-width: 300px;
|
||||
|
||||
//Cards
|
||||
$card-border-transition: all 240ms ease-in-out;
|
||||
|
||||
|
||||
//code
|
||||
$pre-bg: $bunting;
|
||||
$pre-color: #C2CCCC;
|
||||
|
||||
|
||||
// Searchboxes
|
||||
$searchbox-landing: (input-width: 300px, input-height: 50px, border-width: 2px, border-radius: 25px, input-border-color: #cccccc, input-focus-border-color: #ff2e83, input-background: white, input-focus-background: white, font-size: 14px, placeholder-color: #bbbbbb, icon: sbx-icon-search-18, icon-size: 30px, icon-position: left, icon-color: #ff2e83, icon-background: white, icon-background-opacity: 0, icon-clear: sbx-icon-clear-5, icon-clear-size: 18px);
|
||||
|
||||
@ -1,243 +0,0 @@
|
||||
|
||||
//illus retina
|
||||
@mixin at2x($path, $ext: "png", $w: auto, $h: auto)
|
||||
background-image: url(image_path($path + "." + $ext))
|
||||
background-repeat: no-repeat
|
||||
$at2x_path: $path + "@2x" + "." + $ext
|
||||
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5)
|
||||
background-image: url(image_path($at2x_path))
|
||||
background-size: $w $h
|
||||
|
||||
@mixin text-truncate
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
|
||||
//vertical alignment
|
||||
@mixin vertical-align($position: relative)
|
||||
transform: translateY(-50%)
|
||||
position: $position
|
||||
top: 50%
|
||||
|
||||
@mixin horizontal-align($position)
|
||||
position: $position;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
@mixin center($position)
|
||||
position: $position;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
// Responsive
|
||||
// Responsive Breakpoints
|
||||
@mixin big-min-mq
|
||||
@media (min-width: $screen-lg)
|
||||
@content
|
||||
|
||||
@mixin big-mq
|
||||
@media (max-width: $screen-lg)
|
||||
@content
|
||||
|
||||
@mixin medium-mq
|
||||
@media (max-width: $screen-md)
|
||||
@content
|
||||
|
||||
@mixin small-mq
|
||||
@media (max-width: $screen-sm)
|
||||
@content
|
||||
|
||||
@mixin mobile-mq
|
||||
@media (max-width: $screen-xs)
|
||||
@content
|
||||
|
||||
// Placeholder
|
||||
@mixin placeholder
|
||||
&::-webkit-input-placeholder
|
||||
@content
|
||||
&:-moz-placeholder
|
||||
@content
|
||||
&::-moz-placeholder
|
||||
@content
|
||||
&:-ms-input-placeholder
|
||||
@content
|
||||
|
||||
//BEM helpers
|
||||
@mixin block($block)
|
||||
#{$block}
|
||||
@content
|
||||
|
||||
@mixin element($element)
|
||||
&__#{$element}
|
||||
@content
|
||||
|
||||
@mixin modifier($modifier)
|
||||
&--#{$modifier}
|
||||
@content
|
||||
|
||||
|
||||
@mixin diagonal($rotation, $background, $height, $pos: after)
|
||||
&:#{$pos}
|
||||
content: ''
|
||||
display: block
|
||||
position: absolute
|
||||
width: 100%
|
||||
height: $height
|
||||
background: #{$background}
|
||||
transform: skewY($rotation)
|
||||
z-index: 0
|
||||
|
||||
@media (min-width: $screen-lg)
|
||||
transform: skewY($rotation/2)
|
||||
|
||||
@content
|
||||
|
||||
@mixin clearfix()
|
||||
&:before,
|
||||
&:after
|
||||
content: " "
|
||||
display: table
|
||||
|
||||
&:after
|
||||
clear: both
|
||||
|
||||
|
||||
@function even-px($value)
|
||||
@if type-of($value) == "number"
|
||||
@if unitless($value)
|
||||
$value: $value * 1px
|
||||
@else if unit($value) == "em"
|
||||
$value: $value / 1em * 16px
|
||||
@else if unit($value) == "pts"
|
||||
$value: $value * 1.3333 * 1px
|
||||
@else if unit($value) == "%"
|
||||
$value: $value * 16 / 100% * 1px
|
||||
$value: round($value)
|
||||
@if $value % 2 != 0
|
||||
$value: $value + 1
|
||||
@return $value
|
||||
|
||||
|
||||
// Hero animation
|
||||
=animateScreen($id, $start, $stop)
|
||||
@keyframes popUp#{$id}
|
||||
#{$start}
|
||||
transform: translateY(10px)
|
||||
opacity: 0
|
||||
#{$stop}
|
||||
transform: translateY(0)
|
||||
opacity: 1
|
||||
|
||||
animation: popUp#{$id} 2s ease 0.25s
|
||||
|
||||
=searchbox($font-size: 90%, $input-width: 350px, $input-height: $font-size * 2.4, $border-width: 1px, $border-radius: $input-height / 2, $input-border-color: #cccccc, $input-focus-border-color: #1ec9ea, $input-background: #f8f8f8, $input-focus-background: white, $placeholder-color: #aaaaaa, $icon: "sbx-icon-search-1", $icon-size: $input-height / 1.6, $icon-position: left, $icon-color: #888888, $icon-background: $input-focus-border-color, $icon-background-opacity: 0.1, $icon-clear: "sbx-icon-clear-1", $icon-clear-size: $font-size / 1.1)
|
||||
display: inline-block
|
||||
position: relative
|
||||
width: $input-width
|
||||
height: even-px($input-height)
|
||||
white-space: nowrap
|
||||
box-sizing: border-box
|
||||
font-size: $font-size
|
||||
&__wrapper
|
||||
width: 100%
|
||||
height: 100%
|
||||
&__input
|
||||
display: inline-block
|
||||
transition: box-shadow .4s ease, background .4s ease
|
||||
border: 0
|
||||
border-radius: even-px($border-radius)
|
||||
box-shadow: inset 0 0 0 $border-width $input-border-color
|
||||
background: $input-background
|
||||
padding: 0
|
||||
padding-right: if($icon-position == "right", even-px($input-height) + even-px($icon-clear-size) + 8px, even-px($input-height * 0.8)) + if($icon-background-opacity == 0, 0, even-px($font-size))
|
||||
padding-left: if($icon-position == "right", even-px($font-size / 2) + even-px($border-radius / 2), even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size * 1.2)))
|
||||
width: 100%
|
||||
height: 100%
|
||||
vertical-align: middle
|
||||
white-space: normal
|
||||
font-size: inherit
|
||||
appearance: none
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-results-button,
|
||||
&::-webkit-search-results-decoration
|
||||
display: none
|
||||
&:hover
|
||||
box-shadow: inset 0 0 0 $border-width darken($input-border-color, 10%)
|
||||
&:focus,
|
||||
&:active
|
||||
outline: 0
|
||||
box-shadow: inset 0 0 0 $border-width $input-focus-border-color
|
||||
background: $input-focus-background
|
||||
&::placeholder
|
||||
color: $placeholder-color
|
||||
&__submit
|
||||
position: absolute
|
||||
top: 0
|
||||
@if $icon-position == "right"
|
||||
right: 0
|
||||
left: inherit
|
||||
@else
|
||||
right: inherit
|
||||
left: 0
|
||||
margin: 0
|
||||
border: 0
|
||||
border-radius: if($icon-position == "right", 0 $border-radius $border-radius 0, $border-radius 0 0 $border-radius)
|
||||
background-color: rgba($icon-background, $icon-background-opacity)
|
||||
padding: 0
|
||||
width: even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size / 2))
|
||||
height: 100%
|
||||
vertical-align: middle
|
||||
text-align: center
|
||||
font-size: inherit
|
||||
user-select: none
|
||||
// Helper for vertical alignement of the icon
|
||||
&::before
|
||||
display: inline-block
|
||||
margin-right: -4px
|
||||
height: 100%
|
||||
vertical-align: middle
|
||||
content: ''
|
||||
&:hover,
|
||||
&:active
|
||||
cursor: pointer
|
||||
&:focus
|
||||
outline: 0
|
||||
svg
|
||||
width: even-px($icon-size)
|
||||
height: even-px($icon-size)
|
||||
vertical-align: middle
|
||||
fill: $icon-color
|
||||
&__reset
|
||||
display: none
|
||||
position: absolute
|
||||
top: (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px
|
||||
right: if($icon-position == "right", even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size)), (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px)
|
||||
margin: 0
|
||||
border: 0
|
||||
background: none
|
||||
cursor: pointer
|
||||
padding: 0
|
||||
font-size: inherit
|
||||
user-select: none
|
||||
fill: rgba(black, 0.5)
|
||||
&:focus
|
||||
outline: 0
|
||||
svg
|
||||
display: block
|
||||
margin: 4px
|
||||
width: even-px($icon-clear-size)
|
||||
height: even-px($icon-clear-size)
|
||||
&__input:valid ~ &__reset
|
||||
display: block
|
||||
animation-name: sbx-reset-in
|
||||
animation-duration: .15s
|
||||
@at-root
|
||||
@keyframes sbx-reset-in
|
||||
0%
|
||||
transform: translate3d(-20%, 0, 0)
|
||||
opacity: 0
|
||||
100%
|
||||
transform: none
|
||||
opacity: 1
|
||||
244
docs-src/src/stylesheets/modules/_mixins.scss
Normal file
244
docs-src/src/stylesheets/modules/_mixins.scss
Normal file
@ -0,0 +1,244 @@
|
||||
|
||||
//illus retina
|
||||
@mixin at2x($path, $ext: "png", $w: auto, $h: auto) {
|
||||
background-image: url(image_path($path + "." + $ext));
|
||||
background-repeat: no-repeat;
|
||||
$at2x_path: $path + "@2x" + "." + $ext;
|
||||
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
|
||||
background-image: url(image_path($at2x_path));
|
||||
background-size: $w $h; } }
|
||||
|
||||
@mixin text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap; }
|
||||
|
||||
//vertical alignment
|
||||
@mixin vertical-align($position: relative) {
|
||||
transform: translateY(-50%);
|
||||
position: $position;
|
||||
top: 50%; }
|
||||
|
||||
@mixin horizontal-align($position) {
|
||||
position: $position;
|
||||
left: 50%;
|
||||
transform: translateX(-50%); }
|
||||
|
||||
@mixin center($position) {
|
||||
position: $position;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%); }
|
||||
|
||||
// Responsive
|
||||
// Responsive Breakpoints
|
||||
@mixin big-min-mq {
|
||||
@media (min-width: $screen-lg) {
|
||||
@content; } }
|
||||
|
||||
@mixin big-mq {
|
||||
@media (max-width: $screen-lg) {
|
||||
@content; } }
|
||||
|
||||
@mixin medium-mq {
|
||||
@media (max-width: $screen-md) {
|
||||
@content; } }
|
||||
|
||||
@mixin small-mq {
|
||||
@media (max-width: $screen-sm) {
|
||||
@content; } }
|
||||
|
||||
@mixin mobile-mq {
|
||||
@media (max-width: $screen-xs) {
|
||||
@content; } }
|
||||
|
||||
// Placeholder
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {
|
||||
@content; }
|
||||
&:-moz-placeholder {
|
||||
@content; }
|
||||
&::-moz-placeholder {
|
||||
@content; }
|
||||
&:-ms-input-placeholder {
|
||||
@content; } }
|
||||
|
||||
//BEM helpers
|
||||
@mixin block($block) {
|
||||
#{$block} {
|
||||
@content; } }
|
||||
|
||||
@mixin element($element) {
|
||||
&__#{$element} {
|
||||
@content; } }
|
||||
|
||||
@mixin modifier($modifier) {
|
||||
&--#{$modifier} {
|
||||
@content; } }
|
||||
|
||||
|
||||
@mixin diagonal($rotation, $background, $height, $pos: after) {
|
||||
&:#{$pos} {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: $height;
|
||||
background: #{$background};
|
||||
transform: skewY($rotation);
|
||||
z-index: 0;
|
||||
|
||||
@media (min-width: $screen-lg) {
|
||||
transform: skewY($rotation/2); }
|
||||
|
||||
@content; } }
|
||||
|
||||
@mixin clearfix() {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table; }
|
||||
|
||||
&:after {
|
||||
clear: both; } }
|
||||
|
||||
|
||||
@function even-px($value) {
|
||||
@if type-of($value) == "number" {
|
||||
@if unitless($value) {
|
||||
$value: $value * 1px; }
|
||||
@else if unit($value) == "em" {
|
||||
$value: $value / 1em * 16px; }
|
||||
@else if unit($value) == "pts" {
|
||||
$value: $value * 1.3333 * 1px; }
|
||||
@else if unit($value) == "%" {
|
||||
$value: $value * 16 / 100% * 1px; }
|
||||
$value: round($value);
|
||||
@if $value % 2 != 0 {
|
||||
$value: $value + 1; }
|
||||
@return $value; } }
|
||||
|
||||
|
||||
// Hero animation
|
||||
@mixin animateScreen($id, $start, $stop) {
|
||||
@keyframes popUp#{$id} {
|
||||
#{$start} {
|
||||
transform: translateY(10px);
|
||||
opacity: 0; }
|
||||
#{$stop} {
|
||||
transform: translateY(0);
|
||||
opacity: 1; } }
|
||||
|
||||
animation: popUp#{$id} 2s ease 0.25s; }
|
||||
|
||||
@mixin searchbox($font-size: 90%, $input-width: 350px, $input-height: $font-size * 2.4, $border-width: 1px, $border-radius: $input-height / 2, $input-border-color: #cccccc, $input-focus-border-color: #1ec9ea, $input-background: #f8f8f8, $input-focus-background: white, $placeholder-color: #aaaaaa, $icon: "sbx-icon-search-1", $icon-size: $input-height / 1.6, $icon-position: left, $icon-color: #888888, $icon-background: $input-focus-border-color, $icon-background-opacity: 0.1, $icon-clear: "sbx-icon-clear-1", $icon-clear-size: $font-size / 1.1) {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: $input-width;
|
||||
height: even-px($input-height);
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
font-size: $font-size;
|
||||
&__wrapper {
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
&__input {
|
||||
display: inline-block;
|
||||
transition: box-shadow .4s ease, background .4s ease;
|
||||
border: 0;
|
||||
border-radius: even-px($border-radius);
|
||||
box-shadow: inset 0 0 0 $border-width $input-border-color;
|
||||
background: $input-background;
|
||||
padding: 0;
|
||||
padding-right: if($icon-position == "right", even-px($input-height) + even-px($icon-clear-size) + 8px, even-px($input-height * 0.8)) + if($icon-background-opacity == 0, 0, even-px($font-size));
|
||||
padding-left: if($icon-position == "right", even-px($font-size / 2) + even-px($border-radius / 2), even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size * 1.2)));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
font-size: inherit;
|
||||
appearance: none;
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-results-button,
|
||||
&::-webkit-search-results-decoration {
|
||||
display: none; }
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 $border-width darken($input-border-color, 10%); }
|
||||
&:focus,
|
||||
&:active {
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 $border-width $input-focus-border-color;
|
||||
background: $input-focus-background; }
|
||||
&::placeholder {
|
||||
color: $placeholder-color; } }
|
||||
&__submit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@if $icon-position == "right" {
|
||||
right: 0;
|
||||
left: inherit; }
|
||||
@else {
|
||||
right: inherit;
|
||||
left: 0; }
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: if($icon-position == "right", 0 $border-radius $border-radius 0, $border-radius 0 0 $border-radius);
|
||||
background-color: rgba($icon-background, $icon-background-opacity);
|
||||
padding: 0;
|
||||
width: even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size / 2));
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
font-size: inherit;
|
||||
user-select: none;
|
||||
// Helper for vertical alignement of the icon
|
||||
&::before {
|
||||
display: inline-block;
|
||||
margin-right: -4px;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
content: ''; }
|
||||
&:hover,
|
||||
&:active {
|
||||
cursor: pointer; }
|
||||
&:focus {
|
||||
outline: 0; }
|
||||
svg {
|
||||
width: even-px($icon-size);
|
||||
height: even-px($icon-size);
|
||||
vertical-align: middle;
|
||||
fill: $icon-color; } }
|
||||
&__reset {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px;
|
||||
right: if($icon-position == "right", even-px($input-height) + if($icon-background-opacity == 0, 0, even-px($font-size)), (even-px($input-height) - even-px($icon-clear-size)) / 2 - 4px);
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
user-select: none;
|
||||
fill: rgba(black, 0.5);
|
||||
&:focus {
|
||||
outline: 0; }
|
||||
svg {
|
||||
display: block;
|
||||
margin: 4px;
|
||||
width: even-px($icon-clear-size);
|
||||
height: even-px($icon-clear-size); } }
|
||||
&__input:valid ~ &__reset {
|
||||
display: block;
|
||||
animation-name: sbx-reset-in;
|
||||
animation-duration: .15s; }
|
||||
@at-root {
|
||||
@keyframes sbx-reset-in {
|
||||
0% {
|
||||
transform: translate3d(-20%, 0, 0);
|
||||
opacity: 0; }
|
||||
100% {
|
||||
transform: none;
|
||||
opacity: 1; } } } }
|
||||
|
||||
@ -1,34 +0,0 @@
|
||||
.examples-container
|
||||
padding: 40px 0
|
||||
.flex-it-2
|
||||
+small-mq
|
||||
flex: 0 1 100% !important
|
||||
.flex-it-2 > div
|
||||
background: #fefefe
|
||||
border: 1px solid #ebebeb
|
||||
position: relative
|
||||
text-align: center
|
||||
overflow: hidden
|
||||
|
||||
img
|
||||
width: 100%
|
||||
|
||||
.links
|
||||
width: 100%
|
||||
height: 100%
|
||||
text-indent: 0
|
||||
color: inherit
|
||||
left: 0
|
||||
background: darken($accent-color, 0.95)
|
||||
background: linear-gradient(to bottom right, $algolia-blue, darken($accent-color, 0.95))
|
||||
color: #fff
|
||||
transform: scale(0)
|
||||
z-index: 2
|
||||
line-height: 12
|
||||
transition: transform 0.2s ease
|
||||
position: absolute
|
||||
visibility: visible
|
||||
&:hover
|
||||
.links
|
||||
transform: scale(1)
|
||||
top: 0
|
||||
34
docs-src/src/stylesheets/pages/_examples.scss
Normal file
34
docs-src/src/stylesheets/pages/_examples.scss
Normal file
@ -0,0 +1,34 @@
|
||||
.examples-container {
|
||||
padding: 40px 0;
|
||||
.flex-it-2 {
|
||||
@include small-mq {
|
||||
flex: 0 1 100% !important; } }
|
||||
.flex-it-2 > div {
|
||||
background: #fefefe;
|
||||
border: 1px solid #ebebeb;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%; }
|
||||
|
||||
.links {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-indent: 0;
|
||||
color: inherit;
|
||||
left: 0;
|
||||
background: darken($accent-color, 0.95);
|
||||
background: linear-gradient(to bottom right, $algolia-blue, darken($accent-color, 0.95));
|
||||
color: #fff;
|
||||
transform: scale(0);
|
||||
z-index: 2;
|
||||
line-height: 12;
|
||||
transition: transform 0.2s ease;
|
||||
position: absolute;
|
||||
visibility: visible; }
|
||||
&:hover {
|
||||
.links {
|
||||
transform: scale(1);
|
||||
top: 0; } } } }
|
||||
@ -1,218 +0,0 @@
|
||||
a
|
||||
color: #00A7FF
|
||||
|
||||
.home
|
||||
@media (max-width: $screen-md)
|
||||
.btn-static-theme
|
||||
margin: auto
|
||||
display: block
|
||||
h3
|
||||
font-size: 32px
|
||||
|
||||
.screen-mockup
|
||||
top: -260px
|
||||
img
|
||||
@media (max-width: $screen-lg)
|
||||
width: 50vw !important
|
||||
|
||||
@media (max-height: 730px)
|
||||
top: -120px
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
top: -180px
|
||||
img
|
||||
max-width: 80% !important
|
||||
width: inherit !important
|
||||
|
||||
.section-best-practices
|
||||
@media (max-width: $screen-sm)
|
||||
.img-responsive
|
||||
top: 100px
|
||||
|
||||
.section-infinite-possibilities
|
||||
@include diagonal(-4deg, /*$titan-white*/ $titan-white, 180px, after)
|
||||
top: -80px
|
||||
left: 0
|
||||
|
||||
.section-framework
|
||||
@include diagonal(-4deg, /*$titan-white*/ #FFF, 180px, after)
|
||||
top: -80px
|
||||
left: 0
|
||||
|
||||
.phone_illustration,
|
||||
.computer_illustration
|
||||
position: absolute
|
||||
|
||||
.computer_illustration
|
||||
max-width: 720px
|
||||
display: block
|
||||
left: -200px
|
||||
|
||||
.phone_illustration
|
||||
z-index: 4
|
||||
max-width: 200px
|
||||
left: 50%
|
||||
top: 50px
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
.phone_illustration,
|
||||
.computer_illustration
|
||||
transform: scale(0.5)
|
||||
|
||||
.start-section
|
||||
@include diagonal(-4deg, /*$titan-white*/ $titan-white, 180px, after)
|
||||
top: -80px
|
||||
left: 0
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
|
||||
a:hover span
|
||||
text-decoration: underline
|
||||
|
||||
.container .col-md-12
|
||||
transform-style: preserve-3d
|
||||
perspective: 1030px
|
||||
|
||||
.row
|
||||
@media (max-width: $screen-sm)
|
||||
height: auto !important
|
||||
|
||||
.card
|
||||
margin: auto
|
||||
width: 100%
|
||||
top: 0
|
||||
left: 0
|
||||
|
||||
@media (max-width: $screen-md)
|
||||
transform: none !important
|
||||
|
||||
|
||||
.section-live
|
||||
a
|
||||
color: inherit
|
||||
|
||||
&:hover
|
||||
text-decoration: none
|
||||
|
||||
.flex-it-3:hover .p-large
|
||||
background: #f7f7f7 !important
|
||||
|
||||
.flex-container
|
||||
padding: 0
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
.flex-it-3
|
||||
flex: 0 1 100%
|
||||
|
||||
.discover-section
|
||||
@include diagonal(-4deg, /*$titan-white*/ #FFF, 180px, after)
|
||||
top: -80px
|
||||
left: 0
|
||||
.card
|
||||
line-height: 60px
|
||||
|
||||
.card:hover
|
||||
background: $titan-white !important
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
.logos-container
|
||||
height: auto !important
|
||||
|
||||
.card
|
||||
margin-bottom: 1em
|
||||
|
||||
.col-md-12 .col-md-4,
|
||||
.mobile-projects
|
||||
padding: 0
|
||||
|
||||
|
||||
|
||||
.content
|
||||
.btn
|
||||
@media (max-width: $screen-sm)
|
||||
margin: auto
|
||||
display: block
|
||||
max-width: 280px
|
||||
|
||||
@media (max-width: $screen-xs)
|
||||
width: 100%
|
||||
|
||||
.home
|
||||
&.content
|
||||
margin-bottom: 300px
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
.container,
|
||||
.col-md-12,
|
||||
.col-md-6,
|
||||
.col-md-8.col-md-offset-2,
|
||||
.col-md-10.col-md-offset-2
|
||||
padding-left: 0 !important
|
||||
padding-right: 0 !important
|
||||
max-width: 100%
|
||||
.col-md-10.col-md-offset-2 .m-l-large
|
||||
margin-left: 0 !important
|
||||
.col-md-12.row
|
||||
margin: 0 !important
|
||||
|
||||
.section-illustration
|
||||
display: block
|
||||
max-width: 80%
|
||||
margin: 2em auto
|
||||
|
||||
h3, p
|
||||
text-align: center
|
||||
|
||||
.screen-mockup img
|
||||
max-width: 600px
|
||||
|
||||
.algc-navigation .algc-navigation__container
|
||||
max-width: 1140px
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/// List
|
||||
ul.subtle-check-list
|
||||
list-style: none
|
||||
padding: 0
|
||||
margin: 0
|
||||
width: 200px
|
||||
position: absolute
|
||||
z-index: 9
|
||||
right: 20px
|
||||
width: 170px
|
||||
top: 140px
|
||||
|
||||
li
|
||||
display: inline-block
|
||||
width: 100%
|
||||
color: #00aeff
|
||||
font-weight: 400
|
||||
padding: 0 16px
|
||||
height: 40px
|
||||
min-width: 150px
|
||||
margin-bottom: 20px
|
||||
line-height: 40px
|
||||
clear: both
|
||||
background: rgba(255, 255, 255, 0.9)
|
||||
border-radius: 18px
|
||||
-webkit-box-shadow: 0 2px 10px 0 rgba(40, 120, 236, 0.2)
|
||||
box-shadow: 0 2px 10px 0 rgba(40, 120, 236, 0.2)
|
||||
text-transform: uppercase
|
||||
|
||||
svg
|
||||
width: 12px
|
||||
height: 36px
|
||||
float: right
|
||||
|
||||
use
|
||||
fill: $purple-heart
|
||||
width: 12px
|
||||
|
||||
@media (max-width: $screen-sm)
|
||||
left: 0
|
||||
right: 0
|
||||
margin: auto
|
||||
218
docs-src/src/stylesheets/pages/_home.scss
Normal file
218
docs-src/src/stylesheets/pages/_home.scss
Normal file
@ -0,0 +1,218 @@
|
||||
a {
|
||||
color: #00A7FF; }
|
||||
|
||||
.home {
|
||||
@media (max-width: $screen-md) {
|
||||
.btn-static-theme {
|
||||
margin: auto;
|
||||
display: block; } }
|
||||
h3 {
|
||||
font-size: 32px; } }
|
||||
|
||||
.screen-mockup {
|
||||
top: -260px;
|
||||
img {
|
||||
@media (max-width: $screen-lg) {
|
||||
width: 50vw !important; } }
|
||||
|
||||
@media (max-height: 730px) {
|
||||
top: -120px; }
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
top: -180px;
|
||||
img {
|
||||
max-width: 80% !important;
|
||||
width: inherit !important; } } }
|
||||
|
||||
.section-best-practices {
|
||||
@media (max-width: $screen-sm) {
|
||||
.img-responsive {
|
||||
top: 100px; } } }
|
||||
|
||||
.section-infinite-possibilities {
|
||||
@include diagonal(-4deg, /*$titan-white*/ $titan-white, 180px, after) {
|
||||
top: -80px;
|
||||
left: 0; } }
|
||||
|
||||
.section-framework {
|
||||
@include diagonal(-4deg, /*$titan-white*/ #FFF, 180px, after) {
|
||||
top: -80px;
|
||||
left: 0; }
|
||||
|
||||
.phone_illustration,
|
||||
.computer_illustration {
|
||||
position: absolute; }
|
||||
|
||||
.computer_illustration {
|
||||
max-width: 720px;
|
||||
display: block;
|
||||
left: -200px; }
|
||||
|
||||
.phone_illustration {
|
||||
z-index: 4;
|
||||
max-width: 200px;
|
||||
left: 50%;
|
||||
top: 50px; }
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
.phone_illustration,
|
||||
.computer_illustration {
|
||||
transform: scale(0.5); } } }
|
||||
|
||||
.start-section {
|
||||
@include diagonal(-4deg, /*$titan-white*/ $titan-white, 180px, after) {
|
||||
top: -80px;
|
||||
left: 0; }
|
||||
|
||||
a {
|
||||
text-decoration: none; }
|
||||
|
||||
a:hover span {
|
||||
text-decoration: underline; }
|
||||
|
||||
.container .col-md-12 {
|
||||
transform-style: preserve-3d;
|
||||
perspective: 1030px;
|
||||
|
||||
.row {
|
||||
@media (max-width: $screen-sm) {
|
||||
height: auto !important; } } }
|
||||
|
||||
.card {
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@media (max-width: $screen-md) {
|
||||
transform: none !important; } } }
|
||||
|
||||
|
||||
.section-live {
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none; } }
|
||||
|
||||
.flex-it-3:hover .p-large {
|
||||
background: #f7f7f7 !important; }
|
||||
|
||||
.flex-container {
|
||||
padding: 0; }
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
.flex-it-3 {
|
||||
flex: 0 1 100%; } } }
|
||||
|
||||
.discover-section {
|
||||
@include diagonal(-4deg, /*$titan-white*/ #FFF, 180px, after) {
|
||||
top: -80px;
|
||||
left: 0; }
|
||||
.card {
|
||||
line-height: 60px; }
|
||||
|
||||
.card:hover {
|
||||
background: $titan-white !important; }
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
.logos-container {
|
||||
height: auto !important; }
|
||||
|
||||
.card {
|
||||
margin-bottom: 1em; }
|
||||
|
||||
.col-md-12 .col-md-4,
|
||||
.mobile-projects {
|
||||
padding: 0; } } }
|
||||
|
||||
|
||||
|
||||
.content {
|
||||
.btn {
|
||||
@media (max-width: $screen-sm) {
|
||||
margin: auto;
|
||||
display: block;
|
||||
max-width: 280px; }
|
||||
|
||||
@media (max-width: $screen-xs) {
|
||||
width: 100%; } } }
|
||||
|
||||
.home {
|
||||
&.content {
|
||||
margin-bottom: 300px; }
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
.container,
|
||||
.col-md-12,
|
||||
.col-md-6,
|
||||
.col-md-8.col-md-offset-2,
|
||||
.col-md-10.col-md-offset-2 {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
max-width: 100%; }
|
||||
.col-md-10.col-md-offset-2 .m-l-large {
|
||||
margin-left: 0 !important; }
|
||||
.col-md-12.row {
|
||||
margin: 0 !important; }
|
||||
|
||||
.section-illustration {
|
||||
display: block;
|
||||
max-width: 80%;
|
||||
margin: 2em auto; }
|
||||
|
||||
h3, p {
|
||||
text-align: center; }
|
||||
|
||||
.screen-mockup img {
|
||||
max-width: 600px; } } }
|
||||
|
||||
.algc-navigation .algc-navigation__container {
|
||||
max-width: 1140px; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/// List
|
||||
ul.subtle-check-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
right: 20px;
|
||||
width: 170px;
|
||||
top: 140px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
color: #00aeff;
|
||||
font-weight: 400;
|
||||
padding: 0 16px;
|
||||
height: 40px;
|
||||
min-width: 150px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 40px;
|
||||
clear: both;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 18px;
|
||||
-webkit-box-shadow: 0 2px 10px 0 rgba(40, 120, 236, 0.2);
|
||||
box-shadow: 0 2px 10px 0 rgba(40, 120, 236, 0.2);
|
||||
text-transform: uppercase;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 36px;
|
||||
float: right;
|
||||
|
||||
use {
|
||||
fill: $purple-heart;
|
||||
width: 12px; } } }
|
||||
|
||||
@media (max-width: $screen-sm) {
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto; } }
|
||||
@ -1,18 +1,18 @@
|
||||
@import "modules/_base"
|
||||
@import "modules/_base";
|
||||
|
||||
// Core variables and mixins
|
||||
@import "../vendors/bootstrap/variables"
|
||||
@import "../vendors/bootstrap/mixins"
|
||||
@import "../vendors/bootstrap/variables";
|
||||
@import "../vendors/bootstrap/mixins";
|
||||
// Reset and dependencies
|
||||
@import "../vendors/bootstrap/normalize"
|
||||
@import "../vendors/bootstrap/normalize";
|
||||
//@import "../vendors/bootstrap/print"
|
||||
//@import "../vendors/bootstrap/glyphicons"
|
||||
// Core CSS
|
||||
@import "../vendors/bootstrap/scaffolding"
|
||||
@import "../vendors/bootstrap/type"
|
||||
@import "../vendors/bootstrap/scaffolding";
|
||||
@import "../vendors/bootstrap/type";
|
||||
// @import "../vendors/bootstrap/code"
|
||||
// @import "../vendors/bootstrap/grid"
|
||||
@import "../vendors/bootstrap/tables"
|
||||
@import "../vendors/bootstrap/tables";
|
||||
// @import "../vendors/bootstrap/forms"
|
||||
// @import "../vendors/bootstrap/buttons"
|
||||
// Components
|
||||
@ -44,4 +44,5 @@
|
||||
// @import "../vendors/bootstrap/carousel"
|
||||
// Utility classes
|
||||
// @import "../vendors/bootstrap/utilities"
|
||||
@import "../vendors/bootstrap/responsive-utilities"
|
||||
@import "../vendors/bootstrap/responsive-utilities";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user