aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/client/views/collections/CollectionMenu.scss135
1 files changed, 67 insertions, 68 deletions
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index 1a9a6d5d9..c0fc774d3 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -1,6 +1,5 @@
@import "../global/globalCssVariables";
-
.collectionMenu-cont {
position: relative;
display: inline-flex;
@@ -8,8 +7,8 @@
opacity: 0.9;
z-index: 901;
transition: top .5s;
- background: #323232;
- color: white;
+ background: $dark-gray;
+ color: $white;
transform-origin: top left;
top: 0;
width: 100%;
@@ -18,7 +17,7 @@
border-radius: 100%;
width: 18px;
height: 18px;
- border: solid 1px #f5f5f5;
+ border: solid 1px $white;
display: flex;
align-items: center;
justify-content: center;
@@ -28,7 +27,7 @@
border-radius: 100%;
width: 70%;
height: 70%;
- background: white;
+ background: $white;
}
.collectionMenu {
@@ -43,7 +42,7 @@
margin-left: 3px;
margin-right: 3px;
width: 1.5px;
- background-color: #656060;
+ background-color: $medium-gray;
}
.collectionViewBaseChrome {
@@ -51,11 +50,11 @@
align-items: center;
.collectionViewBaseChrome-viewPicker {
- font-size: 75%;
- outline-color: black;
- color: white;
+ font-size: $small-text;
+ outline-color: $black;
+ color: $white;
border: none;
- background: #323232;
+ background: $dark-gray;
}
.collectionViewBaseChrome-viewPicker:focus {
@@ -64,16 +63,16 @@
}
.collectionViewBaseChrome-viewPicker:active {
- outline-color: black;
+ outline-color: $black;
}
.collectionViewBaseChrome-button {
- font-size: 75%;
+ font-size: $small-text;
text-transform: uppercase;
letter-spacing: 2px;
- background: rgb(238, 238, 238);
- color: purple;
- outline-color: black;
+ background: $white;
+ color: $pink;
+ outline-color: $black;
border: none;
padding: 12px 10px 11px 10px;
margin-left: 10px;
@@ -82,11 +81,11 @@
.collectionViewBaseChrome-cmdPicker {
margin-left: 3px;
margin-right: 0px;
- font-size: 75%;
+ font-size: $small-text;
text-transform: capitalize;
- color: white;
+ color: $white;
border: none;
- background: #323232;
+ background: $dark-gray;
}
.collectionViewBaseChrome-cmdPicker:focus {
@@ -105,7 +104,7 @@
overflow: hidden;
.commandEntry-drop {
- color: white;
+ color: $white;
width: 30px;
margin-top: auto;
margin-bottom: auto;
@@ -113,11 +112,11 @@
}
.commandEntry-outerDiv:hover{
- background-color: rgba(0,0,0,0.2);
+ background-color: $drop-shadow;
.collectionViewBaseChrome-viewPicker,
.collectionViewBaseChrome-cmdPicker{
- background: rgb(41,41,41);
+ background: $dark-gray;
}
}
@@ -142,7 +141,7 @@
height: 100%;
display: flex;
background: transparent;
- color: grey;
+ color: $medium-gray;
justify-content: center;
}
@@ -150,31 +149,31 @@
margin-left: 5px;
display: grid;
border: none;
- border-right: solid gray 1px;
+ border-right: solid $medium-gray 1px;
.collectionViewBaseChrome-filterIcon {
position: relative;
display: flex;
margin: auto;
- background: #323232;
- color: white;
+ background: $dark-gray;
+ color: $white;
width: 30px;
height: 30px;
align-items: center;
justify-content: center;
border: none;
- border-right: solid gray 1px;
+ border-right: solid $medium-gray 1px;
}
.collectionViewBaseChrome-viewSpecsInput {
padding: 12px 10px 11px 10px;
border: 0px;
- color: grey;
+ color: $medium-gray;
text-align: center;
letter-spacing: 2px;
- outline-color: black;
- font-size: 75%;
- background: rgb(238, 238, 238);
+ outline-color: $black;
+ font-size: $small-text;
+ background: $white;
height: 100%;
width: 75px;
}
@@ -187,8 +186,8 @@
z-index: 100;
display: flex;
flex-direction: column;
- background: rgb(238, 238, 238);
- box-shadow: grey 2px 2px 4px;
+ background: $white;
+ box-shadow: $medium-gray 2px 2px 4px;
.qs-datepicker {
left: unset;
@@ -204,13 +203,13 @@
.collectionViewBaseChrome-viewSpecsMenu-rowLeft,
.collectionViewBaseChrome-viewSpecsMenu-rowMiddle,
.collectionViewBaseChrome-viewSpecsMenu-rowRight {
- font-size: 75%;
+ font-size: $small-text;
letter-spacing: 2px;
- color: grey;
+ color: $medium-gray;
margin-left: 10px;
padding: 5px;
border: none;
- outline-color: black;
+ outline-color: $black;
}
}
@@ -236,19 +235,19 @@
margin-left: 10;
.collectionGridViewChrome-viewPicker {
- font-size: 75%;
+ font-size: $small-text;
//text-transform: uppercase;
//letter-spacing: 2px;
- background: #121721;
- color: white;
- outline-color: black;
- color: white;
+ background: $dark-gray;
+ color: $white;
+ outline-color: $black;
+ color: $white;
border: none;
- border-right: solid gray 1px;
+ border-right: solid $medium-gray 1px;
}
.collectionGridViewChrome-viewPicker:active {
- outline-color: black;
+ outline-color: $black;
}
.grid-control {
@@ -268,11 +267,11 @@
.collectionGridViewChrome-entryBox {
width: 50%;
- color: black;
+ color: $black;
}
.collectionGridViewChrome-columnButton {
- color: black;
+ color: $black;
}
}
}
@@ -302,7 +301,7 @@
align-items: center;
display: flex;
grid-auto-columns: auto;
- font-size: 75%;
+ font-size: $small-text;
letter-spacing: 2px;
.collectionStackingViewChrome-pivotField-label,
@@ -311,7 +310,7 @@
grid-column: 1;
margin-right: 7px;
user-select: none;
- font-family: 'Roboto';
+ font-family: $sans-serif;
letter-spacing: normal;
}
@@ -329,13 +328,13 @@
}
.collectionStackingViewChrome-sortIcon:hover {
- background-color: rgba(0,0,0,0.2);
+ background-color: $drop-shadow;
}
.collectionStackingViewChrome-pivotField,
.collectionTreeViewChrome-pivotField,
.collection3DCarouselViewChrome-scrollSpeed {
- color: white;
+ color: $white;
grid-column: 2;
grid-row: 1;
width: 90%;
@@ -344,7 +343,7 @@
height: 80%;
border-radius: 7px;
align-items: center;
- background: #eeeeee;
+ background: $white;
.editable-view-input,
input,
@@ -352,16 +351,16 @@
.editableView-container-editing {
margin: auto;
border: 0px;
- color: grey !important;
+ color: $light-gray !important;
text-align: center;
letter-spacing: 2px;
- outline-color: black;
+ outline-color: $black;
height: 100%;
}
.react-autosuggest__container {
margin: 0;
- color: grey;
+ color: $medium-gray;
padding: 0px;
}
}
@@ -424,11 +423,11 @@
.collectionMenu-urlInput {
padding: 12px 10px 11px 10px;
border: 0px;
- color: black;
- font-size: 9px;
+ color: $black;
+ font-size: $small-text;
letter-spacing: 2px;
- outline-color: black;
- background: rgb(238, 238, 238);
+ outline-color: $black;
+ background: $white;
width: 100%;
min-width: 350px;
margin-right: 10px;
@@ -477,10 +476,10 @@
width: 20;
height: 30;
bottom: 0;
- background: #323232;
+ background: $dark-gray;
display: inline-flex;
align-items: center;
- color: white;
+ color: $white;
}
.backKeyframe {
@@ -502,13 +501,13 @@
margin: auto;
}
- border-right: solid gray 1px;
+ border-right: solid $medium-gray 1px;
}
}
.collectionSchemaViewChrome-cont {
display: flex;
- font-size: 9px;
+ font-size: $small-text;
.collectionSchemaViewChrome-toggle {
display: flex;
@@ -527,7 +526,7 @@
.collectionSchemaViewChrome-toggler {
width: 100px;
height: 35px;
- background-color: black;
+ background-color: $black;
position: relative;
}
@@ -539,7 +538,7 @@
transition: all 0.5s ease;
// top: 3px;
margin-top: 3px;
- color: gray;
+ color: $medium-gray;
letter-spacing: 2px;
text-transform: uppercase;
display: flex;
@@ -579,7 +578,7 @@
}
.react-autosuggest__input {
- border: 1px solid #aaa;
+ border: 1px solid $light-gray;
border-radius: 4px;
width: 100%;
}
@@ -603,11 +602,11 @@
overflow-y: auto;
max-height: 400px;
width: 180px;
- border: 1px solid #aaa;
- background-color: #fff;
- font-family: Helvetica, sans-serif;
+ border: 1px solid $light-gray;
+ background-color: $white;
+ font-family: $sans-serif;
font-weight: 300;
- font-size: 16px;
+ font-size: $large-header;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 2;
@@ -625,5 +624,5 @@
}
.react-autosuggest__suggestion--highlighted {
- background-color: #ddd;
+ background-color: $light-gray;
} \ No newline at end of file