dev/scss/base.scss

@charset "utf-8";
@import "util";

$border-size: 2px;

/**
 * Basic global CSS rules for Kalamar
 */

body,
html,
select,
g > text {
  color: $dark-grey;
  font-family: verdana, tahoma, arial, Helvetica, sans-serif;
  margin: 0;
}

* {
  @include box-sizing-box;
}

/*
html {
//  @include box-sizing-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}
*/

g > text {
  fill: $dark-grey;
}

html {
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
  font-size: 12pt;
  margin: 0;
  padding: 0;
}


a {
  &:link {
    color: $dark-orange;
    text-decoration: none;
    &:hover {
      color: $darkest-orange;
      @include color-transition;
    }
  }

  // External links
  &[href^="http://"]::after,
  &[href^="https://"]::after {
    font-family: FontAwesome;
    white-space: nowrap;
    content: " " + $fa-extlink;
    font-size: 75%;
  }

  // Link to documentation
  &.doc-link::after {
    font-family: FontAwesome;
    white-space: nowrap;
    content: " " + $fa-tutorial;
    font-size: 75%;
  }
}

// Styles for Mojolicious::Plugin::TagHelpers::MailToChiffre
a[onclick$='return PArok(this,false)'] {
  direction:rtl;
  unicode-bidi:bidi-override;
  text-align:left;
  & > span {
    &:nth-child(1n+2){
      display:none
    }
    &:nth-child(1)::after{
      content:'@'
    }
  }
}

button[type=submit] {
  font-weight: normal;
  @include choose-item;
  padding: 0;
  height: 100%;
  top: 0;
  width: $button-width;
  cursor:pointer;
  > span:nth-of-type(1) {
    @include blind;
  }
  &::after {
    font-family: "FontAwesome";
  }
  border: {
    width: $border-size;
    style: solid;
    color: $nearly-white;
  }
  &:hover, &:focus {
    @include choose-hover;
  }
  &::-moz-focus-inner {
    border: none;
  }
  &:active {
    @include choose-active;
  }
  /**
   * This is just for styling the last button,
   * in case there are more than one buttons.
   */
  &:last-of-type {
    // @include box-sizing-box();
    border: {
      right-width: $border-size;
      right-style: solid;
      top-right-radius: $standard-border-radius;
      bottom-right-radius: $standard-border-radius;
    }
  }
}

button + button {
  right: 0;
}


.button-group {
  > span {
    cursor: pointer;
    box-shadow: $choose-box-shadow;
    font-size: 9pt;
    line-height: 1.5em;
    padding: 0 4px;
    display: inline-block;
    @include choose-item;
    border-style: solid;
    border-width: $border-size 0;
    &:hover {
	    @include choose-hover;
    }
    &:first-child {
	    border: {
	    left-width: $border-size;
	    top-left-radius: $standard-border-radius;
	    bottom-left-radius: $standard-border-radius;
	  }
    }
    &:last-child {
	    border: {
	    right-width: $border-size;
	    top-right-radius: $standard-border-radius;
	    bottom-right-radius: $standard-border-radius;
	  }
    }
  }
}