kalidea/kaligraphi

/* You can add global styles to this file, and also import other style files */

// import des surcharges à la librairie

//font-faces
@import mixins
+font-face(Asap, Asap-Regular, 400, normal)
+font-face(Asap, Asap-Medium, 500, normal)
+font-face(Asap, Asap-SemiBold, 600, normal)

// variables
$kal-base-fontface: 'Asap'
$kal-base-fontsize: 17px

// importet construction de la librairie
@import ~projects/kalidea/kaligraphi/src/styles/parameters
@import ~projects/kalidea/kaligraphi/src/styles/kaligraphi
@import url("https://fonts.googleapis.com/icon?family=Material+Icons")

+kaligraphi($kal-parameters)


h1
  padding-bottom: 20px
.technical-value
  display: flex
  flex-flow: column wrap
  font-size: 13px
  padding: 20px 10px
  .technical-value__item
    display: flex
    flex-flow: row wrap
    justify-content: flex-start
    align-items: center
    margin: 5px
    span
      margin-right: 10px
      &:nth-child(2)
        color: #E89536
      &:nth-child(1)
        color: #094074
        font-weight: 500
        &::after
          content: ' >> '
.example
  display: flex
  flex-flow: row wrap
  justify-content: flex-start
  align-items: center
  padding: 20px
  border-top: 1px solid #CCC
  margin: 20px 0
  &::before
    content: "Example"
    display: block
    position: relative
    top: -45px
    flex: 0 0 100%
    font-weight: 500
    color: #E89536
    text-transform: uppercase
    left: -20px
  > *
    flex: 1
    margin: 0 20px 20px 0


.configurator
  display: flex
  flex-flow: row wrap
  justify-content: flex-start
  align-items: center
  padding: 20px
  margin: 60px 0
  &:not(:empty)
    border-top: 1px solid #CCC
    &::before
      content: "Configure"
      display: block
      position: relative
      top: -45px
      flex: 0 0 100%
      font-weight: 500
      color: #E89536
      text-transform: uppercase
      left: -20px
  > *
    flex: 1 1 25%
    margin: 0 20px 20px 0

.darkBg, .reverse
  background-color: #1f1f1f

*
  -ms-scrollbar-face-color: #ddd
  -ms-scrollbar-arrow-color: #ddd
  -ms-scrollbar-track-color: #ddd
  -ms-scrollbar-shadow-color: #aaa
  -ms-scrollbar-highlight-color: #aaa
  -ms-scrollbar-3dlight-color: #aaa
  -ms-scrollbar-darkshadow-color: #aaa
  -ms-overflow-style: -ms-autohiding-scrollbar
  &::-webkit-scrollbar // la barre entière.
       width: 4px
       background: #eee
       border: 1px solid #eee
       border-radius: 2px
       -webkit-border-radius: 2px
  &::-webkit-scrollbar-thumb // l'emplacement qui permet de déplacer la barre de défilement.
      border-radius: 2px
      -webkit-border-radius: 2px
      background: rgba(178, 178, 178, 0.8)
  &::-webkit-scrollbar-track // la piste (la zone de progression) de la barre de défilement
      background: #eee

#container
  display: flex
  min-height: 100vh
  > .kal-nav
    color: white
    background-color: get('nav.default.background-color', $kal-parameters)
    display: flex
    flex-flow: column nowrap
    justify-content: space-between
    align-items: stretch
    padding: 20px
    height: 100vh
    overflow: hidden
    overflow-y: auto
    max-width: 250px
    min-width: 250px
    &__head
      margin: auto auto 20px auto
      img
        width: 100%
        height: auto
    &__main
      flex: 1
      width: 100%
    &__foot
      display: flex
      flex-flow: row wrap
      justify-items: center
      align-items: center
      margin: 20px 0
      a
        font-size: 11px
        font-weight: lighter
        color: #6a696b
        &:hover
          color: #f49231
  main
    flex: 1 1 auto
    padding: 40px 60px