juplo.de Git - website/blob - sass/juplo.scss

   1 @charset "utf-8";
   2
   3 // Customization
   4
   5 // You can easily customize Bulma with your own variables.
   6 // Just uncomment the following block to see the result.
   7
   8 /*
   9 // 1. Import the initial variables
  10 @import "../node_modules/bulma/sass/utilities/initial-variables";
  11
  12 // 2. Set your own initial variables
  13 // Update the blue shade, used for links
  14 $blue: #06bcef;
  15 // Add pink and its invert
  16 $pink: #ff8080;
  17 $pink-invert: #fff;
  18 // Update the sans-serif font family
  19 $family-sans-serif: "Helvetica", "Arial", sans-serif;
  20
  21 // 3. Set the derived variables
  22 // Use the new pink as the primary color
  23 $primary: $pink;
  24 $primary-invert: $pink-invert;
  25
  26 // 4. Import the rest of Bulma
  27 */
  28
  29 $primary: #0ACF00;
  30 $button-text-color: #FFF !important;
  31 $button-border-color: #000 !important;
  32 $button-hover-border-color: #000 !important;
  33
  34 @import "../node_modules/bulma/bulma";
  35 @import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
  36 @import "../node_modules/@fortawesome/fontawesome-free/scss/regular";
  37 @import "../node_modules/@fortawesome/fontawesome-free/scss/solid";
  38 @import "../node_modules/@fortawesome/fontawesome-free/scss/brands";
  39
  40 .navbar-item > .logo
  41 {
  42   max-height: none;
  43 }
  44
  45
  46 // Navigation
  47
  48 #navigation li.s.off
  49 {
  50   display: none;
  51 }
  52 #navigation li.s > a.selected,
  53 #navigation li.s > a.leaf,
  54 #navigation li.s > strong.selected,
  55 #navigation li.s > strong.leaf
  56 {
  57   @extend .button;
  58   @extend .is-primary;
  59   @extend .is-rounded;
  60   @extend .has-text-weight-bold;
  61   @extend .mb-3;
  62 }
  63 #navigation li.s > a.leaf,
  64 #navigation li.s > strong.leaf
  65 {
  66   color: #ccc;
  67   background-color: #fff;
  68 }
  69 #navigation li.s > ul.selected
  70 {
  71   margin-top: 1em;
  72 }
  73 #navigation li.s > a.selected:after,
  74 #navigation li.s > a.leaf:after,
  75 #navigation li.s > strong.selected:after,
  76 #navigation li.s > strong.leaf:after
  77 {
  78   content: "\f0a8";
  79   padding-left: .5em;
  80   margin-right: -.5em;
  81   font-family: 'Font Awesome 5 Free';
  82   font-weight: 900;
  83   font-size: 2em;
  84   -webkit-font-smoothing: antialiased;
  85   display: inline-block;
  86   font-style: normal;
  87   font-variant: normal;
  88   text-rendering: auto;
  89   line-height: 1;
  90 }
  91 #navigation li.s > a.leaf:after,
  92 #navigation li.s > strong.leaf:after
  93 {
  94   color: #fff;
  95 }
  96 #navigation li.s.sub > a.selected:after,
  97 #navigation li.s.sub > a.selected:after,
  98 #navigation li.s.sub > strong.leaf:after,
  99 #navigation li.s.sub > strong.leaf:after
 100 {
 101   content: "\f0ab";
 102 }
 103
 104
 105 html
 106 {
 107   height: 100%;
 108 }
 109 body
 110 {
 111   height: 100%;
 112   display: flex;
 113   flex-direction: column;
 114 }
 115 #page
 116 {
 117   flex: 1 0 auto;
 118   display: flex;
 119   justify-content: flex-end;
 120 }
 121 footer
 122 {
 123   flex-shrink: 0;
 124   display: flex;
 125   justify-content: flex-end;
 126 }
 127 main,
 128 #copyright
 129 {
 130   flex: 0 1 768px;
 131   overflow: hidden;
 132 }
 133 nav,
 134 #footerlinks
 135 {
 136   flex: 0 0 293px ;
 137   min-width: 293px;
 138 }
 139
 140
 141 label
 142 {
 143   @extend .label;
 144 }
 145 input[type=submit],
 146 input[type=reset]
 147 {
 148   @extend .button;
 149 }
 150 input[type=text],
 151 input[type=password],
 152 input[type=email],
 153 input[type=tel]
 154 {
 155   @extend .input;
 156 }
 157 textarea
 158 {
 159   @extend .textarea;
 160 }
 161 select
 162 {
 163   // @extend .select;
 164 }
 165 input[type=file]
 166 {
 167   // @extend .file-input;
 168 }