@appscode/design-system 1.1.0-beta.48 → 1.1.0-beta.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "1.1.0-beta.48",
3
+ "version": "1.1.0-beta.49",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
@@ -96,11 +96,71 @@ watch(
96
96
  class="router-link-active"
97
97
  :class="{ 'is-active': idx === list.length - 1 }"
98
98
  :to="item.path"
99
- >{{ item.name }}
99
+ >
100
+ <span v-if="idx === 0" class="icon is-flex-start p-0 m-0">
101
+ <svg
102
+ width="12"
103
+ height="12"
104
+ viewBox="0 0 12 12"
105
+ fill="none"
106
+ xmlns="http://www.w3.org/2000/svg"
107
+ >
108
+ <path
109
+ d="M1 4.5L5.5 1L10 4.5V10C10 10.2652 9.89464 10.5196 9.70711 10.7071C9.51957 10.8946 9.26522 11 9 11H2C1.73478 11 1.48043 10.8946 1.29289 10.7071C1.10536 10.5196 1 10.2652 1 10V4.5Z"
110
+ stroke="#666666"
111
+ stroke-width="1.5"
112
+ stroke-linecap="round"
113
+ stroke-linejoin="round"
114
+ />
115
+ <path
116
+ d="M4 11V6H7V11"
117
+ stroke="#666666"
118
+ stroke-width="1.5"
119
+ stroke-linecap="round"
120
+ stroke-linejoin="round"
121
+ />
122
+ </svg>
123
+ </span>
124
+ {{ item.name }}
100
125
  </router-link>
101
126
  </li>
102
127
  </ul>
103
128
  </nav>
104
129
  </div>
105
130
  </template>
106
- <style lang="scss"></style>
131
+
132
+ <style lang="scss" scoped>
133
+ /* breadcumb style */
134
+ .ac-breadcrumb {
135
+ padding: 8px 20px;
136
+ border-bottom: 1px solid $primary-95;
137
+ position: sticky;
138
+ top: 50px;
139
+ height: auto;
140
+ background-color: $white-100;
141
+ z-index: 998;
142
+ display: flex;
143
+ align-items: center;
144
+ }
145
+
146
+ .breadcrumb {
147
+ a {
148
+ color: $primary-20;
149
+ font-size: 13px;
150
+ padding: 0 3px;
151
+ font-weight: 500;
152
+ font-style: normal;
153
+
154
+ &:hover {
155
+ color: $primary-10;
156
+ }
157
+ }
158
+
159
+ li.is-active {
160
+ a {
161
+ color: $primary-10;
162
+ font-weight: 500;
163
+ }
164
+ }
165
+ }
166
+ </style>