From 76f9af1349ab7666e5ce5f49ab0d8b911ce87a33 Mon Sep 17 00:00:00 2001 From: Carmine De Rosa Date: Sat, 20 Jan 2018 18:55:53 +0100 Subject: [PATCH] add dropdown --- css/styles.css | 90 ++++++++++++------ header.php | 10 +- modules.php | 21 ++++ .../variables.scssc | Bin 15725 -> 15899 bytes .../modules.scssc | Bin 11338 -> 18857 bytes scss/sections/modules.scss | 41 +++++++- scss/variables.scss | 4 +- 7 files changed, 131 insertions(+), 35 deletions(-) diff --git a/css/styles.css b/css/styles.css index 51d0d18..4c6331e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -19,97 +19,97 @@ /* 48px */ /* 53px */ /* ?px */ -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-8 { font-size: 0.5rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-10 { font-size: 0.625rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-12 { font-size: 0.75rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-13 { font-size: 0.8125rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-14 { font-size: 0.875rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-15 { font-size: 0.9375rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-16 { font-size: 1rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-18 { font-size: 1.125rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-20 { font-size: 1.25rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-22 { font-size: 1.375rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-24 { font-size: 1.5rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-26 { font-size: 1.625rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-28 { font-size: 1.75rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-30 { font-size: 1.875rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-34 { font-size: 2.125rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-40 { font-size: 2.5rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-45 { font-size: 2.8125rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-48 { font-size: 3rem !important; } -/* line 45, variables.scss */ +/* line 47, variables.scss */ .font-53 { font-size: 3.3125rem !important; } @@ -14451,7 +14451,7 @@ a.text-gray-dark:focus, a.text-gray-dark:hover { /* line 45, fonts.scss */ .text-grey { - color: #aaa; + color: #ddd; } /* line 48, fonts.scss */ @@ -14491,7 +14491,7 @@ a:active, a:visited, a:hover, a:focus { } /* line 24, global.scss */ a:hover { - color: #aaa; + color: #ddd; } /* line 30, global.scss */ @@ -14589,8 +14589,8 @@ input::-moz-focus-inner, button::-moz-focus-inner { /* line 14, forms.scss */ input[type=text], input[type=password] { - border: 1px solid #aaa; - color: #aaa; + border: 1px solid #ddd; + color: #ddd; padding: 5px 20px; width: 100%; text-align: left; @@ -14615,7 +14615,7 @@ input[type=button]:hover, input[type=submit]:hover, button:hover { color: white; - background-color: #aaa; + background-color: #ddd; } /* line 46, forms.scss */ @@ -14712,7 +14712,7 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu height: 40px; line-height: 40px; margin: 20px 0 10px 0; - background: #aaa; + background: #ddd; border-radius: 5px; color: white; text-align: center; @@ -14733,15 +14733,49 @@ header .container .row .menu ul li.active a:hover, header .container .row .menu /* line 34, sections/modules.scss */ .modules .content { background: #f2f2f2; - text-align: center; padding: 50px; } -/* line 39, sections/modules.scss */ +/* line 40, sections/modules.scss */ +.modules .content .dropdown { + height: 40px; + line-height: 36px; + padding: 0 10px; + background: white; + border: 2px solid #ddd; + border-radius: 5px; + position: relative; +} +/* line 49, sections/modules.scss */ +.modules .content .dropdown .label { + font-size: 0.75rem; + font-weight: bold; + color: black; +} +/* line 55, sections/modules.scss */ +.modules .content .dropdown .data { + position: absolute; + font-size: 0.625rem; + font-weight: bold; + color: black; + right: 10px; + top: 0; +} +/* line 64, sections/modules.scss */ +.modules .content .dropdown:after { + content: '\f107'; + font-family: "FontAwesome"; + position: absolute; + font-weight: bold; + color: #ddd; + top: 0; + right: -25px; +} +/* line 78, sections/modules.scss */ .modules .content .div-drop { width: 100px; padding: 10px; margin: 20px 0 10px 0; - background: #aaa; + background: #ddd; color: white; text-align: center; font-size: 0.75rem; diff --git a/header.php b/header.php index 07f48b2..bfaf234 100644 --- a/header.php +++ b/header.php @@ -6,11 +6,11 @@
diff --git a/scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/variables.scssc b/scss/.sass-cache/132087705a52dd1d0e0e4a761ce2b1b521d0d802/variables.scssc index 74cf69b50a30efec843e9cb6d3f4d7e0145c4b16..f7a6a0db246856d3b8bac87867df928142b051a7 100644 GIT binary patch delta 1897 zcmai#%WD%s9LL$Tv^0%L+NQBho9Av`Hc2RFs!%g!cD@v>odKflj+e%aZXt?LhO z+#O70FO+lDvQo&(QaLA~{bdo!3aS?JN*>9Tic+g6*<5X*vNjRt#@DoMu5V+7TMav~ z--!c9BVAgxz6di8&yahvzIb(FWnrm)X`usm&Eh?3H@4$6PKod{>T@}vXD)%eN&VnzG=hv zG{NrWWD|SJU~NfuFSC?|14(xF9A!xMS;O~Y7vDL`!gez0W36ou_NcZTT6fU;}V3%QKyHIVkWUy9jm^;YMJqTYwWN z0*%}Qc#D?dr8Et<LI93_0MR)atJ z6g-i`aJ&$Kukt)!Y-zkmrsp*$tB;I;Ad90%OA(&s&-0}gSE9Cel8Vj;}E g-ndhkYxfHJ`8O5{#Vw~_9B+KaL9R`2r@g5C1#!E(H2?qr delta 1842 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 pDPV^LP&E9J;JcM~-3s3;T-3oN^*><{98&-Q delta 913 zcmZva!E4iC7{HjpS7@^DEQm?4mzsb(S69mTWHp^KKk3Qb& z=^uA1qdT``I|HemL#Z7I&W>cXD3gN?p4NCA(&>d94vlc45a2I2ao09R$0NzCY?2N4 z`rc-^)6}tBNGh|~b*b8`Nm7t2;by-!Id0~Sq!Ec-+}0RgtbJ}!>-gD z_{B2#aIR*11LJwJnu)ADq~=R_R$%D*x^^qJ^6+tts(o0H^)O1#rT9K?;xaRm@sF+a zR)j~4;Q`mRd$C8Qw+6K$8%kJ^`%svHk+HKFKgIBQ%EmwW9-7v*%~(?n`&JJ^3i34U z>pC|047L4%S$v6^(JVfeQYHL8&9GC{we8r`$G%V1J}k)d(DU&^9a~d|Lh){DS=))} z0No-D0%=WqsXHXPM|n;~F&$o3|Ih_-VqqCS8(F-$utr`Fb?D*?0_#!+4;Ssu_Qhk$ EfA65)<^TWy diff --git a/scss/sections/modules.scss b/scss/sections/modules.scss index f924988..a1df53d 100644 --- a/scss/sections/modules.scss +++ b/scss/sections/modules.scss @@ -33,9 +33,48 @@ .content{ background: $light-grey; - text-align: center; padding: 50px; + + + .dropdown{ + height: 40px; + line-height: 36px; + padding: 0 10px; + background: white; + border: 2px solid $grey; + border-radius: 5px; + position: relative; + + .label{ + font-size: $font-12; + font-weight: bold; + color: black + } + + .data{ + position: absolute; + font-size: $font-10; + font-weight: bold; + color: black; + right: 10px; + top: 0; + } + + &:after{ + content:'\f107'; + font-family: $icon; + position: absolute; + font-weight: bold; + color: $grey; + top: 0; + right: -25px; + } + + + } + + .div-drop{ width: 100px; padding: 10px; diff --git a/scss/variables.scss b/scss/variables.scss index 490cee2..f1701ee 100644 --- a/scss/variables.scss +++ b/scss/variables.scss @@ -41,6 +41,8 @@ $font-48: 3rem; /* 48px */ $font-53: 3.312rem; /* 53px */ $font-alert: 8rem; /* ?px */ +$icon: 'FontAwesome'; + @each $size in 8, 10, 12, 13, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 34, 40, 45, 48, 53 { .font-#{$size} {font-size: #{$size/16}rem !important;} } @@ -50,6 +52,6 @@ $alpha: rgba(255,255,255,0.6); $green: #4e984a; $light-green: #71986e; $red: #bf0f3d; -$grey: #aaa; +$grey: #ddd; $light-grey: #f2f2f2; $dark-grey: #2f2f2f;