styles.scss

$space: 0.5rem;

* {
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

html {
  font-size: 65%;
}

body {
  background-color: #BBB;
  color: #000;
  font-family: sans-serif;
}

h1 {
  font-size: 1.25rem;
  font-weight: bold;
}

h2 {
  font-size: 1rem;
  font-weight: normal;  
}

select, input[type=checkbox], input[type=radio] {
  font-size: 1.5rem;
}

input[type=text], button {
  font-size: 1.25rem;
  padding: $space/2;
}

noscript {
  display: block;
  padding: $space;
  font-size: 1.25rem;  
}

#fmfriend {
  display: flex;
  flex-direction: column;
  height: 100%;

  &[v-cloak] {
    display: none;
  }
  
  .error {
    padding: $space;
    font-size: 1.25rem;
  }
  
  & > .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    align-items: stretch;
    padding-left: $space;
    
    .output-chooser, .name {
      display: flex;
      flex-direction: row;
      align-items: center;
      
      h1 {
        padding-right: $space;        
      }
    }
    
    .output-chooser {
      padding: $space $space 0 $space;
      
      select {
        display: block;
        width: 15rem;
      }
    }
    
    .name {
      padding: $space $space 0 $space;
    }
    
    .send-patch {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      padding: $space $space 0 $space;
      
      button {
      }
      
      input[type=checkbox] {
        margin: 0 $space;
      }
      
      label {
        font-size: 1.25rem;
      }
    }
  }
  
  
  .patch {
    flex-grow: 1;
    flex-basis: 0;
    height: 100%;
    
    hr {
      margin: $space 0;
    }
    
    /*
    & > .header {
      display: flex;
      align-items: baseline;
      padding: $space $space 0 $space;
      
      .name {
        display: flex;
        align-items: baseline;
        
        h1 {
          padding: 0 $space 0 0;
        }
      
        input[type=text] {
          display: block;
          width: 10em;        
        }
      }
    }
    */

    .sections {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      padding: 0 $space $space 0;
      
      &, & * {
        box-sizing: border-box;
      }
      
      .section-container {         
        display: flex;
        flex-direction: column;
        width: (1/5) * 100%;
        padding: $space 0 0 $space;
                
        @media only screen and (min-width: 0px) and (max-width: 679px) {
          & {
            width: (1/1) * 100%;
          }
        }

        @media only screen and (min-width: 680px) and (max-width: 1009px) {
          & {
            width: (1/2) * 100%;
          }
        }
        
        @media only screen and (min-width: 1010px) and (max-width: 1349px) {
          & {
            width: (1/3) * 100%;
          }
        }
        
        @media only screen and (min-width: 1350px) and (max-width: 1699px) {
          & {
            width: (1/4) * 100%;
          }
        }
        
        .section {
          background-color: #CCC;
          padding: $space;
          flex-grow: 1;
          //margin: 0 $space $space 0;
          //width: 40em;
          
          &.operator {
            background-color: #DDD;            
          }
          
          .header {
            display: flex;
            flex-direction: row;
            
            h1 {
              flex-grow: 1;
            }
          }
          
          .parameters {
            display: flex;
            flex-direction: column;
          }          
        }
      }      
    }

    .parameter-group {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
            
      .parameter-subgroup {
        padding-right: $space;
        flex-grow: 1;
        width: 50%;
        
        @media only screen and (max-width: 349px) {
          & {
            width: 100%;
          }
        }      
      }
      
      .parameter-subgroup:last-child {
        padding-right: 0;
      }
    }
    
    .slider-container, .radios-container {
      h2 {
        padding-bottom: $space/2;
      }
    }
    
    .slider-container {
      padding-bottom: $space;
      
      &:last-child {
        padding-bottom: 0;
      }
      
      .slider-label {
        display: block;
        font-size: 1rem;
      }

      .slider {
        display: flex;
        flex-direction: row;
        align-items: center;
      
        input[type=range] {
          flex-grow: 1;
        }
      
        .display {
          width: 2rem + $space;
          padding-left: $space;
        
          label {
            display: block;
            font-size: 1rem;
            width: 2rem;
            background-color: #EEE;
            text-align: center;
          }        
        }
      }
    }
    
    .radios-container {
      padding-bottom: $space;
      
      &:last-child {
        padding-bottom: 0;
      }
      
      .radios {
        display: flex;
        flex-direction: row;
        
        .radio-container {
          flex-grow: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          
          label {
            font-size: 1rem;
            padding-left: $space;
          }
        }
      }
    }
  }
}