openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

openrat-form.less (3112B)

      1 @color-overridden-by-theme: black;
      2 
      3 .border-radius (@radius) {
      4     border-radius: @radius;
      5     -moz-border-radius: @radius;
      6     -webkit-border-radius: @radius;
      7     -khtml-border-radius: @radius;
      8 }
      9 
     10 @small: ~"only screen and (max-width: 65rem)";
     11 
     12 .or {
     13 
     14     &-form {
     15         display: flex;
     16         height: 100%;
     17         flex-direction: column;
     18         padding: 1em;
     19 
     20         &-checkbox,
     21         &-radio {
     22           //transform: scale(1.5); // Increase size of checkboxes
     23           margin-right: 1em;
     24           appearance: none;
     25           width:1.5em;
     26           height: 1.5em;
     27           border: 1px solid;
     28           &::after {
     29             //content: "\2610";
     30             //font-size: 2em;
     31           }
     32           &:checked {
     33             &::after {
     34               //content: '\2714';
     35               //content: "\2705";
     36               //content: "\1F5F9";
     37               //font-size: 2em;
     38             }
     39           }
     40         }
     41         &-checkbox {
     42           border-radius: 2px;
     43         }
     44         &-radio {
     45           border-radius: 0.75em;
     46         }
     47 
     48         &-headline {
     49             height: 2em;
     50         }
     51 
     52         &-content {
     53             flex-grow: 1;
     54             padding-bottom: 6em;
     55             //overflow-y: auto;
     56 
     57         }
     58 
     59         &-row {
     60             display: flex;
     61             align-items: center;
     62 
     63             .or-form-label {
     64                 width: 25%;
     65             }
     66 
     67             .or-form-input {
     68                 width: 75%;
     69             }
     70 
     71 
     72             @media @small {
     73                 flex-direction: column;
     74 
     75                 .or-form-label,
     76                 .or-form-input {
     77                     width: 100%;
     78                 }
     79             }
     80         }
     81 
     82 
     83         &-actionbar {
     84 
     85             height: 3em;
     86             position: sticky;
     87             bottom: 0;
     88             left: 0;
     89             right: 0;
     90 
     91             display: flex;
     92             justify-content: end;
     93             padding: 1em;
     94             height: auto;
     95 
     96         }
     97 
     98 
     99 
    100         @media @small {
    101             .or-act-form-apply {
    102                 display: none;
    103             }
    104 
    105         }
    106 
    107     }
    108 
    109 
    110     &-input {
    111         width: 85%;
    112         border: 0;
    113         border-width: 0;
    114         border-bottom: 1px solid;
    115         //border-radius: 4px;
    116         box-sizing: border-box;
    117         resize: vertical;
    118         padding: 0.5em;
    119         margin: 0;
    120         outline: none;
    121 
    122         &--name {
    123             font-weight: bold;
    124         }
    125 
    126         &--filename, &--extension {
    127             font-family: 'Source Code Pro', Monospace, Monospaced, Courier;
    128         }
    129 
    130 
    131     }
    132 
    133 
    134     /* Buttons  */
    135     &-btn {
    136         padding: 0.2em;
    137         border: 1px solid @color-overridden-by-theme;
    138         .border-radius(0.1em);
    139         cursor: pointer;
    140 
    141         &--control {
    142             padding: 1em 2em;
    143             margin-left: 1.5em;
    144             min-width: 14em;
    145             .border-radius(0.5em);
    146 
    147             @media @small {
    148                 padding: 1em 1em;
    149                 min-width: 5em;
    150             }
    151         }
    152 
    153         &--primary {
    154             font-weight: bold;
    155         }
    156 
    157         &--secondary {
    158             @media @small {
    159                 min-width: 0;
    160             }
    161         }
    162     }
    163 }