HTML and CSS Reference
In-Depth Information
.card {
height: 100%;
width: 100%;
left: -100%;
position: absolute;
}
.card.active {
left: 0px;
}
}
The next things to style are the screen bars. The screenbars will sit at the top
and bottom of the screen. These need to be styled in a uniform manner so that
users can find them easily. As you can see below, the gradient mixin is used to
create a CSS3 gradient as the background for this element.
/**
* Header taskbar styles
*/
.screenbar {
@include gradient(#7D9DCE, #ABC1E1, 90deg);
}
The taskbar is quite complicated as it contains the logo of the application, the
search field and a clear button. The taskbar needs to be the width of the screen
and the search field needs to be flexible so that no matter the screen size, it
ocupy's the majority of the space.
As you can see from the code below, you set the font colour for the taskbar to
be white and the overflow has been set to hidden so that it will surround any
floated elements. The taskbar also has 10px padding and a red border at the
bottom.
header#taskbar {
color: #FFFFFF;
overflow: hidden;
padding: 10px;
border-bottom: 1px solid #BF2628;
}
You will now want to style the branding/logo for the app. In order to do this, you
can use a header (h1) element and then use an image replacement technique to
show the logo. This can be achieved by setting the width and the height of the
h1 to the same width and height as the logo, setting the text-indent property to
