File modules/cms/ui/themes/default/style/openrat-form.less

Last commit: Tue Nov 30 23:56:16 2021 +0100	dankert	New: Checkboxes and Radio buttons with theme colors.


     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 }



Download modules/cms/ui/themes/default/style/openrat-form.less


History
Tue, 30 Nov 2021 23:56:16 +0100	dankert	New: Checkboxes and Radio buttons with theme colors.
Mon, 29 Nov 2021 01:22:40 +0100	Jan Dankert	New: Themes may contain multiple color schemes (for now only "dark" and "light"), modern browsers are selecting the right scheme.
Mon, 15 Feb 2021 00:47:53 +0100	Jan Dankert	Fix: Displaying global search results instead of navigation.
Sun, 14 Feb 2021 23:18:14 +0100	Jan Dankert	New: Confirmation needed if a dialog is closed which has unsaved changes.
Fri, 12 Feb 2021 22:41:40 +0100	Jan Dankert	Nicer look of the search input field (outline:none was the key)
Fri, 12 Feb 2021 00:43:08 +0100	Jan Dankert	New: Style colors; Fix: Mobile navigation, global search.
Tue, 1 Dec 2020 00:07:39 +0100	Jan Dankert	New: Visibility-Button for password fields, fix: QR-code button for mobile devices.
Sat, 14 Nov 2020 22:32:01 +0100	Jan Dankert	Fix: Show name/description of default language.
Thu, 5 Nov 2020 22:56:49 +0100	Jan Dankert	box-shadow should only be set in the theme css (because a color is needed and a color is theming)
Thu, 5 Nov 2020 22:51:14 +0100	Jan Dankert	Cleaned up the LESS files, more use of the BEM schema.
Sun, 18 Oct 2020 01:30:49 +0200	Jan Dankert	New component "fieldset" for better form layout.
Sat, 10 Oct 2020 01:29:41 +0200	Jan Dankert	Refactoring: Only using CSS classes with the 'or-'-prefix.
Wed, 7 Oct 2020 23:29:12 +0200	Jan Dankert	Fix: The password field was unstyled.
Mon, 5 Oct 2020 23:32:06 +0200	Jan Dankert	UI: Nicer buttons
Sun, 4 Oct 2020 23:53:25 +0200	Jan Dankert	New: The tree is now hidable with a dedicated button. No more hover effect in the navigation.