1/* App Grid */
2
3$app_icon_size: 96px;
4
5// app icons
6.icon-grid {
7  row-spacing: $base_spacing * 2;
8  column-spacing: $base_spacing * 2;
9  max-row-spacing: $base_spacing * 12;
10  max-column-spacing: $base_spacing * 12;
11  page-padding-top: $base_padding * 4;
12  page-padding-bottom: $base_padding * 4;
13  page-padding-left: $base_padding * 2;
14  page-padding-right: $base_padding * 2;
15}
16
17/* App Icons */
18
19$app_grid_fg_color: #fff;
20
21// Icon tiles in the app grid
22.app-well-app,
23%app-well-app {
24  @include overview-icon($app_grid_fg_color);
25
26  .overview-icon.overview-icon-with-label {
27    padding: 10px 8px 5px 8px;
28
29    > StBoxLayout {
30      spacing: $base_spacing;
31    }
32  }
33}
34
35/* App Folders */
36.app-well-app.app-folder {
37  background-color: $dash_background_color;
38  border-radius: $base_border_radius + 4px; // same as %icon_tile
39}
40
41// expanded folder
42.app-folder-dialog { //style like the dash
43  border-radius: $modal_radius * 1.5;
44  background-color: $dash_background_color;
45  padding: 12px 0px 12px 0px;
46
47  & .folder-name-container {
48    padding: 24px 36px 0;
49    spacing: 12px;
50
51    & .folder-name-label,
52    & .folder-name-entry {
53      font-size: 18pt;
54      font-weight: 800;
55    }
56
57    & .folder-name-entry { width: 300px }
58
59    /* FIXME: this is to keep the label in sync with the entry */
60    & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
61
62    & .edit-folder-button {
63      @extend %button;
64
65      padding: 0;
66      width: 36px;
67      height: 36px;
68      border-radius: 18px;
69
70      & > StIcon { icon-size: 16px }
71    }
72  }
73
74  & .icon-grid {
75    row-spacing: $base_spacing * 2;
76    column-spacing: $base_spacing * 5;
77    page-padding-top: 0;
78    page-padding-bottom: 0;
79    page-padding-left: 0;
80    page-padding-right: 0;
81  }
82
83  & .page-indicators {
84    margin-bottom: 18px;
85  }
86}
87.app-folder-dialog-container {
88  padding: 12px;
89  width: 620px;
90  height: 620px;
91}
92
93// Running app indicator (also shown in dash)
94.app-well-app-running-dot {
95  height: 5px;
96  width: 5px;
97  border-radius:5px;
98  background-color: $osd_fg_color;
99  margin-bottom: 1px;
100}
101
102// Rename popup for app folders
103.rename-folder-popup {
104  .rename-folder-popup-item {
105    spacing: $base_spacing;
106    &:ltr, &:rtl { padding: 0 $base_padding * 2; }
107  }
108}
109
110// right-click app menu
111.app-menu {
112  max-width: 27.25em;
113}
114
115// App Grid pagination indicators
116.page-indicator {
117  padding: $base_padding $base_padding * 2 0;
118
119  .page-indicator-icon {
120    width: 10px;
121    height: 10px;
122    border-radius: 10px; // the same as height&width
123    background-color: white;
124  }
125}
126
127.apps-scroll-view {
128  padding: 0;
129}
130
131// shutdown and other actions in the grid
132.system-action-icon {
133  background-color: rgba(0,0,0,0.8);
134  color: #fff;
135  border-radius: 99px;
136  icon-size: $app_icon_size * 0.5;
137}
138
139.page-navigation-hint {
140  width: 300px;
141
142  &.dnd {
143    background: rgba(255, 255, 255, 0.1);
144  }
145
146  &.next:ltr,
147  &.previous:rtl {
148    background-gradient-start: rgba(255, 255, 255, 0.05);
149    background-gradient-end: transparent;
150    background-gradient-direction: horizontal;
151    border-radius: 15px 0px 0px 15px;
152  }
153
154  &.previous:ltr,
155  &.next:rtl {
156    background-gradient-start: transparent;
157    background-gradient-end: rgba(255, 255, 255, 0.05);
158    background-gradient-direction: horizontal;
159    border-radius: 0px 15px 15px 0px;
160  }
161}
162
163.page-navigation-arrow {
164  margin: 6px;
165  width: 24px;
166  height: 24px;
167}
168