Merge pull request #1 from Creanimo/trunk_refactoring-style-ITCSS

ITCSS conversion to scss

templates/default/010-settings/_index.less → templates/default/010-settings/_index.scss

@@ -6,10 +6,10 @@
 // Set an ILIAS variable here with an il- prefix and overwrite the bootstrap variable in the bootstrap variables file
 // with the il- variable set here.
 
-@import "./_settings_borders.less";
-@import "./_settings_button.less";
-@import "./_settings_color-palette.less";
-@import "./_settings_footer.less";
-@import "./_settings_header.less";
-@import "./_settings_layout.less";
-@import "./_settings_typography.less";
+@import "./_settings_borders.scss";
+@import "./_settings_button.scss";
+@import "./_settings_color-palette.scss";
+@import "./_settings_footer.scss";
+@import "./_settings_header.scss";
+@import "./_settings_layout.scss";
+@import "./_settings_typography.scss";

templates/default/010-settings/_settings_borders.scss

@@ -0,0 +1,8 @@
+//** Base Border Color, e.g. applied to Meta Bar and Breadcrumbs in Default.
+$il-main-border-color: #dddddd;
+//** Darker version of Base Border Color. Used as e.g. Text Inputs.
+$il-main-border-dark-color: #757575;
+
+$il-border-radius-base: 0px;
+$il-border-radius-large: 0px;
+$il-border-radius-small: 0px;

templates/default/010-settings/_settings_button.less → templates/default/010-settings/_settings_button.scss

@@ -2,18 +2,18 @@
 //
 
 //** Size of the font displayed inside a button
-@il-button-font-size: @il-font-size-small;
+$il-button-font-size: $il-font-size-small;
 
 //** Text color of the standard button (most button instances)
-@il-btn-standard-color: white;
+$il-btn-standard-color: white;
 //** Background color of the standard button (most button instances)
-@il-btn-standard-bg: @il-main-color;
+$il-btn-standard-bg: $il-main-color;
 //** Border color of the standard button (most button instances)
-@il-btn-standard-border: @il-main-color;
+$il-btn-standard-border: $il-main-color;
 
 //** Text color of the primary button (most important button on the screen)
-@il-btn-primary-color: white;
+$il-btn-primary-color: white;
 //** Background color of the primary button (most important button on the screen)
-@il-btn-primary-bg: darken(@il-secondary-color, 10%);
+$il-btn-primary-bg: darken($il-secondary-color, 10%);
 //** Border color of the primary button (most important button on the screen)
-@il-btn-primary-border: darken(@il-secondary-color, 10%);
+$il-btn-primary-border: darken($il-secondary-color, 10%);

templates/default/010-settings/_settings_color-palette.less → templates/default/010-settings/_settings_color-palette.scss

@@ -1,73 +1,73 @@
 //== Main Colors
 //
 //## The Main Colors used in ILIAS along with their semantics
-//** For Standard Buttons, Main color used in various places, used to be @brand-primary
-@il-main-color: #4c6586;
-//** For Primary Buttons, used to point to interactions with a special importance, used to be @brand-secondary
-@il-secondary-color: #6ea03c;
-//** Used to indicate some success, used to be @brand-success
-@il-success-color: #6ea03c;
-//** Used to indicate some success, used to be @brand-info
-@il-info-color: #dcb496;
-//** Used to indicate some warning or to draw special focus to some element, used to be @brand-warning
-@il-warning-color: #B54F00;
-//** Used to indicate some warning or to draw special focus to some element, used to be @brand-danger
-@il-danger-color: #d00;
+//** For Standard Buttons, Main color used in various places, used to be $brand-primary
+$il-main-color: #4c6586;
+//** For Primary Buttons, used to point to interactions with a special importance, used to be $brand-secondary
+$il-secondary-color: #6ea03c;
+//** Used to indicate some success, used to be $brand-success
+$il-success-color: #6ea03c;
+//** Used to indicate some success, used to be $brand-info
+$il-info-color: #dcb496;
+//** Used to indicate some warning or to draw special focus to some element, used to be $brand-warning
+$il-warning-color: #B54F00;
+//** Used to indicate some warning or to draw special focus to some element, used to be $brand-danger
+$il-danger-color: #d00;
 
-//** Neutral Color for various Backgrounds, used to be @gray-dark and @il-neutral-color
-@il-neutral-color: #2c2c2c;
-//** Light version of the @il-neutral-color, used to be @gray-light
-@il-neutral-light-color: #737373;
+//** Neutral Color for various Backgrounds, used to be $gray-dark and $il-neutral-color
+$il-neutral-color: #2c2c2c;
+//** Light version of the $il-neutral-color, used to be $gray-light
+$il-neutral-light-color: #737373;
 
 //** Base Background Color, e.g. applied to Meta Bar and Breadcrumbs in Default, but also to panels in main content area.
-@il-main-bg: white;
-//** Title area of various components such as Panels. Used as e.g. in containers as bg. Used to be @il-secondary-bg
-@il-main-dark-bg: #f9f9f9;
+$il-main-bg: white;
+//** Title area of various components such as Panels. Used as e.g. in containers as bg. Used to be $il-secondary-bg
+$il-main-dark-bg: #f9f9f9;
 //** Background of subelements like subforms. Used mainly on the main-dark-bg.
-@il-main-darker-bg: #f0f0f0;
+$il-main-darker-bg: #f0f0f0;
 
 //** Currently used for several highlighting effects, such as hovering
-@il-highlight-bg: lighten(@il-main-color, 50%);
+$il-highlight-bg: lighten($il-main-color, 50%);
 
-//** Used to be @text-color. Can be used on all background colors.
-@il-text-color: #161616;
+//** Used to be $text-color. Can be used on all background colors.
+$il-text-color: #161616;
 //** Used if text is hovered in components such a Dropdowns
-@il-text-hover-color: darken(@il-text-color, 10%);
-//** Used e.g. for Bylines in Forms. Used to be @il-light-text-color. For accessibility reasons, the @il-text-color should only be used on the @il-main-bg.
-@il-text-light-color: lighten(@il-text-color, 35%);
+$il-text-hover-color: darken($il-text-color, 10%);
+//** Used e.g. for Bylines in Forms. Used to be $il-light-text-color. For accessibility reasons, the $il-text-color should only be used on the $il-main-bg.
+$il-text-light-color: lighten($il-text-color, 35%);
 
-//** Used to be @link-color
-@il-link-color: @il-main-color;
-//** Used to be @link-hover-color
-@il-link-hover-color: darken(@il-link-color, 10%);
+//** Used to be $link-color
+$il-link-color: $il-main-color;
+//** Used to be $link-hover-color
+$il-link-hover-color: darken($il-link-color, 10%);
 
 //** Used to set focus on interactive elements for keyboard navigation.
-@il-focus-color: #0078D7;
-@il-focus-protection-color: #FFFFFF;
+$il-focus-color: #0078D7;
+$il-focus-protection-color: #FFFFFF;
 
 //== Extended Colors
 //
 //## Extended Colors of ILIAS to be used to generate coloring for components like charts.
 
 //** Variant 1 of the extended color set in ILIAS
-@il-extended-color-1: #f3de2c;
+$il-extended-color-1: #f3de2c;
 //** Variant 2 of the extended color set in ILIAS
-@il-extended-color-2: #d38000;
+$il-extended-color-2: #d38000;
 //** Variant 3 of the extended color set in ILIAS
-@il-extended-color-3: #307C88;
+$il-extended-color-3: #307C88;
 //** Variant 4 of the extended color set in ILIAS
-@il-extended-color-4: #86cb92;
+$il-extended-color-4: #86cb92;
 //** Variant 5 of the extended color set in ILIAS
-@il-extended-color-5: #ce73a8;
+$il-extended-color-5: #ce73a8;
 //** Variant 6 of the extended color set in ILIAS
-@il-extended-color-6: #82639e;
+$il-extended-color-6: #82639e;
 //** Variant 7 of the extended color set in ILIAS
-@il-extended-color-7: #9e7c7d;
+$il-extended-color-7: #9e7c7d;
 //** Variant 8 of the extended color set in ILIAS
-@il-extended-color-8: #f75e82;
+$il-extended-color-8: #f75e82;
 //** Variant 9 of the extended color set in ILIAS
-@il-extended-color-9: #ea4d54;
+$il-extended-color-9: #ea4d54;
 
 //** all variants of letter avatar background colors (MUST be 26), note for a11y reason, they must be in contrast 3x1 to white (foreground color)
-@il-avatar-letter-color-variants: #0e6252, #107360, #aa890a, #c87e0a, #176437, #196f3d, #bf6516, #a04000, #1d6fa5, #1b557a, #bf2718, #81261d, #713b87, #522764, #78848c, #34495e, #2c3e50, #566566, #90175a, #9e2b6e, #d22f10, #666d4e, #715a32, #83693a, #963a30, #e74c3c;
+$il-avatar-letter-color-variants: #0e6252, #107360, #aa890a, #c87e0a, #176437, #196f3d, #bf6516, #a04000, #1d6fa5, #1b557a, #bf2718, #81261d, #713b87, #522764, #78848c, #34495e, #2c3e50, #566566, #90175a, #9e2b6e, #d22f10, #666d4e, #715a32, #83693a, #963a30, #e74c3c;
 

templates/default/010-settings/_settings_footer.scss

@@ -0,0 +1,4 @@
+//** footer
+$il-footer-bg-color: $il-main-bg;
+$il-footer-color: $il-text-color;
+$il-footer-height: 45px;

templates/default/010-settings/_settings_header.scss

@@ -0,0 +1,6 @@
+//** header
+$il-standard-page-logo-height: 45px;
+$il-standard-page-logo-width: 45px;
+$il-standard-page-header-height: 60px;
+$il-standard-page-header-bg-color: $il-main-bg;
+$il-standard-page-header-page-title-color: $il-text-color;

templates/default/010-settings/_settings_layout.scss

@@ -0,0 +1 @@
+$il-grid-float-breakpoint-max: 768px;

templates/default/010-settings/_settings_typography.less → templates/default/010-settings/_settings_typography.scss

@@ -1,35 +1,36 @@
+@use "sass:math";
 //== Typography
 //
 //##
 
-//** if left unchanged, you have to copy delos fonts folder to your skin folder. To use the delos fonts in your skin, please change this value (in custom less data or variables.less of your custom skin) to "../../../../templates/default/fonts/"
-@il-web-font-path: "./fonts/";
-@il-font-family-sans-serif: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+//** if left unchanged, you have to copy delos fonts folder to your skin folder. To use the delos fonts in your skin, please change this value (in custom less data or variables.scss of your custom skin) to "../../../../templates/default/fonts/"
+$il-web-font-path: "./fonts/";
+$il-font-family-sans-serif: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
 
 //** Used to calculate pixel to rem
-@il-pixel-to-rem: 1/16;
+$il-pixel-to-rem: 1/16;
 //** Should only be used to indicate mainbar entries. Equivalent to 10px => 10*1/16=0.625rem.
-@il-font-size-xsmall:		0.625rem;
+$il-font-size-xsmall:		0.625rem;
 //** Used to indicate subordinate text, such as bylines in forms, subtabs, etc. Equivalent to 12px.
-@il-font-size-small:		0.75rem;
+$il-font-size-small:		0.75rem;
 //** Default font size. Also used for h5. Equivalent to 14px.
-@il-font-size-base:		  0.875rem;
+$il-font-size-base:		  0.875rem;
 //** Used to indicate h4. Equivalent to 16px.
-@il-font-size-large:		1rem;
+$il-font-size-large:		1rem;
 //** Used to indicate h3. Equivalent to 18px.
-@il-font-size-xlarge:    1.115rem;
+$il-font-size-xlarge:    1.115rem;
 //** Used to indicate h2. Equivalent to 24px.
-@il-font-size-xxlarge:    1.5rem;
+$il-font-size-xxlarge:    1.5rem;
 //** Used to indicate h1. Should only used one time per screen. Equivalent to 28px.
-@il-font-size-h1:    1.75rem;
+$il-font-size-h1:    1.75rem;
 
 //** Unit-less `line-height` for use in components like buttons.
-@il-line-height-base:		1.428571429;
-@il-line-height-computed:    unit(floor(((unit(@il-font-size-base)/@il-pixel-to-rem) * @il-line-height-base)),px); // ~20px
+$il-line-height-base:		1.428571429;
+$il-line-height-computed:    unit(math.floor(((unit($il-font-size-base)/$il-pixel-to-rem) * $il-line-height-base)),px); // ~20px
 
 //** Used to lighten text, e.g. workflow steps.
-@il-font-weight-light:    300;
+$il-font-weight-light:    300;
 //** Default font weight.
-@il-font-weight-base:    400;
+$il-font-weight-base:    400;
 //** Used to indicate headings.
-@il-font-weight-bold:    600;
+$il-font-weight-bold:    600;