# Change Log

- Version 3.0.0-12
- Version 3.0.0-7
- Version 3.0.0-6
- Version 3.0.0-5
- Version 2.4.0
- Version 2.3.0
- Version 2.2.0
- Version 2.1.0
- Version 2.0.2
- Version 2.0.1
- Version 2.0.0
- Version 1.4.1
- Version 1.4.0
- Version 1.3.1
- Version 1.3.0
- Version 1.2.0
- Version 1.1.1
- Version 1.1.0
- Version 1.0.0

## Version 3.0.0-12

### Features and Improvements

- CoreCSS is now available via npm! Just run `npm install is24-corecss`. Make sure you have setup FASt correctly.
- Simplified folder structure inside ZIP archive.
- Segmented controls are now available!
- Links have no visited state anymore.
- Flex grid is out of its experimental state.
- LESS Variables and Mixins now have a documentation.

### Bug fixes

- Remove outline from `link-text` buttons, bringing them in line with regular links.
- Change highlight color on focus for links to brand orange.
- `disabled` did not look completely right for checkboxes and other form elements, as well as for `dropdown-links`. That is fixed now.
- Feedback form has been updated with up-to-date contact methods.

## Version 3.0.0-7

This version brings the new IS24 icon set with it.

### Features and Improvements

- All new IS24 icon set.

## Version 3.0.0-6

This version focuses on fixing our spacing by going back.

### Bug fixes

- Roll back spacing to the way it was before 3.x. We got the feedback that the new system breaks layouts and makes upgrading hard which is why we changed that back.
- Roll back font-weight of links to normal / 400.
- Fixes the teasers on our main documentation page.

## Version 3.0.0-5

Versions 3.x are all about implementing the Cosma design system as a part of the CoreCSS. In this release we started this journey with buttons, fonts, and form elements.

See the Migration Guide for a quick guide on how to migrate from version 2.3.0 to version 3.0.0.

### Features and Improvements

- All new typo! Almost every piece of text has been updated, alongside with the documentation.
  - `<h6>` is now the same as `<h5>`. Please refrain from using it in the future.
- Spacings have been unified. No more changes between desktop and mobile (rolled back in 3.0.0-6)
- All new color palette! We now use only four main colors, making the color palette much clearer in its purpose. The variety of text colors has been reduced. If you were using the LESS color variables before, you will need to adjust accordingly, although the old colors will continue working.

- #### All new form inputs!

  Every piece of form input has been redesigned. For checkboxes and radio buttons, make sure you include `id` in your `<input>` and a corresponding `for` in your `<label>`!

  There are also new form elements: toggle switches and dropdown links.

- #### All new buttons!

  Every button has been redesigned.

  Please mind that the new best practice is that buttons should be put into their own line, as opposed to next to input elements.

### Breaking Changes

- State-bound buttons are no longer a thing. Please make sure to migrate away from them. State-bound buttons look like this: `palm-button` or `lap-button`.
- Checkboxes and radio buttons now need `id` set in `<input>` and a corresponding `for` in `<label>`. If these attributes are not set, these controls will not be clickable.

### (Potentially) Breaking Changes

- All font sizes have increased. This might break your layout, especially if you have vertically aligned text blocks.

### Deprecated Features

- The old color palette is now deprecated and does not have a suitable replacement for every color. If you were using the LESS color variables before, you will need to adjust accordingly since all colors have changed.
- Line heights like `font-line-xs` have been deprecated.
- `fineprint` has been replaced by `font-discreet`. Please change accordingly.

## Version 2.4.0

### Features and Improvements

- The new `page-wrapper--full-width` modifier allows you to create full-width page layouts.
- The FontAwesome icon font has been upgraded to version 4.6.3.
- The advertisement component now allows for the placement of a skyscraper ad on the left-hand side of the page.
- The `viewport` element has been deprecated and references to it removed from the documentation. We do not believe the element is necessary anymore, and its overflow restrictions may introduce a number of elusive bugs.

### Bug Fixes

- Disabled buttons are no longer see-through and will now look the same regardless of what background they are placed on.
- Fixed an issue where the flex grid would behave strangely if placed directly underneath uncleared floating elements.

## Version 2.3.0

### Features and Improvements

- The lightest shade of gray (`@gray9`) is now slightly darker to get better contrast on white backgrounds. Similarly, input element borders are now one shade darker to get better contrast on gray backgrounds.
- The default font size of all form input elements (and of text within forms in general) has been increased on small displays to increase legibility and to avoid browser-forced zoom-ins on user interaction.
- The FontAwesome icon font has been updated from version 4.2.0 to 4.5.0.

### Bug Fixes

- Fixed a positioning issue where the super banner and skyscraper ad placements would be placed outside of the viewport if the page wrapper element didn't also have a certain, non-advertisement-related CSS class.
- The arrow icon on form select elements is now properly placed at the right edge of the field in Internet Explorer.
- Mobile devices running on iOS will no longer increase the font size when changing to landscape mode.

## Version 2.2.0

### Features and Improvements

- The padding on the `content-wrapper` element has been increased on small devices to make pages feel less cramped.
- The new `font-line-xs` class allows for more narrowly spaced lines of text.
- Labels for required form inputs are now positioned more closely to their inputs and are no longer printed in bold text.
- Stand-alone links may now be underlined (in those rare cases where you would need to).
- The color palette documentation now offers more detailed information about color codes and their usage. You can now copy the color codes right off the page.
- Palm-sized devices will now load only two of the font weights for the Open Sans web font (normal and semi-bold) to improve loading speed.
- The Open Sans font files have been removed from the project in favor of the stand-alone Open Sans files hosted on the Static Server.

### New Modules and Components

- The Tooltips and Popovers module is now integrated into the Core framework.
- A new (experimental) extension to the grid offers a bunch of new layouting features that you may find very useful. Go and try it out, then give us feedback!
- You can now make any text element look like a specific type of headline with the headline font classes.
- There is a new helper which will horizontally center block elements.
- A new addition to the content wrapper lets you stretch content to the full page width from within a content wrapper.

### Deprecated Features

- The Top Navigation module is now deprecated. It is being superseded by the new individual Top Navigation module, which you may find here.

### Bug Fixes

- Text wraps on links with icons are now properly aligned regardless of font size.
- Headlines have had their line height increased so that character descenders are no longer cut off if the headline's overflow is hidden.
- Buttons made from `<a>` tags will now look okay even if they have no `href` attribute.
- Full-width buttons (using a variation of the `one-whole` class) are now less prone to layout bugs when the label text width approaches the width of the button.

## Version 2.1.0

### Features and Improvements

- The Top Navigation layout has been improved to allow the use of hover tabs on display widths starting from 768px. This should make navigation easier on many tablets in portrait mode, which used to get only the slide-in navigation.
- Form inputs can now be resized with the font size classes.
- Buttons sizes have been adjusted within forms to make them fit better alongside form input fields.
- The Campaign Box can now be toggled by device state.
- There is a new class to exclude elements from the print layout.
- Standard links are now always shown blue regardless of whether or not they have been visited.

### New Modules and Components

- The new Absolute Positioning module allows you to absolutely position elements depending on device state.
- The new Links With Visited State module lets you apply the violet visited state to individual links or groups of links.

### Bug Fixes

- The Open Sans font reference in the CSS has been improved to prevent legacy browsers from misinterpreting the definition and requesting a nonexistent resource.
- The Open Sans Light font has been updated to fix a bug where certain special characters, such as “é”, were shown bolder than the rest of the text.

## Version 2.0.2

### Bug Fixes

- Form select fields now explicitly have a white background. On Linux systems, some browsers would render a gray background due to differing user agent styles.
- The welcome message in the top navigation account tab will no longer cut off character descenders (as on the letters “g” or “q”).
- The show/hide state of the avatar image in the top navigation account tab may now be toggled separately from the login state. Before, it was not possible to show a placeholder image to non-logged-in users.
- The “powered by” logo in the top navigation is now less likely to overlap the brand claim on very small devices.

## Version 2.0.1

### Bug Fixes

- Fixed a bug where on certain mobile browsers the slide-in navigation would spontaneously expand and cover the content area after scrolling.
- Fixed a bug where, using the default browser on certain Android devices, the top navigation would expand and cover the whole screen in orange, rendering the page unusable.

## Version 2.0.0

This release introduces substantial changes to the visual look and feel of the page. The typography has been adjusted to be larger and clearer, the spacing between elements has been increased to achieve a more open feel, and forms and lines have been reworked to convey a sense of order and logic by reducing unintended patterns and clutter.

See the Migration Guide for a quick guide on how to migrate from version 1.4.0 to version 2.0.0.

### Features and Improvements

- #### Page Frame

  - The page wrapper now has a maximum width of 1170px, including paddings.
  - Left and right borders have been added to the page wrapper by default to fence off the actual page area from the background on very large displays.

- #### Backgrounds

  - A default color has been defined for the `background` class to make usage more straightforward.
  - Some other purely presentational background colors have been removed in favor of the standard color.

- #### Borders

  - A default color has been defined for the `border` class, so you no longer need to specify both `border` and `border-<color>`.

- #### Buttons

  - Buttons have been adjusted to look flatter.
  - To keep their naming consistent regardless of visuals, the button class names have been changed from `button-lightblue`, `button-darkblue`, and `button-orange` to `button`, `button-secondary`, and `button-primary`, respectively.

- #### Fonts

  - The new default typeface for both headlines and regular text is Open Sans.
  - The Open Sans fontface is available in the font weights 300, 400, 600, and 700. You can apply these weights with the classes `font-light`, `font-normal`, `font-semibold`, and `font-bold`, respectively.
  - All default font sizes and font size classes have been adjusted to go better with the new typeface.
  - Text will no longer be displayed larger on palm-sized devices. All font sizes now have fitting counterparts for small and large devices.
  - There is a new large font size, which will be the default size for H1 headings. You can apply this size to your text with the new `font-xxxl` class.
  - The new `font-lightgray` class allows you to turn your text a shade lighter. (This function was formerly associated with `font-light` and has been renamed to solve a naming conflict.)

- #### Forms

  - The standard form theme now has a more generic name to facilitate future changes (`form-theme-standard`).
  - Form inputs are now larger to go along with the typographical changes and to improve usability on small devices.

- #### Spacings

  - All spacings have had their values adjusted to introduce more free space into pages. This affects all `margin-`, `padding-`, `gutter-`, and `list-spacing-` classes.
  - Spacings are now smaller on palm-sized devices than on larger devices to conserve space.
  - Spacings now come in an “XXL” variant. All of the above-mentioned classes now work with the `*-xxl` suffix.

- #### New Components

  - You can use the campaign box module to create an eye-catcher for your main product entry.
  - The breadcrumb navigation module tells users their location on the site.
  - The `text-spacing` helper allows you to apply a standard spacing to an arbitrary number of paragraphs without having to manipulate each one individually.

### Deleted Features

- #### Background Colors

  - `background-lightgray`, `background-lightblue`, `background-darkblue`, and `background-darkgray` have been removed – there is only one standard background color now, applied through `background`.

- #### Borders

  - `border-lightblue`, `border-darkblue`, `border-lightgray`, and `border-darkgray` have been removed – these purely presentational border colors have been dropped in favor of the standard color which is now bound to the `border` class.

- #### Buttons

  - `button-orange` – has been renamed to `button-primary`.
  - `button-darkblue` – has been renamed to `button-secondary`.
  - `button-lightblue` – has been replaced by the new white default button (`button`).
  - `button-transparent` – the transparent button has been dropped due to a lack of use cases. Please use the white button instead.

- #### Fonts

  - The `font-light` class will no longer turn the text color of an element lighter. Use the new `font-lightgray` instead.
  - The font family classes `font-global` and `font-headline` have been removed because they no longer make sense with regular text and headlines sharing the same font family.
  - The `font-line-l` class has been removed because an increase in the standard line height has made it unnecessary to further increase the line height of an element.

- #### Forms

  - `form-theme-blue` – The blue form theme has been replaced. The new standard theme has a more generic name to facilitate future changes (`form-theme-standard`).

- #### Rounded Corners

  - All classes for rounded corners (`rounded`, `rounded-*`) have been removed because they do not fit the new design principles.

- #### Page Header – Full

  - The old global header `page-header-full` has been removed in favor of the new standard top navigation (`top-navigation`).

- #### Advertisements

  - Due to changes to the top navigation, it is no longer possible to contain super banner ads within the header. As such, the `page-wrapper--with-ads--contained` class is now inactive.

### Developers

- The LESS CSS variables and mixins used by the Core project will from now on be exported with each version in the Bundled Resources archive. You can include these in your own projects to get access to the relevant variables for the respective Core version that your project is based on.

### Bug Fixes

- The SSO login script will now correctly throw away duplicates when attaching parameters to SSO links.
- The header script was adjusted slightly to alleviate a bug that may occur in heavily dynamic apps where the header will sometimes stick to the top of the page regardless of scroll position.

## Version 1.4.1

### Bug Fixes

- Fixed a bug where on certain mobile browsers the slide-in navigation would spontaneously expand and cover the content area after scrolling.
- Fixed a bug where, using the default browser on certain Android devices, the top navigation would expand and cover the whole screen in orange, rendering the page unusable.

## Version 1.4.0

### Features and Improvements

- We implemented some layout changes to avoid broken alignments and visual artifacts in pages with advertisements. The content area is now centered and has a maximum width of 1280px, and elements will no longer be able to break out of that area, as the header and footer used to.
- As a result of the above, the `content-wrapper-container` element has become obsolete. You no longer need to wrap your `content-wrapper` elements in these.
- With the new `page-wrapper--border` class, you can apply a border to the left and right sides of your page wrapper to distinguish it from the rest of the window background. This is especially useful in centered layouts.

### Bug Fixes

- The layout of the first-level items in the top navigation bar has been adjusted to ensure that tabs will always be positioned in the same place, no matter which item is highlighted.
- The stacking order of the account tab has been adjusted to prevent other content from overlapping it.
- The login script now correctly appends a configurable return URL and application name parameter to the SSO registration link.

## Version 1.3.1

### Bug Fixes

- Fixed a bug in the advertisement styles where skyscraper banners that are part of a hockey stick configuration would not be shown regardless of display size on pages which have not yet adopted the new ad layout.

## Version 1.3.0

### Features and Improvements

- The OpenSans typeface is now available in light font weight (300).
- The FontAwesome icon set has been updated. You can now use icons up to version 4.2.0.
- We introduced a new `content-wrapper-container` element. All `content-wrapper` elements should be nested in one of these to make proper alignment possible in layouts with advertisements.
- The way that advertisements are shown has been adjusted to make sure that ads are always as close as possible to the content column. On wide displays, the ads will now be drawn on top of the page and attached to the centered content column.
- The “screen” condition has been removed from all media queries to make the respective styles available to devices other than regular screen interfaces, most notably printers. Before, printing pages would sometimes result in duplicate content because of misregarded hiding classes.

## Version 1.2.0

### Features and Improvements

- Added the new top navigation bar, which along with a modified version of the white header forms the new global header.
- Added the `corporate-powered-by` module which you can use to show the “powered by Telekom” logo on the top right of standard pages (mainly in conjunction with the new header).
- Added the Open Sans typeface to the pool of standard fonts. This is currently only used for the new global top navigation – you can apply the font face manually by adding the `font-opensans` class.
- The `font-semibold` class lets you display text in semi-bold letters. This is an important distinction in certain typefaces, such as Open Sans.
- The new `vertical-center` helper gives you a way to vertically center any element within its parent element.

## Version 1.1.1

### Bug Fixes

- Moved CSS file for browsers without media query support up in the tree to fix faulty relative references. Also fixed the banner so it will now show the correct version number.
- Mirrored a couple of recent changes which had previously been missing to `core_no-mq.css` file.
- Removed all styles from `core_no-mq.css` which are exclusively for the palm or lap states so that browsers without media query support will apply only those styles that are meant for desk-top devices.

## Version 1.1.0

### Features and Improvements

- Error color was made a few shades lighter for improved contrast to regular text.
- Link icons now work within link lists even if you wrap the link in another element. Before, structures such as `ul.icon-arrow > li > div > a` would not have been allowed.
- Added `clearfix-before` so you can now clear block elements toward the top – useful for when you want to contain top margins on an element's descendants, for example.
- Added media-query-less variant of Core CSS file to replace respond.js – you will need this if you wish to support IE8 and plan to implement the CSS from another domain (as in “www.static-immobilienscout24.de”)
- Added a blue variant of the “NEU” icon to the global header which works better on the world tabs than the regular white and orange one.
- Added Arial to the pool of potential fonts for headlines to improve the experience for Linux users browsing with Firefox.

### Bug Fixes

- Fixed info banner in zipped CSS files that would show a placeholder rather than the current version.
- Prevented horizontal resizing of `textarea` elements within `form` to avoid broken layouts.
- Adjusted line height on global header's active world tab to get rid of a phantom border in recent versions of Firefox.
- Fixed broken layout of welcome text for logged-in users in the global header.
- Adjusted sub navigation bar in global header to prevent tab hover effect from overlapping content below the header.
- Attached affiliate link bar (`scout-verticals`) explicitly to the top left to avoid layout bugs in case its parent container has horizontal padding.

## Version 1.0.0

Initial release.