javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

.item styles/active states

Browse Source
This commit is contained in:
Adam Bradley
2013-11-13 16:10:37 -06:00
parent 3400cc0276
commit fdf0c01d98
8 changed files with 341 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
dist/css/ionic.css vendored
View File

@@ -1,10 +1,25 @@
@charset "UTF-8";
/**
* Mixins
* Button Mixins
* --------------------------------------------------
* Useful utilities and mixins for SCSS files.
*/
/*
/**
* Bar Mixins
* --------------------------------------------------
*/
/**
* Tab Mixins
* --------------------------------------------------
*/
/**
* Item Mixins
* --------------------------------------------------
*/
/**
* Utility Mixins
* --------------------------------------------------
*/
/*!
Ionicons, v1.3.3
Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
https://twitter.com/helloimben https://twitter.com/ionicframework
@@ -2046,7 +2061,7 @@ sub {
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; }
border: 1px solid #c0c0c0; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
@@ -3180,6 +3195,9 @@ a.subdued‎ {
* --------------------------------------------------
*/
.item {
color: #444444;
background-color: white;
border-color: #dddddd;
position: relative;
z-index: 2;
display: block;
@@ -3187,11 +3205,15 @@ a.subdued‎ {
padding: 15px;
border-width: 1px;
border-style: solid;
border-color: #dddddd;
background-color: white;
font-size: 16px;
color: #666666;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.item.active, .item:active {
background-color: activeBgColor;
border-color: #cccccc; }
.item.active .item-content, .item:active .item-content {
background-color: #fafafa;
border-color: #cccccc;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
.item h2 {
margin: 0 0 4px 0;
font-size: 16px; }
@@ -3219,81 +3241,107 @@ a.subdued‎ {
float: right; }
.item .badge + .badge {
margin-right: 5px; }
.item.active, .item.active:hover, .item.active:focus {
z-index: 2; }
.item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading {
color: inherit; }
.item.active {
.item.active, .item:active {
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
.item.item-light {
color: #444444;
background-color: white;
border-color: #444444; }
.item.active .item-content {
background-color: white;
color: #444444; }
.item-light.active {
color: white;
background-color: white;
border-color: #444444; }
.item-light.active .item-content {
background-color: white;
color: white; }
.item-stable.active {
color: white;
background-color: #f8f8f8;
border-color: #444444; }
.item-stable.active .item-content {
border-color: #dddddd; }
.item.item-light.active, .item.item-light:active {
background-color: activeBgColor;
border-color: #cccccc; }
.item.item-light.active .item-content, .item.item-light:active .item-content {
background-color: #fafafa;
border-color: #cccccc;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
.item.item-stable {
color: #444444;
background-color: #f8f8f8;
color: white; }
.item-positive.active {
color: white;
background-color: #4a87ee;
border-color: #444444; }
.item-positive.active .item-content {
border-color: #b2b2b2; }
.item.item-stable.active, .item.item-stable:active {
background-color: activeBgColor;
border-color: #a2a2a2; }
.item.item-stable.active .item-content, .item.item-stable:active .item-content {
background-color: #e5e5e5;
border-color: #a2a2a2;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
.item.item-positive {
color: white;
background-color: #4a87ee;
color: white; }
.item-calm.active {
color: white;
background-color: #43cee6;
border-color: #444444; }
.item-calm.active .item-content {
border-color: #145dd7; }
.item.item-positive.active, .item.item-positive:active {
background-color: activeBgColor;
border-color: #145dd7; }
.item.item-positive.active .item-content, .item.item-positive:active .item-content {
background-color: #145dd7;
border-color: #145dd7;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
.item.item-calm {
color: white;
background-color: #43cee6;
color: white; }
.item-balanced.active {
color: white;
background-color: #66cc33;
border-color: #444444; }
.item-balanced.active .item-content {
border-color: #1aaac3; }
.item.item-calm.active, .item.item-calm:active {
background-color: activeBgColor;
border-color: #1aaac3; }
.item.item-calm.active .item-content, .item.item-calm:active .item-content {
background-color: #1aaac3;
border-color: #1aaac3;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
.item.item-assertive {
color: white;
background-color: #ef4e3a;
border-color: #cc2511; }
.item.item-assertive.active, .item.item-assertive:active {
background-color: activeBgColor;
border-color: #cc2511; }
.item.item-assertive.active .item-content, .item.item-assertive:active .item-content {
background-color: #cc2511;
border-color: #cc2511;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
.item.item-balanced {
color: white;
background-color: #66cc33;
color: white; }
.item-energized.active {
color: white;
background-color: #f0b840;
border-color: #444444; }
.item-energized.active .item-content {
border-color: #478f24; }
.item.item-balanced.active, .item.item-balanced:active {
background-color: activeBgColor;
border-color: #478f24; }
.item.item-balanced.active .item-content, .item.item-balanced:active .item-content {
background-color: #478f24;
border-color: #478f24;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
.item.item-energized {
color: white;
background-color: #f0b840;
color: white; }
.item-royal.active {
color: white;
background-color: #8a6de9;
border-color: #444444; }
.item-royal.active .item-content {
border-color: #d39511; }
.item.item-energized.active, .item.item-energized:active {
background-color: activeBgColor;
border-color: #d39511; }
.item.item-energized.active .item-content, .item.item-energized:active .item-content {
background-color: #d39511;
border-color: #d39511;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
.item.item-royal {
color: white;
background-color: #8a6de9;
color: white; }
.item-dark.active {
color: white;
background-color: #444444;
border-color: #444444; }
.item-dark.active .item-content {
border-color: #552bdf; }
.item.item-royal.active, .item.item-royal:active {
background-color: activeBgColor;
border-color: #552bdf; }
.item.item-royal.active .item-content, .item.item-royal:active .item-content {
background-color: #552bdf;
border-color: #552bdf;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
.item.item-dark {
color: white;
background-color: #444444;
color: white; }
border-color: #111111; }
.item.item-dark.active, .item.item-dark:active {
background-color: activeBgColor;
border-color: black; }
.item.item-dark.active .item-content, .item.item-dark:active .item-content {
background-color: #262626;
border-color: black;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.12); }
.item,
.item h1,
@@ -3316,6 +3364,7 @@ a.subdued‎ {
white-space: nowrap; }
a.item {
color: inherit;
text-decoration: none; }
a.item:hover, a.item:focus {
text-decoration: none; }
@@ -3345,7 +3394,6 @@ button.item.item-complex {
z-index: 2;
padding: 15px 40px 15px 15px;
border: none;
background-color: white;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.item-text-wrap,
@@ -4100,7 +4148,7 @@ input[type="file"] {
line-height: 34px; }
select {
border: 1px solid #cccccc;
border: 1px solid #ccc;
background-color: white; }
select[multiple],
@@ -4159,7 +4207,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%;
background: white;
content: ' ';
transition: background-color 0.1s ease-in-out; }
transition: background-color .1s ease-in-out; }
/* the checkmark within the box */
.checkbox input:after {
@@ -4174,7 +4222,7 @@ input[type="checkbox"][readonly] {
border-right: 0;
content: ' ';
opacity: 0;
transition: opacity 0.05s ease-in-out;
transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg); }
@@ -4647,7 +4695,7 @@ input[type="range"] {
.button-icon:active, .button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px white; }
text-shadow: 0px 0px 10px #fff; }
.padding > .button.block:first-child {
margin-top: 0; }
@@ -5158,7 +5206,7 @@ a.button {
* notice we purposely do not use words like "red" or "blue", but
* instead have colors which represent an emotion or generic theme.
*/
.light {
.light, a.light {
color: white; }
.light-bg {
@@ -5167,7 +5215,7 @@ a.button {
.light-border {
border-color: #dddddd; }
.stable {
.stable, a.stable {
color: #f8f8f8; }
.stable-bg {
@@ -5176,7 +5224,7 @@ a.button {
.stable-border {
border-color: #b2b2b2; }
.positive {
.positive, a.positive {
color: #4a87ee; }
.positive-bg {
@@ -5185,7 +5233,7 @@ a.button {
.positive-border {
border-color: #145dd7; }
.calm {
.calm, a.calm {
color: #43cee6; }
.calm-bg {
@@ -5194,7 +5242,7 @@ a.button {
.calm-border {
border-color: #1aaac3; }
.assertive {
.assertive, a.assertive {
color: #ef4e3a; }
.assertive-bg {
@@ -5203,7 +5251,7 @@ a.button {
.assertive-border {
border-color: #cc2511; }
.balanced {
.balanced, a.balanced {
color: #66cc33; }
.balanced-bg {
@@ -5212,7 +5260,7 @@ a.button {
.balanced-border {
border-color: #478f24; }
.energized {
.energized, a.energized {
color: #f0b840; }
.energized-bg {
@@ -5221,7 +5269,7 @@ a.button {
.energized-border {
border-color: #d39511; }
.royal {
.royal, a.royal {
color: #8a6de9; }
.royal-bg {
@@ -5230,7 +5278,7 @@ a.button {
.royal-border {
border-color: #552bdf; }
.dark {
.dark, a.dark {
color: #444444; }
.dark-bg {

24
dist/css/themes/ionic-ios7.css vendored
View File

@@ -1,8 +1,22 @@
@charset "UTF-8";
/**
* Mixins
* Button Mixins
* --------------------------------------------------
*/
/**
* Bar Mixins
* --------------------------------------------------
*/
/**
* Tab Mixins
* --------------------------------------------------
*/
/**
* Item Mixins
* --------------------------------------------------
*/
/**
* Utility Mixins
* --------------------------------------------------
* Useful utilities and mixins for SCSS files.
*/
/**
* Nav controllers and header bar animations
@@ -124,7 +138,7 @@
right: 20px;
transition: 0.2s ease;
transition-property: left, right;
transition-delay: 0s, 0.05s; }
transition-delay: 0s, .05s; }
.toggle :checked + .track {
/* When the toggle is "on" */
@@ -139,4 +153,4 @@
right: 0;
left: 20px;
-webkit-transform: none;
transition-delay: 0.05s, 0s; }
transition-delay: .05s, 0s; }

2
scss/_form.scss
View File

@@ -104,7 +104,7 @@ textarea {
padding: 4px 8px 3px;
border: none;
background-color: $input-bg;
box-shadow: inset 0 0 $item-border-width $item-border-color;
box-shadow: inset 0 0 $item-border-width $item-default-border;
}
.item-stacked-label input {
height: $line-height-computed + $font-size-base + 12px;

63
scss/_items.scss
View File

@@ -5,6 +5,8 @@
*/
.item {
@include item-style($item-default-bg, $item-default-border, $item-default-text, $item-default-active-bg, $item-default-active-border);
position: relative;
z-index: 2; // Make sure the borders and stuff don't get hidden by children
@@ -14,12 +16,8 @@
padding: $item-padding;
border-width: $item-border-width;
border-style: $item-border-style;
border-color: $item-border-color;
background-color: $list-bg;
font-size: $list-font-size;
color: $light-color;
border-style: solid;
font-size: $item-font-size;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
@@ -62,30 +60,41 @@
margin-right: 5px;
}
// Active class on item itself, not parent
&.active,
&.active:hover,
&.active:focus {
z-index: 2;
// Force color to inherit for custom content
.item-heading {
color: inherit;
}
&:active {
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.12);
}
@include item-style-active($light, $dark, $dark);
}
// Different themes for list items
&.item-light {
@include item-style($item-light-bg, $item-light-border, $item-light-text, $item-light-active-bg, $item-light-active-border);
}
&.item-stable {
@include item-style($item-stable-bg, $item-stable-border, $item-stable-text, $item-stable-active-bg, $item-stable-active-border);
}
&.item-positive {
@include item-style($item-positive-bg, $item-positive-border, $item-positive-text, $item-positive-active-bg, $item-positive-active-border);
}
&.item-calm {
@include item-style($item-calm-bg, $item-calm-border, $item-calm-text, $item-calm-active-bg, $item-calm-active-border);
}
&.item-assertive {
@include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text, $item-assertive-active-bg, $item-assertive-active-border);
}
&.item-balanced {
@include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text, $item-balanced-active-bg, $item-balanced-active-border);
}
&.item-energized {
@include item-style($item-energized-bg, $item-energized-border, $item-energized-text, $item-energized-active-bg, $item-energized-active-border);
}
&.item-royal {
@include item-style($item-royal-bg, $item-royal-border, $item-royal-text, $item-royal-active-bg, $item-royal-active-border);
}
&.item-dark {
@include item-style($item-dark-bg, $item-dark-border, $item-dark-text, $item-dark-active-bg, $item-dark-active-border);
}
// Different themes for list items
.item-light { @include item-style-active($light, $dark, #fff); }
.item-stable { @include item-style-active($stable, $dark, #fff); }
.item-positive { @include item-style-active($positive, $dark, #fff); }
.item-calm { @include item-style-active($calm, $dark, #fff); }
.item-balanced { @include item-style-active($balanced, $dark, #fff); }
.item-energized { @include item-style-active($energized, $dark, #fff); }
.item-royal { @include item-style-active($royal, $dark, #fff); }
.item-dark { @include item-style-active($dark, $dark, #fff); }
}
// Handle text overflow
.item,
@@ -111,6 +120,7 @@
// Linked list items
a.item {
color: inherit;
text-decoration: none;
&:hover,
@@ -148,7 +158,6 @@ button.item.item-complex {
padding: $item-padding (($item-padding * 3) - 5) $item-padding $item-padding;
border: none;
background-color: $list-bg;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out;
}

84
scss/_mixins.scss
View File

@@ -1,25 +1,24 @@
/**
* Mixins
* Button Mixins
* --------------------------------------------------
* Useful utilities and mixins for SCSS files.
*/
@mixin button-style($bgColor, $borderColor, $activeBgColor, $activeBorderColor, $color) {
color: $color;
background-color: $bgColor;
border-color: $borderColor;
background-color: $bgColor;
border-color: $borderColor;
// Give desktop users something to play with
&:hover {
&:hover {
color: $color;
text-decoration: none;
}
&.active, &:active {
background-color: $activeBgColor;
&.active, &:active {
background-color: $activeBgColor;
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15);
border-color: $activeBorderColor;
}
}
}
@mixin button-clear($color, $fontSize:"") {
@@ -50,36 +49,11 @@
}
}
@mixin item-style($bgColor, $borderColor, $color) {
color: $color;
background-color: $bgColor;
border-color: $borderColor;
// Give desktop users something to play with
&:hover {
color: $color;
text-decoration: none;
}
&.active, &:active {
background-color: darken($bgColor, 8%);
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.12);
border-color: darken($borderColor, 10%);
}
}
//$bgColor, $borderColor, $color,
@mixin item-style-active($activeBgColor, $activeBorderColor, $activeColor) {
&.active {
color: $activeColor;
background-color: $activeBgColor;
border-color: $activeBorderColor;
.item-content {
background-color: $activeBgColor;
color: $activeColor;
}
}
};
/**
* Bar Mixins
* --------------------------------------------------
*/
@mixin bar-style($bgColor, $borderColor, $color) {
background-color: $bgColor;
@@ -93,6 +67,12 @@
}
}
/**
* Tab Mixins
* --------------------------------------------------
*/
@mixin tab-style($bgColor, $borderColor, $color) {
background-color: $bgColor;
background-image: linear-gradient(0deg, $borderColor, $borderColor 50%, transparent 50%);
@@ -101,8 +81,34 @@
}
// UTILITY MIXINS
// --------------------------------------------------
/**
* Item Mixins
* --------------------------------------------------
*/
@mixin item-style($bgColor, $borderColor, $color, $activeBgColor, $activeBorderColor) {
color: $color;
background-color: $bgColor;
border-color: $borderColor;
&.active,
&:active {
background-color: activeBgColor;
border-color: $activeBorderColor;
.item-content {
background-color: $activeBgColor;
border-color: $activeBorderColor;
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.12);
}
}
}
/**
* Utility Mixins
* --------------------------------------------------
*/
// Clearfix
// --------

18
scss/_util.scss
View File

@@ -81,7 +81,7 @@
* instead have colors which represent an emotion or generic theme.
*/
.light {
.light, a.light {
color: $light;
}
.light-bg {
@@ -91,7 +91,7 @@
border-color: $button-light-border;
}
.stable {
.stable, a.stable {
color: $stable;
}
.stable-bg {
@@ -101,7 +101,7 @@
border-color: $button-stable-border;
}
.positive {
.positive, a.positive {
color: $positive;
}
.positive-bg {
@@ -111,7 +111,7 @@
border-color: $button-positive-border;
}
.calm {
.calm, a.calm {
color: $calm;
}
.calm-bg {
@@ -121,7 +121,7 @@
border-color: $button-calm-border;
}
.assertive {
.assertive, a.assertive {
color: $assertive;
}
.assertive-bg {
@@ -131,7 +131,7 @@
border-color: $button-assertive-border;
}
.balanced {
.balanced, a.balanced {
color: $balanced;
}
.balanced-bg {
@@ -141,7 +141,7 @@
border-color: $button-balanced-border;
}
.energized {
.energized, a.energized {
color: $energized;
}
.energized-bg {
@@ -151,7 +151,7 @@
border-color: $button-energized-border;
}
.royal {
.royal, a.royal {
color: $royal;
}
.royal-bg {
@@ -161,7 +161,7 @@
border-color: $button-royal-border;
}
.dark {
.dark, a.dark {
color: $dark;
}
.dark-bg {

111
scss/_variables.scss
View File

@@ -36,7 +36,6 @@ $headings-line-height: 1.1 !default;
$base-background-color: #fff;
$base-color: #000;
$light-color: #666666;
$link-color: $positive !default;
$link-hover-color: darken($link-color, 15%) !default;
@@ -343,19 +342,96 @@ $tabs-default-border: $tabs-stable-border;
$tabs-default-text: $tabs-stable-text;
// Lists
// Items
// -------------------------------
$list-font-size: 16px;
$item-font-size: 16px;
$item-border-width: 1px !default;
$item-padding: 15px !default;
$item-icon-font-size: 32px !default;
$item-icon-fill-font-size: 28px !default;
$item-avitar-width: 40px !default;
$item-avitar-height: 40px !default;
$item-thumbnail-width: 80px !default;
$item-thumbnail-height: 80px !default;
$item-thumbnail-margin: 10px !default;
$item-divider-bg: #f5f5f5;
$item-divider-color: #222;
$item-divider-padding: 5px 15px;
$item-light-bg: $button-light-bg;
$item-light-border: $button-light-border;
$item-light-text: $button-light-text;
$item-light-active-bg: $button-light-active-bg;
$item-light-active-border: $button-light-active-border;
$item-stable-bg: $button-stable-bg;
$item-stable-border: $button-stable-border;
$item-stable-text: $button-stable-text;
$item-stable-active-bg: $button-stable-active-bg;
$item-stable-active-border: $button-stable-active-border;
$item-positive-bg: $button-positive-bg;
$item-positive-border: $button-positive-border;
$item-positive-text: $button-positive-text;
$item-positive-active-bg: $button-positive-active-bg;
$item-positive-active-border: $button-positive-active-border;
$item-calm-bg: $button-calm-bg;
$item-calm-border: $button-calm-border;
$item-calm-text: $button-calm-text;
$item-calm-active-bg: $button-calm-active-bg;
$item-calm-active-border: $button-calm-active-border;
$item-assertive-bg: $button-assertive-bg;
$item-assertive-border: $button-assertive-border;
$item-assertive-text: $button-assertive-text;
$item-assertive-active-bg: $button-assertive-active-bg;
$item-assertive-active-border: $button-assertive-active-border;
$item-balanced-bg: $button-balanced-bg;
$item-balanced-border: $button-balanced-border;
$item-balanced-text: $button-balanced-text;
$item-balanced-active-bg: $button-balanced-active-bg;
$item-balanced-active-border: $button-balanced-active-border;
$item-energized-bg: $button-energized-bg;
$item-energized-border: $button-energized-border;
$item-energized-text: $button-energized-text;
$item-energized-active-bg: $button-energized-active-bg;
$item-energized-active-border: $button-energized-active-border;
$item-royal-bg: $button-royal-bg;
$item-royal-border: $button-royal-border;
$item-royal-text: $button-royal-text;
$item-royal-active-bg: $button-royal-active-bg;
$item-royal-active-border: $button-royal-active-border;
$item-dark-bg: $button-dark-bg;
$item-dark-border: $button-dark-border;
$item-dark-text: $button-dark-text;
$item-dark-active-bg: $button-dark-active-bg;
$item-dark-active-border: $button-dark-active-border;
$item-default-bg: $item-light-bg;
$item-default-border: $item-light-border;
$item-default-text: $item-light-text;
$item-default-active-bg: $item-light-active-bg;
$item-default-active-border: $item-light-active-border;
// Lists
// -------------------------------
$list-header-bg: transparent;
$list-header-color: #222;
$list-header-padding: 5px 15px;
$list-header-margin-top: 20px !default;
$list-bg: $light;
$list-border-color: #ddd;
// Cards
// -------------------------------
@@ -371,29 +447,6 @@ $card-border-color: #ccc;
$card-border-radius: 2px !default;
// Items
// -------------------------------
$item-border-width: 1px !default;
$item-border-color: #ddd;
$item-border-style: solid;
$item-padding: 15px !default;
$item-divider-bg: #f5f5f5;
$item-divider-color: #222;
$item-divider-padding: 5px 15px;
$item-icon-font-size: 32px !default;
$item-icon-fill-font-size: 28px !default;
$item-avitar-width: 40px !default;
$item-avitar-height: 40px !default;
$item-thumbnail-width: 80px !default;
$item-thumbnail-height: 80px !default;
$item-thumbnail-margin: 10px !default;
// Icons
// -------------------------------

14
test/lists.html
View File

@@ -451,6 +451,20 @@
<a class="button button-secondary" href="index.html">Homepage</a>
</div>
<h3>Colors</h3>
<div class="list">
<a class="item" href="#">Default</a>
<a class="item item-light" href="#">item-light</a>
<a class="item item-stable" href="#">item-stable</a>
<a class="item item-positive" href="#">item-positive</a>
<a class="item item-calm" href="#">item-calm</a>
<a class="item item-assertive" href="#">item-assertive</a>
<a class="item item-balanced" href="#">item-balanced</a>
<a class="item item-energized" href="#">item-energized</a>
<a class="item item-royal" href="#">item-royal</a>
<a class="item item-dark" href="#">item-dark</a>
</div>
</main>
</div>