@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/scaffolding/shared.less

@@ -0,0 +1,249 @@
+@import "../../shared";
+@import "../theme-dark";
+@import "../layout/shared";
+
+@field_min_width: 199px;
+@field_min_width_wide: 417px;
+@field_forecolor: @color_field_fore;
+@field_focus_forecolor: @color_field_fore_focus;
+
+@field_left: @grid_spacing * 5 / 6;
+@input_padding_horiz: @grid_spacing / 3;
+
+@field_readonly_top: .2 * (@field_height / 1.5);
+@field_icon_size: 1.1rem * @font_rem_factor;
+@field_padding_top: @grid_spacing/3;
+@field_minimal_label_height: @field_minimal_fontsize * @font_size * 1.5625;
+
+.LabelTopMargin() {
+    & when (@border_field_underline = false) {
+        margin-top: @field_padding_top + @field_readonly_top + @border_field_size;
+    }
+
+    & when (@border_field_underline = true) {
+        margin-top: @field_padding_top + @field_readonly_top;
+    }
+}
+
+.Watermark() {
+    color: @color_watermark;
+    font-style: italic;
+    font-family: @font_std;
+    //font-size: .86em;
+}
+
+.Outline(@clr) when (@field_outline_width > 0) {
+    .Outline(@field_outline_width, @clr);
+}
+
+.Outline(@width, @clr) {
+    // hack: since outline has no outline-radius support
+    box-shadow: 0 0 0 @width @clr;
+}
+
+.NoOutline() {
+    box-shadow: none;
+}
+
+.FormFieldItemFocused() {
+    color: @field_focus_forecolor;
+
+    .@{PCSS}-input,
+    .@{PCSS}-viewfinder {
+        border-color: fade(@color_default, 40);
+        .Outline(@color_field_outline);
+    }
+}
+
+.FormFieldItemBorder() {
+    .FormFieldItemBorders();
+    border-color: fade(@color_default, 20);
+}
+
+.FormFieldItemInline() {
+    min-width: 0;
+    width: 100%;
+    line-height: @field_height;
+}
+
+.FormFieldItemMultiline() {
+    min-width: @field_min_width_wide;
+
+    textarea.@{PCSS}-input {
+        line-height: 1.5;
+        display: block;
+        width: 100%;
+        resize: none;
+    }
+}
+
+.FormFieldStretch() {
+    display: flex;
+    align-content: stretch;
+    align-items: stretch;
+
+    > [pacem] {
+        flex: 1 0 100%;
+    }
+}
+
+.FormFieldItem() {
+    .FormFieldItem(@field_height);
+}
+
+.FormFieldItem(@f_height) {
+    padding: 0 @input_padding_horiz;
+
+    &when (@border_field_underline = true) {
+        .FormFieldItemSize(@f_height, @border_field_size);
+    }
+
+    &when (@border_field_underline = false) {
+        .FormFieldItemSize(@f_height, 2 * @border_field_size);
+    }
+    //background: none;
+    box-sizing: border-box;
+    color: @field_forecolor;
+
+    .Watermark() {
+        color: @color_watermark;
+        font-style: italic;
+        font-family: @font_std;
+        //font-size: .86em;
+    }
+
+    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+        .Watermark();
+    }
+
+    &::-moz-placeholder { /* Firefox 19+ */
+        .Watermark();
+    }
+
+    &:-ms-input-placeholder { /* IE 10+ */
+        .Watermark();
+    }
+
+    &:-moz-placeholder { /* Firefox 18- */
+        .Watermark();
+    }
+}
+
+.FormFieldItemSize(@f_height, @brds) {
+    .FontStd(1.1 * @f_height / @field_height);
+    min-height: @f_height + @brds;
+}
+
+.FormFieldItemWrapperCore(){
+
+    .@{PCSS}-viewfinder,
+    .@{PCSS}-input {
+        .FormFieldItemBorder();
+        background-color: @color_input_back;
+        border-radius: @border_input_radius;
+    }
+
+    .@{PCSS}-viewfinder {
+        // nested .@{PCSS}-input ot .@{PCSS}-viewfinder don't show borders
+        .@{PCSS}-input,
+        .@{PCSS}-viewfinder {
+            border: none;
+            border-radius: 0;
+            background: none;
+        }
+
+        .@{PCSS}-input {
+            padding: 0;
+        }
+    }
+
+    &.@{PCSS}-focus {
+        .FormFieldItemFocused();
+
+        &.@{PCSS}-outline when (@field_outline_width = 0) {
+            .@{PCSS}-input,
+            .@{PCSS}-viewfinder {
+                .Outline(2px, @color_default);
+            }
+        }
+
+        .@{PCSS}-viewfinder {
+            // nested .@{PCSS}-input ot .@{PCSS}-viewfinder don't show outline when focused
+            .@{PCSS}-input,
+            .@{PCSS}-viewfinder {
+                .NoOutline();
+            }
+        }
+    }
+
+    .@{PCSS}-readonly {
+        .FontStdSize(1.1);
+        display: block;
+        min-height: @field_height;
+        line-height: 1.5;
+        margin-bottom: @border_field_size; // <- replaces the bottom border
+        & when (@border_field_underline = true) {
+            margin-top: 0; //@field_readonly_top;
+        }
+
+        & when (@border_field_underline = false) {
+            margin-top: /*@field_readonly_top +*/ @border_field_size; // <- replaces the top border
+        }
+    }
+
+    *[hidden] {
+        display: none !important;
+    }
+}
+
+.FormFieldItemWrapper() {
+    //
+    font-size: 1em;
+    position: relative;
+    display: block;
+    /*&when (@field_outline_width > 0) {
+        margin: @field_outline_width;
+    }*/
+    @media (min-width: @threshold_lg) {
+
+        &:not(.field-stretch) {
+            min-width: @field_min_width;
+            display: inline-block;
+        }
+    }
+
+    .FormFieldItemWrapperCore();
+}
+
+.FormFieldIcon(@icon) {
+    position: relative;
+    @_pad: @input_padding_horiz;
+
+    .@{PCSS}-input {
+        padding-left: @field_height;
+        box-sizing: border-box;
+    }
+
+    &::before {
+        .Icon(@icon, @field_icon_size); //@field_left);
+        line-height: @field_height;
+        left: @_pad;
+        top: 1px; // t.b.d.
+    }
+
+    &.@{PCSS}-invalid::before{
+        color: @color_field_fore_error;
+    }
+}
+
+.FormFieldLabelIcon(@icon) {
+    padding-left: @grid_spacing;
+
+    &::before {
+        .Icon(@icon, @field_icon_size);
+        line-height: 1.5 * 1.1 * @font_rem_factor;
+        color: @color_input_toggle;
+        left: 0;
+        top: 0; // @input_padding_horiz / 1.5;
+    }
+}

package/pacem/text-overrides.less

@@ -0,0 +1,219 @@
+@import "theme-dark";
+
+/* #region text overrides */
+
+@_font_faces: std, main, tech;
+
+each(@_font_faces, {
+   
+    .type-@{value}{
+        font-family: ~"var(--@{PCSS}-font-@{value})" !important;
+        
+        @_f: ~"font_@{value}_rem_factor";
+        @_factor : @@_f;
+    
+        font-size: 1rem * @_factor;
+
+        &.font-size-regular{
+            font-size: 1rem * @_factor;
+        }
+
+        &.font-size-small{
+            font-size: 1rem * .9 * @_factor;
+        }
+
+        &.font-size-smaller{
+            font-size: 1rem * .8667 * @_factor;
+        }
+
+        &.font-size-tiny{
+            font-size: 1rem * .75 * @_factor;
+        }
+
+        &.font-size-smallest{
+            font-size: 1rem * .6667 * @_factor;
+        }
+
+        &.font-size-big{
+            font-size: 1rem * 1.3333 * @_factor;
+        }
+
+        &.font-size-bigger{
+            font-size: 1rem * 1.6667 * @_factor;
+        }
+
+        &.font-size-huge{
+            font-size: 1rem * 2 * @_factor;
+        }
+
+        &.font-size-biggest{
+            font-size: 1rem * 2.5 * @_factor;
+        }
+
+    }
+
+});
+
+
+.text-strike {
+    text-decoration: line-through !important;
+}
+
+.text-small {
+    font-size: .9em !important;
+}
+
+.text-small-steady {
+    .FontMainSize(12/14) !important;
+}
+
+.text-big {
+    font-size: 1.5em !important;
+}
+
+.text-big-steady {
+    .FontMainSize(18/14) !important;
+}
+
+.text-smaller {
+    font-size: 0.86667em !important;
+}
+
+.text-smaller-steady {
+    .FontMainSize(10/14) !important;
+}
+
+.text-tiny {
+    font-size: 0.75em !important;
+}
+
+.text-tiny-steady {
+    .FontMainSize(8/14) !important;
+}
+
+.text-bigger {
+    font-size: 2em !important;
+}
+
+.text-bigger-steady {
+    .FontMainSize(24/14) !important;
+}
+
+.text-left {
+    text-align: left !important;
+}
+
+.text-right {
+    text-align: right !important;
+}
+
+.text-center {
+    text-align: center !important;
+}
+
+.text-justify {
+    text-align: justify !important;
+}
+
+.text-nowrap {
+    white-space: nowrap !important;
+}
+
+.text-pre {
+    white-space: pre !important;
+}
+
+.text-prewrap {
+    white-space: pre-wrap !important;
+}
+
+.text-truncate, // < bootstrap compat
+.text-ellipsed {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.text-clamp {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    &.clamp-2 {
+        -webkit-line-clamp: 2;
+    }
+
+    &.clamp-3 {
+        -webkit-line-clamp: 3;
+    }
+
+    &.clamp-4 {
+        -webkit-line-clamp: 4;
+    }
+
+    &.clamp-5 {
+        -webkit-line-clamp: 5;
+    }
+}
+
+.text-upper {
+    text-transform: uppercase !important;
+}
+
+.text-lower {
+    text-transform: lowercase !important;
+}
+
+.text-capital {
+    text-transform: capitalize !important;
+}
+
+.text-bold,
+.text-strong {
+    font-weight: 700 !important;
+}
+
+.text-italic,
+.text-emphasis {
+    font-style: italic !important;
+}
+
+.text-tech {
+    font-family: @font_tech !important;
+}
+
+.text-std {
+    font-family: @font_std !important;
+}
+
+.text-main {
+    font-family: @font_main !important;
+}
+
+.text-normal {
+    text-transform: none !important;
+    font-style: normal !important;
+    font-weight: normal !important;
+}
+
+.text-rootsize {
+    .FontStdSize(1) !important;
+}
+
+.text-noshadow {
+    text-shadow: none !important;
+}
+
+.text-reset {
+    .text-normal();
+    font-family: ~"var(--@{PCSS}-font-std)" !important;
+    .FontStdSize(1);
+}
+
+.text-inherit,
+.text-inherit:hover,
+.text-inherit:active {
+    color: inherit;
+}
+/* #endregion */